I want to add a "rollover to view" functionality to the photo gallery of my ecommerce website.
Here is a good example. [url removed, login to view]
The layout of my photo gallery already looks like the one shown from the example; a 310x310 thumbnail (thumb_0) on the top and four 140x140 thumbnails (thumb_1, thumb_2, thumb_3, thumb4) on the bottom; clicking any thumbnail will pop up a lightbox of enlarged version image. I want to add a "rollover to view" functionality, so each time mouseover the thumb (1-4), a 310x310 version of thumb(1-4) will replace thumb(0) and resume to thumb(0) once mouseout. At the same time, clicking any thumb will still bring up the enlarged full size image.
Part of the codes to display the thumbnails from my php file looks like the following:
[url removed, login to view]('<?php echo '<a href="' . tep_href_link($image_lg) . '" target="_blank" rel="lightbox[group]" title="'.$product_info['products_name'].'" >'
. $extraImagePopupImage; ?><br /><span class="smallText"><?php echo $extraImageURLText; ?></span></a>');
<!-- EOF LIGHTBOX/SLIMBOX -->
It should be an easy onmouseover/out javascrtip addon, so no bid over $30. Thank you!