Trying to create a rollover / active state for Nivo Slider thumbnails

Question

I'm using a Nivo Slider in Wordpress that I've got working perfectly except that I need a div or img to overlay the thumbnails using jQuery.

I can't upload files since this is my first post, but here is an image of the gallery: https://i.stack.imgur.com/eVKmL.png

I have hover states working everywhere else on my site using a class div over the thumbnail and with this code

    $(document).ready(function() {
    jQuery('.bottomRowLook li a').hover(
          function(){
               jQuery(this).children('.lookbook-lower-overlay').show();
          }, //hover in
          function(){
               jQuery(this).children('.lookbook-lower-overlay').hide();
          } //hover out
     ); 
});

This isn't working for the Nivo Slider since it's automatically generating thumbnails and I can't pinpoint where my code goes in. I tried using appendTo but I'm not very good at jQuery and mostly just go by tutorials I find on the internet.

The loop that is generating the thumbnails + main image looks like this:

<div class="slider-wrapper">
                    <div id="slider" class="nivoSlider default-theme">
                        <?php $args = array( 'post_type' => 'attachment', 'posts_per_page' => 15, 'post_status' =>'any', 'post_parent' => $post->ID ); ?>
                        <?php $attachments = get_posts( $args ); ?>
                        <?php if ( $attachments ): ?>
                            <?php foreach ( $attachments as $attachment ): ?>   
                                <div class="look-upper-overlay"></div>  
                                <?php $full = wp_get_attachment_image_src( $attachment->ID, true ); ?>
                                <?php $rel = wp_get_attachment_image_src ( $attachment->ID, 'thumbnail', true); ?>
                                <?php $title = $attachment->post_title; ?>
                                <img src="<?php echo $full[0]; ?>" data-thumb="<?php echo $rel[0]; ?>" title="<?php echo $title ?>" />';
                            <?php endforeach; ?>
                        <?php endif; ?>

                    </div>
                </div>

Any ideas?

Answer 1

Try this block of jQuery code and let me know if it makes a difference in your specific scenario.

$(document).ready(function() {
  $('.bottomRowLook li a').on('hover', function(){
      $(this).children('.lookbook-lower-overlay').show();
    },
    function(){
      $(this).children('.lookbook-lower-overlay').hide();
    }
  ); 
});

This might be related to the way that Nivo creates the thumbnails on the fly. It might not be accessible in the DOM yet. The .on event should help out in these kind of situations.

It's hard to determine without a working example, but hope that works for you.