Advanced Search

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.

Expand | Embed | Plain Text

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.