jQuery Image Swap


/ Published in: jQuery
Save to your folder(s)

swaping main image by clicking thumbs


Copy this code and paste it in your HTML
  1. #Header
  2. <script type="text/javascript" src="../_scripts/jquery-1.3.2.min.js"></script>
  3. <script type="text/javascript" src="../_scripts/jquery-ui-1.7.2.custom.min.js"></script>
  4. <script type="text/javascript">
  5. $(function(evt) {
  6. $("a:has(img.gallery)").click(function() {
  7. var largePath = $(this).attr("href");
  8. var caption = $(this).attr("title");
  9.  
  10. $("#photo_large").attr({ src: largePath });
  11. $("#caption1").text(caption);
  12. return false;
  13. });
  14. });
  15. </script>
  16.  
  17. # body
  18. <div id="identifier">
  19. <img alt="Live the lifestyle" height="90" src="../_images/lifestyle_banner.jpg" width="770" /></div>
  20.  
  21. <div id="sidebar">
  22.  
  23. <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>
  24.  
  25. <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>
  26.  
  27. <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>
  28.  
  29. <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>
  30.  
  31. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.