Попытка создать ролловер/активное состояние для миниатюр Nivo Slider

Я использую Nivo Slider в Wordpress, который у меня отлично работает, за исключением того, что мне нужен div или img для наложения миниатюр с помощью jQuery.

Я не могу загружать файлы, так как это мой первый пост, но вот изображение галереи: http://i.imgur.com/p27zA1B.png

У меня есть состояния наведения, работающие повсюду на моем сайте, с использованием div класса над миниатюрой и с этим кодом

    $(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
     ); 
});

Это не работает для Nivo Slider, так как он автоматически генерирует миниатюры, и я не могу точно определить, где находится мой код. Я пытался использовать appendTo, но я не очень хорошо разбираюсь в jQuery и в основном просто пользуюсь учебниками, которые я нахожу в Интернете. .

Цикл, который генерирует эскизы + основное изображение, выглядит следующим образом:

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

Любые идеи?


wordpress slider jquery nivo-slider
person mbillz    schedule 22.08.2013    source источник
comment
Вы можете опубликовать разметку сгенерированных миниатюр?   -  person Omar    schedule 22.08.2013
comment
Как насчет того, чтобы также опубликовать HTML-код, который он выводит из опубликованного вами PHP?   -  person sulfureous    schedule 22.08.2013

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте этот блок кода jQuery и дайте мне знать, если он имеет значение в вашем конкретном сценарии.

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

Это может быть связано с тем, как Nivo создает миниатюры на лету. Он может быть еще недоступен в DOM. Событие .on должно помочь в подобных ситуациях.

Трудно определить без рабочего примера, но надеюсь, что это сработает для вас.

person sulfureous    schedule 22.08.2013