0

i've managed to get a simple animation working so when I roll over my div with the class "gallery-wrap", an image with the class "magnifier" appears on top.

My problem is I have lots of divs with the class "gallery-wrap" and lots of images which have the class "magnifier".

    $("img.magnifier").hide(); //this hides the image on page load

    $('.gallery-wrap').hover(function() {   
        $("img.magnifier").show();            
            }, function() {
        $("img.magnifier").hide();
    });

The img.magnifier is located inside the .gallery-wrap parent div, not inside .gallery-wrap.

I need it so this does only the current hovered element, which it is doing already, but its animating all the img.magnifier on the page?

I thought it would maybe look like this...

    $("img.magnifier").hide(); //this hides the image on page load

    $('.gallery-wrap').hover(function() {   
        $(this).parent("img.magnifier").show();            
            }, function() {
        $(this).parent("img.magnifier").hide();
    });

But cannot get it to work.

Any ideas would be a huge help thanks.

1
  • Post your actual html. parent("img.magnifier") only works if the parent of this is the exact img.magnifier. Try .parents("img.magnifier")
    – Jules
    Aug 11, 2011 at 23:32

5 Answers 5

2

Shouldn't it be like this:

$('.gallery-wrap').hover(function() {   
    $(this).find("img.magnifier").show();            
        }, function() {
    $(this).find("img.magnifier").hide();
});

If I understand correctly, img.magnifier is a child of .gallery-wrap, so find() should be used instead of parent().

1
  • Hello, sorry I badly explained the question. I meant the img.magnifier was located inside the parent div of .gallery-wrap - so this word for me.. $(this).parent().find("img.magnifier").show();
    – Joshc
    Aug 12, 2011 at 9:33
1

You were close with:

$(this).parent("img.magnifier").show(); 

Change it to:

$(this).parent().find("img.magnifier").show(); 

Then it should work. Do the same thing with your hide() of course.

0
0

Can you assign matching id values to the gallery-wrap and associated img.magnifier?

$('.gallery-wrap').hover(function() {   

    var id = $(this).attr('id');
    $("img.magnifier#"+id).show();            
        }, function() {
    $("img.magnifier#"+id).hide();
});
-1

As img.magnifier is not inside .gallery-wrap, find() will not do it here.

Try this one:



    $("img.magnifier").hide(); //this hides the image on page load

    $('.gallery-wrap').hover(function() {   
        $(this).parents("img.magnifier").last().show();            
            }, function() {
        $(this).parents("img.magnifier").last().hide();
    });

The .last() is necessary if you have more than just one img.magnifier in the parents() collection.

-1

You need to change:

$(this).parent("img.magnifier")

to:

$(this).find("img.magnifier")

since the img tag is a child element of your gallery-wrap.

2
  • I assume that this was downvoted because I proposed using the find or children function when find is the appropriate choice for this scenario?
    – RoccoC5
    Aug 12, 2011 at 0:14
  • No the img is located in the gallery-wrap parent div.
    – Joshc
    Aug 12, 2011 at 9:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.