I REALLY wanted to do a pure CSS gallery, but it was getting far to complicated. So I opted for the simplest Javascript I know.
‘onmouseover’
It is a nice a simple addition to the responsive gallery structure:
The big main image needs to be given a name:
<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" name="main"/>
Then the thumbnail images need to swap on mouse over:
<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/atlantic.jpg';"/>
This means the gallery code is:
<div id="background"> <div id="template"> <div> <div> <img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" name="main"/> </div><!--switch-gallery-column switch-gallery-main--> </div><!--switch-gallery switch-gallery-row--> <div> <div> <img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/atlantic.jpg';"/> </div><!--switch-gallery-column switch-gallery-thumbs--> <div> <img alt="" src="http://geishaface.co.uk/ebay/highlight.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/highlight.jpg';"/> </div><!--switch-gallery-column switch-gallery-thumbs--> <div> <img alt="" src="http://geishaface.co.uk/ebay/juicy%20melons.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/juicy%20melons.jpg';"/> </div><!--switch-gallery-column switch-gallery-thumbs--> <div> <img alt="" src="http://geishaface.co.uk/ebay/pinup%20pink.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/pinup%20pink.jpg';"/> </div><!--switch-gallery-column switch-gallery-thumbs--> </div><!--switch-gallery-crosspromo switch-gallery-row--> <h1> Mouse over to zoom images</h1> </div><!--template--> </div><!--background-->
Next, is floating boxes and then a pulled together skeleton as this series has grown a little organically and I need to strip out some bits to make it easier to re-use.
Previous Post: Basic eBay Design Series 2013 Part 6 – Shrinking Responsive Gallery
One Reply to “Basic eBay Design Series 2013 Part 6 – Image Switching with Javascript”
Comments are closed.