WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] jquery image hover homepage loop

[Resolved] jquery image hover homepage loop

  • 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>

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!

    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 ‘[Resolved] jquery image hover homepage loop’ is closed to new replies.
Skip to toolbar