display bigger image on hover in a certain div

Question

What I try to do is displaying one bigger image and some additional smaller images below which should be shown in the bigger image div on hover.

I got this far but how do make the bigger div display its default content when none of the thumbnails is hovered?

HTML Structure:

<div class="preview">
    <img src="...">
</div
<div class="thumbs">
    <img src="..." class="zoom" rel="...">
    <img src="..." class="zoom" rel="...">
</div>

jQuery:

$(function(){
  $("img.zoom").mouseover(
    function(){
      $(".preview").html( $("<img>").attr("src", $(this).attr("rel")) );
    }
  );
});

(SEE FIDDLE)

you probably should not recreate the img tag on each call, just set its src-attribute `$(".preview img").attr('src', this.src)`. also, if you use `this.src`, the 'rel'-attribute is no longer necessary. I could write up a new anwser, but since @Pranav's is basically correct I have not done so. just some hints on style — semiomant, Jun 10 '14 at 11:20

score 0 · Answer 1 · answered Jun 10 '14 at 09:31

0

You can use mouseout event for that.

$("img.zoom").mouseout(
    function(){
      $(".preview").html( $("<img>").attr("src", "http://placehold.it/400x220") );
    }
  );

Fiddle : http://jsfiddle.net/j5g2u/3/

Hope it helps.

answered Jun 10 '14 at 09:31

Pranav

666
3
7

Okay, yes that works but what if the default image is dynamic? If I wanted to use the code with WordPress and the default one is supposed to be the_post_thumbnail - any idea on this one? – okiedokey Jun 10 '14 at 10:09
well you can get the src of that dynamic image and set it as default using $("img.whatever").attr("src","newurl.png"); – Pranav Jun 10 '14 at 10:17
Would you mind giving an example code? I did not make it work yet, I'm pretty sure I need a little guidance – okiedokey Jun 10 '14 at 10:46
http://stackoverflow.com/questions/540349/change-the-image-source-using-jquery... i hope you find this useful – Pranav Jun 10 '14 at 10:51

score 0 · Answer 2 · answered Jun 10 '14 at 09:35

You can define some function separately to use as the handler for mouseover:

var view = function(e){
  $(".preview").html( $("<img>").attr("src", $(e.target).attr("rel")) );
};

$("img.zoom").mouseover(view);
//call it initially, suppose the first img.zoom is the default
view({target: $("img.zoom")[0]});

display bigger image on hover in a certain div

2 Answers2

Demo.