/ Published in: jQuery
swaping main image by clicking thumbs
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
#Header <script type="text/javascript" src="../_scripts/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../_scripts/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript"> $(function(evt) { $("a:has(img.gallery)").click(function() { var largePath = $(this).attr("href"); var caption = $(this).attr("title"); $("#photo_large").attr({ src: largePath }); $("#caption1").text(caption); return false; }); }); </script> # body <div id="identifier"> <img alt="Live the lifestyle" height="90" src="../_images/lifestyle_banner.jpg" width="770" /></div> <div id="sidebar"> <a href="../_images/ventura_01.jpg" title="Getting ready to hit the surf"><img id="thumb_01" alt="ventura set" class="gallery" height="160" name="thumb_01" src="../_images/ventura_01_thumb.jpg" width="200" /></a> <a href="../_images/ventura_02.jpg" title="Clearly marked!"><img id="thumb_02" alt="ventura set" class="gallery" height="160" name="thumb_02" src="../_images/ventura_02_thumb.jpg" width="200" /></a> <a href="../_images/ventura_03.jpg" title="Check out the windsurfers in the back!"><img id="thumb_03" alt="ventura set" class="gallery" height="160" name="thumb_03" src="../_images/ventura_03_thumb.jpg" width="200" /></a> <a href="../_images/ventura_04.jpg" title="Winding down"><img id="thumb_04" alt="ventura set" class="gallery" height="160" name="thumb_04" src="../_images/ventura_04_thumb.jpg" width="200" /></a> </div>