Hi, I am building a new website where the I need to implement a photo gallery on every page. Down the bottom of the page is a row of image thumbnails, when the user rolls over a thumbnail the main page content will disappear and the correct image will display. I have attached the site's designs to illustrate the idea. Default page state with page content Image active when cursor hovers over thumbnail The thumbnails are in a <ul> with each <li> having been assigned a unique class (e.g. <li class="01"><li>.) The full images are also in an <ul> with the correct image being assigned the exact same class as their thumbnail. The HTML code is: <div id="container"> <div id="header"> <div id="logo"></div> <div id="nav"> <p>building creators</p> <ul> <li>about us</li> <li>recognition</li> <li>acknowledgements</li> <li>formi@formi.com.au</li> <li>+61 418 822 357</li> </ul> </div> </div> <div id="content"> <p>Content...</p> </div> <div class="images"> <ul> <li class="01"><img src="images/formi_1.jpg" alt="formi 1" /></li> <li class="02"><img src="images/formi_2.jpg" alt="formi 2" /></li> <li class="03"><img src="images/formi_3.jpg" alt="formi 3" /></li> <li class="04"><img src="images/formi_6.jpg" alt="formi 4" /></li> <li class="05"><img src="images/formi_7.jpg" alt="formi 5" /></li> <li class="06"><img src="images/formi_8.jpg" alt="formi 6" /></li> <li class="07"><img src="images/formi_9.jpg" alt="formi 7" /></li> <li class="08"><img src="images/formi_10.jpg" alt="formi 8" /></li> <li class="09"><img src="images/formi_11.jpg" alt="formi 9" /></li> <li class="10"><img src="images/formi_14.jpg" alt="formi 10" /></li> <li class="11"><img src="images/formi_15.jpg" alt="formi 11" /></li> <li class="12"><img src="images/formi_16.jpg" alt="formi 12" /></li> <li class="13"><img src="images/formi_17.jpg" alt="formi 13" /></li> <li class="14"><img src="images/formi_18.jpg" alt="formi 14" /></li> </ul> </div> <div class="clear"></div> <div id="thumbs"> <ul> <li class="01"><img src="images/formi_1_thm.jpg" alt="formi 1" /></li> <li class="02"><img src="images/formi_2_thm.jpg" alt="formi 2" /></li> <li class="03"><img src="images/formi_3_thm.jpg" alt="formi 3" /></li> <li class="04"><img src="images/formi_6_thm.jpg" alt="formi 4" /></li> <li class="05"><img src="images/formi_7_thm.jpg" alt="formi 5" /></li> <li class="06"><img src="images/formi_8_thm.jpg" alt="formi 6" /></li> <li class="07"><img src="images/formi_9_thm.jpg" alt="formi 7" /></li> <li class="08"><img src="images/formi_10_thm.jpg" alt="formi 8" /></li> <li class="09"><img src="images/formi_11_thm.jpg" alt="formi 9" /></li> <li class="10"><img src="images/formi_14_thm.jpg" alt="formi 10" /></li> <li class="11"><img src="images/formi_15_thm.jpg" alt="formi 11" /></li> <li class="12"><img src="images/formi_16_thm.jpg" alt="formi 12" /></li> <li class="13"><img src="images/formi_17_thm.jpg" alt="formi 13" /></li> <li class="14"><img src="images/formi_18_thm.jpg" alt="formi 14" /></li> </ul> </div> </div> HTML: And my current jQuery: $(document).ready(function() { $(".images ul li").hide(); var image_id = $(".images ul li").attr("class"); var thumb_id = $("#thumbs ul li").attr("class"); if(thumb_id.hover() == image_id { $(image_id, this).show(); } }); Code (markup): What I am trying to do is match the correct thumbnail to the correct full image by comparing the two element's classes, then hide the content and then display the matching image. Any help would be greatly appreciated! Thanks.
I have managed to get this working. The updated HTML: <div class="images"> <ul> <li class="01"><img src="images/formi_1.jpg" alt="formi 1" /></li> <li class="02"><img src="images/formi_2.jpg" alt="formi 2" /></li> <li class="03"><img src="images/formi_3.jpg" alt="formi 3" /></li> <li class="04"><img src="images/formi_4.jpg" alt="formi 4" /></li> <li class="05"><img src="images/formi_5.jpg" alt="formi 5" /></li> <li class="06"><img src="images/formi_6.jpg" alt="formi 6" /></li> <li class="07"><img src="images/formi_7.jpg" alt="formi 7" /></li> <li class="08"><img src="images/formi_8.jpg" alt="formi 8" /></li> <li class="09"><img src="images/formi_9.jpg" alt="formi 9" /></li> <li class="10"><img src="images/formi_10.jpg" alt="formi 10" /></li> <li class="11"><img src="images/formi_11.jpg" alt="formi 11" /></li> <li class="12"><img src="images/formi_12.jpg" alt="formi 12" /></li> <li class="13"><img src="images/formi_13.jpg" alt="formi 13" /></li> <li class="14"><img src="images/formi_14.jpg" alt="formi 14" /></li> </ul> </div> <div class="clear"></div> <div id="thumbs"> <ul> <li class="01_thm"><img src="images/formi_1_thm.jpg" alt="formi 1" /></li> <li class="02_thm"><img src="images/formi_2_thm.jpg" alt="formi 2" /></li> <li class="03_thm"><img src="images/formi_3_thm.jpg" alt="formi 3" /></li> <li class="04_thm"><img src="images/formi_4_thm.jpg" alt="formi 4" /></li> <li class="05_thm"><img src="images/formi_5_thm.jpg" alt="formi 5" /></li> <li class="06_thm"><img src="images/formi_6_thm.jpg" alt="formi 6" /></li> <li class="07_thm"><img src="images/formi_7_thm.jpg" alt="formi 7" /></li> <li class="08_thm"><img src="images/formi_8_thm.jpg" alt="formi 8" /></li> <li class="09_thm"><img src="images/formi_9_thm.jpg" alt="formi 9" /></li> <li class="10_thm"><img src="images/formi_10_thm.jpg" alt="formi 10" /></li> <li class="11_thm"><img src="images/formi_11_thm.jpg" alt="formi 11" /></li> <li class="12_thm"><img src="images/formi_12_thm.jpg" alt="formi 12" /></li> <li class="13_thm"><img src="images/formi_13_thm.jpg" alt="formi 13" /></li> <li class="14_thm"><img src="images/formi_14_thm.jpg" alt="formi 14" /></li> </ul> </div> HTML: And the working but crude jQuery: $(document).ready(function() { $(".images, .01, .02, .03, .04, .05, .06, .07, .08, .09, .10, .11, .12, .13, .14").hide(); $("#thumbs").hover(function() { $("#content").hide(); $(".images").show(); }, function () { $(".images").hide(); $("#content").show(); } ); $(".01_thm").hover(function() { $(".images, .01").show(); }, function() { $(".01").hide(); }); $(".02_thm").hover(function() { $(".images, .02").show(); }, function() { $(".02").hide(); }); $(".03_thm").hover(function() { $(".images, .03").show(); }, function() { $(".03").hide(); }); $(".04_thm").hover(function() { $(".images, .04").show(); }, function() { $(".04").hide(); }); $(".05_thm").hover(function() { $(".images, .05").show(); }, function() { $(".05").hide(); }); $(".06_thm").hover(function() { $(".images, .06").show(); }, function() { $(".06").hide(); }); $(".07_thm").hover(function() { $(".images, .07").show(); }, function() { $(".07").hide(); }); $(".08_thm").hover(function() { $(".images, .08").show(); }, function() { $(".08").hide(); }); $(".09_thm").hover(function() { $(".images, .09").show(); }, function() { $(".09").hide(); }); $(".10_thm").hover(function() { $(".images, .10").show(); }, function() { $(".10").hide(); }); $(".11_thm").hover(function() { $(".images, .11").show(); }, function() { $(".11").hide(); }); $(".12_thm").hover(function() { $(".images, .12").show(); }, function() { $(".12").hide(); }); $(".13_thm").hover(function() { $(".images, .13").show(); }, function() { $(".13").hide(); }); $(".14_thm").hover(function() { $(".images, .14").show(); }, function() { $(".14").hide(); }); }) Code (markup): Could someone please help me clean up the jQuery or help create a cleaner and less-intensive script? Thanks
This can be done with pure CSS, no jQuery or JavaScript needed. Example: http://www.cssplay.co.uk/menu/gallery.html You just need to change the CSS, that's it. Or search for other examples at cssplay