Jquery Image swap on hover Gallery

Question

Hi there Got this sorted now

Been trying all different JQuery Plugins and JS tutorials all day trying to make a image swap on hover gallery like on amazons product page, when you hover over the thumbnail and it comes up on main image.

I can't get any to work that I have tried, below is the code i have been trying:

html(edited)

<div><img id="target" src="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-1-500x500.jpg" /></div>

<div class="left" id="dkProductImage">
   <a rel="lightbox" title="Jessica Rabbit Original" href="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-1-500x500.jpg" class="thumb lightbox highlight"><img alt="Jessica Rabbit Original" src="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-1-500x500.jpg" width="100" height="100"></a>
   <a rel="lightbox" title="Jessica Rabbit Original" href="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-5-74x74.jpg" class="thumb lightbox"><img alt="Jessica Rabbit Original" src="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-5-74x74.jpg" width="100" height="100"></a>
   <a rel="lightbox" title="Jessica Rabbit Original" href="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-4-74x74.jpg" class="thumb lightbox"><img alt="Jessica Rabbit Original" src="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-4-74x74.jpg" width="100" height="100"></a>
   <a rel="lightbox" title="Jessica Rabbit Original" href="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-3-74x74.jpg" class="thumb lightbox"><img alt="Jessica Rabbit Original" src="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-3-74x74.jpg" width="100" height="100"></a>
</div>

js(edited)

<script language="javascript" type="text/javascript">
$("a.thumb").hover(function() {
   $(this).addClass('highlight')
          .siblings('a.highlight')
              .removeClass('highlight');
   $('#target').attr('src', this.href);
});
</script>

I have an image with the id target and a anchor with class of thumb, why isnt this working Im lost :(

Thanks Joe

You've got multiple elements with the same `id`. This is invalid; an `id` ***must*** be unique within the document. Also in which element did you want to show the images when they're hovered over? — David Thomas, Jun 05 '11 at 22:52

score 2 · Answer 1 · answered Jun 06 '11 at 16:35

2

Isn't it missing the jQuery start function?

$(document).ready(function(){
/* put the code here */
});

answered Jun 06 '11 at 16:35

msmafra

1,704
3
21
34

Mouhannad · Answer 2 · 2011-06-05T23:59:37.600

To duplicate the behaviour of the amazon gallery based on your code, do something like this:

html

<div><img id="target" src="image1.jpg" /></div>

<div class="left" id="dkProductImage">
    <a rel="lightbox" title="Jessica Rabbit Original" href="image1.jpg" class="thumb lightbox highlight"><img alt="Jessica Rabbit Original" src="image1_thumb.jpg"></a>
    <a rel="lightbox" title="Jessica Rabbit Original" href="image2.jpg" class="thumb lightbox"><img alt="Jessica Rabbit Original" src="image2_thumb.jpg"></a>
    <a rel="lightbox" title="Jessica Rabbit Original" href="image3.jpg" class="thumb lightbox"><img alt="Jessica Rabbit Original" src="image3_thumb.jpg"></a>
    <a rel="lightbox" title="Jessica Rabbit Original" href="image4.jpg" class="thumb lightbox"><img alt="Jessica Rabbit Original" src="image4_thumb.jpg"></a>
</div>

js

<script language="javascript" type="text/javascript">
   $("a.thumb").hover(function() {
       $(this).addClass('highlight')
              .siblings('a.highlight')
                  .removeClass('highlight');
       $('#target').attr('src', this.href);
   });
</script>

You can modify it to suit your taste but this should give an idea of how it should work.

Good luck

Note: I added the extra "highlight" class so you can style when the mouse is over a thumbnail (like Amazon) to give an indication of which image is currently viewed in the "target". You don't need to use it if you don't want to.

Hi there, thanks for your code however, its still not working, i have the new code in the main question now, if you have the time could you have a wee look for me thanks, Joe — Joseph, Jun 06 '11 at 10:55

Jquery Image swap on hover Gallery

2 Answers2