Posted By

Rembrand on 08/11/10


Tagged

images gallery


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

colingardom


Image replacement gallery


 / Published in: jQuery
 

URL: http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

Originally from Webdesignerwall (see src) Hover thumbnails of images and see the big holder image being swapped.

  1. //http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/
  2.  
  3. $().ready(function() {
  4.  
  5. $(".thumbs a").hover(function(){
  6.  
  7. var normalPath = $(this).attr("href"); //link on thumb
  8. var normalAlt = $(this).attr("title"); //alt on thumb
  9.  
  10. $("#normalImg").attr({ src: normalPath, alt: normalAlt });//swap src of the normal sized image with url from href of the thumbnail
  11. $("#normalImg").parent().attr({ href: normalPath, alt: normalAlt });////swap href of the normal sized image with url from href of the thumbnail
  12. });
  13. });
  14.  
  15. ---
  16.  
  17. <div class="holder">
  18. <a href="../images/photos/batisse-01.jpg"><img id="normalImg" src="../images/photos/batisse-01.jpg" alt="photo batiment" /></a>
  19. </div>
  20.  
  21. <ul class="thumbs">
  22. <li><a href="../images/photos/batisse-01.jpg">
  23. <img src="../images/photos/batisse-01_thumb.jpg" alt="thumb" />
  24. </a></li>
  25. <li><a href="../images/photos/batisse-02.jpg">
  26. <img src="../images/photos/batisse-02_thumb.jpg" alt="thumb" />
  27. </a></li>
  28. <li><a href="../images/photos/batisse-03.jpg">
  29. <img src="../images/photos/batisse-03_thumb.jpg" alt="thumb" />
  30. </a></li>
  31. </ul>

Report this snippet  

You need to login to post a comment.