Image replacement gallery


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

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


Copy this code and paste it in your HTML
  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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.