Advanced Search

Return to Snippet

Revision: 30319
at August 11, 2010 19:56 by Rembrand
Initial Code 
//http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

$().ready(function() {

  $(".thumbs a").hover(function(){
																	
    var normalPath = $(this).attr("href"); //link on thumb
    var normalAlt = $(this).attr("title"); //alt on thumb
      
    $("#normalImg").attr({ src: normalPath, alt: normalAlt });//swap src of the normal sized image with url from href of the thumbnail
    $("#normalImg").parent().attr({ href: normalPath, alt: normalAlt });////swap href of the normal sized image with url from href of the thumbnail
    });
});

---

<div class="holder">
  <a href="../images/photos/batisse-01.jpg"><img id="normalImg" src="../images/photos/batisse-01.jpg" alt="photo batiment" /></a>
</div>

<ul class="thumbs">
  <li><a href="../images/photos/batisse-01.jpg">
    <img src="../images/photos/batisse-01_thumb.jpg" alt="thumb" />
  </a></li>
  <li><a href="../images/photos/batisse-02.jpg">
    <img src="../images/photos/batisse-02_thumb.jpg" alt="thumb" />
  </a></li>
  <li><a href="../images/photos/batisse-03.jpg">
    <img src="../images/photos/batisse-03_thumb.jpg" alt="thumb" />
  </a></li>
</ul>
Initial URL 
http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/
Initial Description 
Originally from Webdesignerwall (see src)
Hover thumbnails of images and see the big holder image being swapped.
Initial Title 
Image replacement gallery
Initial Tags 
images
Initial Language 
jQuery