VP-ASP :: Shopping Cart Software

Shopping Cart Software Solutions for anywhere in the World

US/Canada(Toll Free): +1 888 587 2278
Europe/UK: +44 (020) 7193 9408
Australia/New Zealand: +61 3 9016 4497

VP-ASP Shopping Cart Customer Forum

Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?

 All Forums
 VPCart Forum
 Customization
 getting thumbnail + exta images working
 New Topic  Reply to Topic
 Printer Friendly
Author Previous Topic Topic Next Topic  

zamfir
Starting Member

USA
26 Posts

Posted - September 10 2008 :  08:42:20  Show Profile  Visit zamfir's Homepage  Reply with Quote
I'm trying to set up a product display similar to the one here:

http://www.portable-grill-store.com/shopexd.asp?id=133

where there are thumbnails below the larger display, using the additional images resized for the thumbnails, and on click, swapping out the larger image with the thumbnail. I've tried everything and it's not working, see here:

http://volaretees.com/shopping/shopexd.asp?id=37

I modiefied my shoppage_header.htm like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<%=getlang("langcharset")%>" />
<title><%shopdynamictitle "title"%></title>
<meta name="description" content="<%shopdynamictitle "description"%>" />
<meta name="keywords" content="<%shopdynamictitle "keywords"%>" />
<%inserturchinstats%>
<script language="javascript" src="vs350.js" type="text/javascript"></script>
<script language="JavaScript" type="text/JavaScript">
<!-- Begin
function clearfield(){
//if (document.form3.keyword.value == "search this site")
if (document.form3.keyword.value == "<%=getlang("langsearchboxdefault")%>")
document.form3.keyword.value = "";
}
// End -->
</script>
<link href="stylesheets/shop.css" rel="stylesheet" type="text/css" />
<script src="dropdown.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
<!--
.style2 {
font-size: 11px;
color: #344072;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!-- Begin
function clearfield(){
if (document.form3.keyword.value == "search this site")
document.form3.keyword.value = "";
}
// End -->
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;
i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j+
+].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i+
+) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

</head>

<body>
<table id="container">
<tr>
<td class="vt">
<div id="header">
<table>
<tr>
<td width="400" ><img src="../images/VolareLogo3.gif" alt="Volare Tees" width="400" height="80" /></td>

<td width="328" class="headerlinks">
<%NavigateShowMiniCartRight "short"%> </td>
</tr>
</table>
<div class="cb"> </div>
</div>
</td>
</tr>
</table>

<table id="wrap">
<tr>
<td class="vt" colspan="2">
<div id="nav">
<!--START TOP MENU -->
<!--#include file="editor/horonavbar.html"-->
<!--END TOP MENU -->
<div class="cb"> </div>
</div>
<div id="utilbar">
<table>
<tr>
<td><a href="shopcustadmin.asp<%addSession%>"><%=getLang("langHeadMyAccount")%></a></td>
<td><%welcomenote%></td>
<td class="last">
<form method="post" action="shopsearch.asp?search=Yes" id="form3" name="form3">
<input class="searchfield" type="text" name="keyword" size="19" style="width:100" value="<%=getlang("langsearchboxdefault")%>" onclick="clearfield()" />
<input name="b1" type="submit" value="<%=getlang("langcommonsearch")%>" class="submitbtn" />
</form>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="vt" id="left">
<!-- START CATEGORY BOX -->
<h2><%=getlang("langcommoncategories")%></h2>
<%NavigateShowCategoriesStyled%>
<!-- END CATEGORY BOX -->

<!-- START TOPSELLERS BOX -->
<h2><%=getlang("langtopsellers")%></h2>
<div class="box ac">
<%NavigateTopTen%>
</div>
<!-- END TOPSELLERS BOX -->

<!-- START FEATURED PRODUCTS BOX -->
<h2><%=getlang("langfeaturedproducts")%></h2>
<div class="box"><%NavigateFEATUREDPRODUCTS%></div>
<!-- END FEATURED PRODUCTS BOX -->

<!-- START INFORMATION BOX -->
<h2><%=getlang("langcommoninformation")%></h2>
<ul>
<li><a href="shopcontent.asp?type=shipping"><%=Server.HTMLEncode(getlang("langadminshippingreturns"))%></a></li>
<li><a href="shopcontent.asp?type=terms"><%=Server.HTMLEncode(getlang("langcommonterms"))%></a></li>
<li><a href="shopcontent.asp?type=privacy"><%=Server.HTMLEncode(getlang("langcommonprivacy"))%></a></li>
<li><a href="shopcustcontact.asp"><%=Server.HTMLEncode(getlang("langcontactus"))%></a> </li>
</ul>
<!-- END INFORMATION BOX -->
</td>
<td class="vt" id="main">
<!-- END OF SHOPPAGE_HEADER.HTM -->


