advanced code snippet search

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.

Expand | Embed | Plain Text 
  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.