Your Cart

Shopping Cart Items: 0   Sub-Total : $0.00    View Cart    Checkout
Welcome, Guest ( Customer Panel | Login )


Home | Profile | Register | Active Topics | Members | Search | FAQ


Forgot your Password?
 All Forums
 VPCart Forum
 Customization
 Display larger image		  New Topic  Reply to Topic
 Printer Friendly
Author Previous Topic Topic Next Topic  

faolie
VP-CART New User

98 Posts
Posted - February 28 2007 :  10:44:55  Show Profile  Visit faolie's Homepage  Reply with Quote
I'm trying to find the simplest way of being able to mouse over a thumbnail image in a category display and display a larger image.

For example, say my top level category is 'mens', next level down is 'shirts', which displays several thumbnails of shirts. Mousing over a shirt image would produce a larger shirt image in a reserved area of the display, sort of like a remote rollover. I saw a post from this forum in 2004 (author jncracing, subject 'image swap') that kind of works but it applies to the product or extension page not the category page (there's an example of this on the post www.made-online.com/shopexed.asp?id=32).

Can anybody help?

Thanks in advance

David Heriot

devshb
Senior Member

United Kingdom
1904 Posts
Posted - February 28 2007 :  10:57:42  Show Profile  Visit devshb's Homepage  Reply with Quote
I guess it depends on what the mouse-over image will show post-swap (ie generic; same for each category, or specific to each category)

For mouse-over image swaps to work properly you'd need to pre-load them, otherwise by the time it loads the user would have rolled-off again (usually), so that would need to be coded-up as part of the logic.

So, you'd need 2 things done; firstly pre-loading the images, and secondly adding the javascript (all done dynamically I assume via the asp rather than hard-coded in templates etc)

Also, is the "shirt" cell a product, or a category, and which page would this be on ? (shopdisplaycategories, or shopdisplayproducts)

Remember though that people on dial-up connections will find the page slow to load if the enlarged images are quite high in bytes, and that slow-loading aspect might cause a negative hit on your search engine rankings with their robots timing-out and ignoring your pages.

Simon Barnaby
Developer
[email protected]
www.BigYellowZone.com
Web Design, Online Marketing and VPASP addons
Edited by - devshb on February 28 2007 11:03:02
Go to Top of Page

faolie
VP-CART New User

98 Posts
Posted - March 01 2007 :  12:03:15  Show Profile  Visit faolie's Homepage  Reply with Quote
Thanks Simon. I'd factored in that there could be an issue in load time, so, yes, could be a problem there.

I was interested in what you said about loading via asp rather than through a template, as I thought templates could be the way to go. But also I'm no asp programmer :(, hence the post asking for pointers if I had to struggle through some asp.

The example of shirts displayed would be through shopdisplaycategories. When a thumbnail was moused over, an enlargement of the thumbnail would show; when a thumbnail was clicked, the product and product information would show in shopdisplayproducts.

David Heriot
Go to Top of Page

devshb
Senior Member

United Kingdom
1904 Posts
Posted - March 01 2007 :  12:38:14  Show Profile  Visit devshb's Homepage  Reply with Quote
actually it'd be a combination of things I think; some of it would be done via the templates, but some of it would be done via the main asp (it depends on the kind of javascript you use to pre-load and swap I guess).

If you can find the javascript/html that you'd need to display for, say, 2 categories, then someone here should hopefully be able to post a solution about how/where to translate that javascript/html into the templates/asp.

Simon Barnaby
Developer
[email protected]
www.BigYellowZone.com
Web Design, Online Marketing and VPASP addons
Go to Top of Page

faolie
VP-CART New User

98 Posts
Posted - March 01 2007 :  12:50:37  Show Profile  Visit faolie's Homepage  Reply with Quote
Ok, great. Let me think about what I'd need.

By the way, just in case anyone wants a reference, there's a few sites out there that do exactly the kind of thing I'm looking to do. Check out www.worldoflinens.co.uk and www.sundancecatalog.com to name just two.


David Heriot
Go to Top of Page

faolie
VP-CART New User

98 Posts
Posted - March 02 2007 :  06:23:33  Show Profile  Visit faolie's Homepage  Reply with Quote
Hi, I found what I think I need at www.dynamicdrive.com/dynamicindex4/thumbnail2.htm. The html looks like this:

<a href="images/gifts/galleo.gif" rel="enlargeimage::mouseover" rev="loadarea::http://www.daisycheynes.com/shopdisplayproducts.asp?id=46&cat=Galleo+Collectable+Bear" title="This is an example"><img src="images/gifts/thumbs/galleo.jpg" alt="" height="60" width="56" border="0" /></a><br />
<a href="images/gifts/moritz.gif" rel="enlargeimage::mouseover" rev="loadarea::http://www.daisycheynes.com/shopdisplayproducts.asp?id=47&cat=Moritz+Collectable+Bear"><img src="images/gifts/thumbs/Moritz.jpg" alt="" height="60" width="54" border="0" /></a><br />
<div id="loadarea" style="width: 600px"></div>

I've loaded it into a test page so you can see how it operates: www.opws.co.uk/rollover-test.html. The js is in an external file at www.opws.co.uk/thumbnailviewer2.js.

Does this explain what I'm trying to do and how I'm trying to do it (however inexpertly)?

thanks

David Heriot
Go to Top of Page

JoeMcM
Starting Member

42 Posts
Posted - September 06 2007 :  11:19:43  Show Profile  Reply with Quote
Ok Cracked it....
Add this code to your showpage header.... just above the </head> tag:
<script language="JavaScript" type="text/JavaScript">
<!--
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_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_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>
<body onLoad="MM_preloadImages('[extraimage3]','[extraimage1]','[extraimage2]','[extraimage4]')">


Replace your tmp_product.htm with this code:

[ADD_PAGEHEADER]
<table width="100%" border="0" cellspacing="3" cellpadding="3">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align=left width="50%" valign="top">
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td class=breadcrumb>
[formatbreadcrumb]
</td>
</tr>
<tr>
<td valign=middle align=CENTER>
<img src="[extendedimage]" alt="[translate cname]" name="main" width="300" height="300" border="0" id="main" />
</td>
</tr>
</table>
</td>
<td bgcolor="#cccccc" 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=hdrproduct>[translate cname]</span>
<br /> <table border="0" cellpadding="5" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td width="50%">
<p align="center">
<a href="javascript:;" onMouseOver="MM_swapImage('main','','[extraimage1]',1)" onMouseOut="MM_swapImgRestore()"><img src="[extraimage1]" border="0" alt="[translate cname]" width="70" height="70" align="right" /></a></td>
<td width="50%">
<p align="center">
<a href="javascript:;" onMouseOver="MM_swapImage('main','','[extraimage2]',1)" onMouseOut="MM_swapImgRestore()"><img src="[extraimage2]" border="0" alt="[translate cname]" width="70" height="70" align="left" /></a></td>
</tr>
<tr>
<td width="50%">
<p align="center">
<a href="javascript:;" onMouseOver="MM_swapImage('main','','[extraimage3]',1)" onMouseOut="MM_swapImgRestore()"><img src="[extraimage3]" border="0" alt="[translate cname]" width="70" height="70" align="right" /></a></td>
<td width="50%">
<p align="center">
<a href="javascript:;" onMouseOver="MM_swapImage('main','','[extraimage4]',1)" onMouseOut="MM_swapImgRestore()"><img src="[extraimage4]" border="0" alt="[translate cname]" width="70" height="70" align="left" /></a></td>
</tr>
</table>
</td>
</tr>
$ <tr><td align="center" valign="top"><hr size="1" style="color:#cccccc" /></td></tr><tr><td align="left">[translate cdescription] </td></tr>
<tr>
<td><hr size="1" style="color:#cccccc" /></td>
</tr>
<tr>
<td align="left">[getlang langproductstock] [cstock] </td>
</tr>
<tr>
<td><hr size="1" style="color:#cccccc" /></td>
</tr>
<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:#cccccc" /></td>
</tr>
<tr>
<td align="left">
[SPECIAL_ORDERBUTTON]
</td>
</tr>
<tr>
<td><hr size="1" style="color:#cccccc" /></td>
</tr>
<tr>
<td align="left">
[add_reviewlinks]
[add_ratingsummary]
</td>
</tr>
<tr>
<td><hr size="1" style="color:#cccccc" /></td>
</tr>
<tr>
<td align="left">
[add_comparelinks]
</td>
</tr>
<tr>
<td><hr size="1" style="color:#cccccc" /></td>
</tr>
<tr>
<td align="left">
<a href="shoptellafriend.asp?id=[catalogid][add_websesslink]">[getlang langtellafriendheader]</a>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left">
<hr size="1" style="color:#cccccc" />
$ <p>[translate extendeddesc]</p>
</td>
</tr>
<tr>
<td class=hdrproduct align="left">
[add_crossselling]
</td>
</tr>
</table>
[Add_alsobought]
[ADD_PageTrailer]

Use the exteded image for the big one and extra image 1 - 4 for small. Cheers Joe
Go to Top of Page

gogogear
Starting Member

25 Posts
Posted - October 16 2008 :  03:44:34  Show Profile  Reply with Quote
I would love to get this to work on the shopdisplayproducts page, but it looks to me like you ended up doing it on the extended description product page? Has anyone got this kind of thing to work on shopdisplay products?
Go to Top of Page

Steve2507
VP-CART Expert

590 Posts
Posted - October 17 2008 :  04:37:46  Show Profile  Reply with Quote
From a business point of view I wouldn't bother doing this.

I tested it on our previous ecommerce package and it actually turned users off and drove them away.

The reason is they are not expecting a large image to appear and so that coupled with the time delay simply turns them off.

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
0 Item(s)
$0.00
  • Your Cart Is Empty