CODEWITHSUNDEEP
jqueryimagehoverswapjquery-hover
Joseph
Joseph

Reputation: 1

Jquery Image swap on hover Gallery

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

Upvotes: 0

Views: 2466

Answers (2)

msmafra
msmafra

Reputation: 1714

Isn't it missing the jQuery start function?

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

Upvotes: 2

Mouhannad
Mouhannad

Reputation: 2209

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.

Upvotes: 0

Related Questions