尝试为 Nivo Slider 缩略图创建翻转/活动状态答案

【问题标题】：Trying to create a rollover / active state for Nivo Slider thumbnails尝试为 Nivo Slider 缩略图创建翻转/活动状态
【发布时间】：2013-08-22 00:38:59
【问题描述】：

我在 Wordpress 中使用了一个 Nivo Slider，除了我需要一个 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>

有什么想法吗？

【问题讨论】：

你能张贴生成的缩略图的标记吗？
如何也发布它从您发布的 PHP 输出的 HTML？

标签： jquery wordpress slider nivo-slider

【解决方案1】：

试试这个 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 事件应该会有所帮助。

如果没有工作示例，很难确定，但希望对您有用。

【讨论】：