I have observed on ebay that only 1 large image of a product is displayed and around it a few more thumbnails are displayed. When you click (sometimes hovering does it) one of the thumbnails, the large image is replaced by a large copy of the thumbnail. Effectively you are able to view the object with different perspectives.
How is such a feat achieved? Can you please provide me with examples?
Regards,
-sgsawant
it is done with javascript, you can search google with javascript image gallery or slide shows.
you can copy and paste javascript code from the following website :
http://www.dynamicdrive.com/dynamicindex4/indexb.html
<img id='largeimg' src='largeimg0.jpg' style='float:right'>
<img src='smallimage1.jpg' onclick='document.getelementbyid('largeimg').src="largeimg1.jpg";'><br>
<img src='smallimage2.jpg' onclick='document.getelementbyid('largeimg').src="largeimg2.jpg";'><br>
<img src='smallimage3.jpg' onclick='document.getelementbyid('largeimg').src="largeimg3.jpg";'><br>
<img src='smallimage4.jpg' onclick='document.getelementbyid('largeimg').src="largeimg4.jpg";'>witdh height statements omitted for brevity
together with an image preload script between the </body></html>(after page load) tags to make the large images appear to be instant
</body>
<script language="javascript" type="text/javascript">
//<![CDATA[
<!--
largeimage1 = new Image();
largeimage1.src = "http://pics.mysite.com/largeimage1.jpg";
largeimage2 = new Image();
largeimage2.src = "http://pics.mysite.com/largeimage2.jpg";
largeimage3 = new Image();
largeimage3.src = "http://pics.mysite.com/largeimage3.jpg";
largeimage4 = new Image();
largeimage4.src = "http://pics.mysite.com/largeimage4.jpg";
//-->
//]]>
</script></html>We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.