jquery image hover homepage loop

  • Resolved lbens

    (@lbens)


    13 years, 11 months ago

    hey.. so i’ve got this jquery hover working on my homepage post loop thumbnails;

    https://lucybenson.net/redesign2011/

    except when i rollover one image it is applying the effect to all of them. how can i add an identifier to each thumbnail, or solve it in another way?
    ANy hints would be so appreciated ??
    ps.i’m fairly new to jquery/javascript.

    javascript function
    <script type=’text/javascript’>
    jQuery(document).ready(function($){
    $(‘.slidethumb’).hover(function() {
    $(‘.slidethumb img’).stop(true,true).fadeTo(400, 0.45);
    $(‘.slidedesc’).stop(true,true).fadeIn(400);
    }, function() {
    $(‘.slidethumb img’).stop(true,true).fadeTo(400, 1);
    $(‘.slidedesc’).stop(true,true).fadeOut(400);
    });
    });
    </script>

    homepage code
    <div class=”slidethumb”>
    <img><?php get_the_image( array( ‘custom_key’ => array( ‘thumbnail’ ), ‘default_size’ => ‘thumbnail’, ‘width’ => ‘310’, ‘height’ => ‘150’ ) ); ?></img>
    <div class=”slidedesc”>
    <p><?php the_excerpt(); ?></p>
    </div>

    </div>

Viewing 3 replies - 1 through 3 (of 3 total)

  • Took me a bit to find out how to do this when I was starting out with jQuery too.

    Use the $(this) identifier to specify the specific element the actions are happening with, then use .find or .children to find child elements within it.

    Try this javascript:

    jQuery(document).ready(function($){
	$('.slidethumb').hover(function() {
		$(this).find('img').stop(true,true).fadeTo(400, 0.45);
		$(this).find('.slidedesc').stop(true,true).fadeIn(400);
	}, function() {
		$(this).find('.slidethumb img').stop(true,true).fadeTo(400, 1);
		$(this).find('.slidedesc').stop(true,true).fadeOut(400);
	});
});

    $(this) will perform the action on the instance of .slidethumb the user is currently interacting with.

    Also, use the code button in the Message box to make code a little more readable :]

    Let me know if this works for you!

    Thread Starter lbens

    (@lbens)

    perfect! thanks so much.. and clearly explained too ??

    Awesome! Go ahead and mark this as resolved then?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘jquery image hover homepage loop’ is closed to new replies.