WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] jquery image hover homepage loop (4 posts)

  1. lbens
    Member
    Posted 3 years ago #

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

    http://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>

  2. Chelsea Otakan
    Member
    Posted 3 years ago #

    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!

  3. lbens
    Member
    Posted 3 years ago #

    perfect! thanks so much.. and clearly explained too :)

  4. Chelsea Otakan
    Member
    Posted 3 years ago #

    Awesome! Go ahead and mark this as resolved then?

Topic Closed

This topic has been closed to new replies.

About this Topic