1

jQueryを使用してサムネイルをオーバーレイするためにdivまたはimgが必要であることを除いて、完全に機能しているWordpressでNivo Sliderを使用しています。

これが私の最初の投稿なのでファイルをアップロードできませんが、ここにギャラリーの画像があります: 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>

何か案は？

4

1 に答える 1

0

この 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種の状況で役立つはずです。

実際の例がないと判断するのは難しいですが、うまくいくことを願っています。

于 2013-08-22T02:16:07.013 に答える