and my tmp_product.htm like so:

[ADD_PAGEHEADER]

<style type="text/css">
<!--
.style3 {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
color: #333333;
}
-->
</style>
<table width="100%" border="0" cellspacing="3" cellpadding="3">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" align=left valign="top"><span class="breadcrumb">[formatbreadcrumb] </span></td>
</tr>
<tr>
<td align=left width="50%" valign="top">
<table width="100%" border="0" cellspacing="2" cellpadding="2">

<tr>
<td valign=middle align=CENTER>
<span align="left" class="price">[translate cname]</span><span class=hdrproduct> ([ccode])</span><br />
<table width="450">
<tr>
<td height="250"><div align="center"><img src="[extendedimage]" alt="[translate cname]" name="main" border="0" id="main" /></div></td>
</tr>
<tr>
<td><div align="center"><a href="#"><img src="[extraimage1]" width="100" alt="[translate cname]" name="image1" hspace="3" border="2" id="image1" onclick="MM_swapImage('main','','[extraimage1]',1)" /></a> <a href="#"><img src="[extraimage2]" width="100" alt="[translate cname]" name="image2" hspace="3" border="2" id="image2" onclick="MM_swapImage('main','','[extraimage2]',1)"/></a><a href="#"><img src="[extraimage3]" width="100" alt="[translate cname]" name="image3" hspace="3" border="2" id="image3" onclick="MM_swapImage('main','','[extraimage3]',1)" /></a></div> <div align="center"></div> <div align="center"></div></td>
</tr>
<tr>
<td><div align="center"><span class="style9 style3">Click thumbnail for larger view</span></div></td>
</tr>
</table> </td>
</tr>
<tr>
<td valign=middle align=CENTER><div align="left">[translate cdescription] </div></td>
</tr>
</table> </td>
<td bgcolor="#FF9900" width=1><img src="images/misc/shim.gif" width="1" height="25"></td>
<td><table width="100%" border="0" cellspacing="2" cellpadding="1">

$

<tr>
<td align=left>
<span class=price>[FORMATCUSTOMERPRICE cprice] </span><br />
$ <span class=pricesmall> Was <strike>[formatcurrency retailprice]</strike><br />
$ [getlang langproductpricesaving]: [formatsaving cprice]</span></p> </td>
</tr>
<tr>
<td><hr size="1" style="color:#FF9900" /></td>
</tr>
<tr>
<td align="left">
[SPECIAL_ORDERBUTTON] </td>
</tr>
<tr>
<td><hr size="1" style="color:#FF9900" /></td>
</tr>
<tr>
<td align="left">
[add_reviewlinks]
[add_ratingsummary] </td>
</tr>
<tr>
<td><hr size="1" style="color:#FF9900" /></td>
</tr>
<tr>
<td align="left">
[add_comparelinks] <br />
<br />
<a href="shoptellafriend.asp?id=[catalogid][add_websesslink]">[getlang langtellafriendheader]</a></td>
</tr>


</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left">

$
<p>[translate extendeddesc]</p> </td>
</tr>
</table>
[add_crossselling]
[Add_alsobought]
[ADD_PageTrailer]

Any ideas?

Thanks,


-Mark

norik000
Starting Member

USA
43 Posts

Posted - September 15 2008 :  09:29:55  Show Profile  Visit norik000's Homepage  Reply with Quote
Hi Mark

what you are looking for can be achieved with just a simple javascript.
Would you please explain what is the problem you are facing
because I dont have test environment to test your code.

-------------------------------
www.Parscat.com
-------------------
Fedex Live Shipping Calculator + Freight
http://www.vpasp.com/virtprog/vpaspforum/topic.asp?TOPIC_ID=11363
-------------------
Go to Top of Page

ttjswp
Starting Member

USA
5 Posts

Posted - September 24 2008 :  18:29:37  Show Profile  Visit ttjswp's Homepage  Reply with Quote
Your pictures look nice now, what did you wind up using?
I want to do the same thing.
Go to Top of Page

webyhost
Starting Member

USA
35 Posts

Posted - January 19 2009 :  15:54:32  Show Profile  Reply with Quote
I am also curious how you got it working?
Please let us know.

Thank you!
Go to Top of Page

Steve2507
VP-ASP Expert

590 Posts

Posted - January 21 2009 :  07:46:24  Show Profile  Reply with Quote
If you view the source code of the page you can see how they got it working.


Steve
Sex toys from a UK sex shop
Go to Top of Page
  Previous Topic Topic Next Topic  
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Snitz Forums 2000