最初のギャラリーでのファンシーボックスの発射

Question

私はwordpressの中でforeachループを使って、各画像の< relにタグ$post_IDの値を与えます。私はまた、$post_IDの値を持つ 'gallery'というデータ変数を作成しています。私はその後、私のデータ変数と火災のfancyboxを呼び出すためにfancyboxを使用しています。

これはすべて最初のイメージギャラリーには最適ですが、次のギャラリーに移動すると、データ値とrelタグ値が次のギャラリーで一致しても、fancyboxは起動しません。

私のjQuery：

var galleryvalue = $('.portfolio-gallery').data('gallery'); 

$("a[rel=" + galleryvalue + "]").fancybox({ 
    'transitionIn'  : 'elastic', 
    'transitionOut'  : 'elastic', 
    'cyclic'  : true, 
    'autoScale'  : true, 
    'showNavArrows'  : true, 
    'overlayColor'  : '#666' 

    }); 

私のhtml：fancyboxのみ、最初のギャラリーに取り組んでいる理由として

<?php $args = array(
    'post_type' => 'attachment', 
    'post_mime_type' => 'image', 
    'numberposts' => -1, 
    'post_parent' => $post->ID, 
    'exclude' => get_post_thumbnail_id(), 
); ?> 

<?php $images = get_posts($args); 
$imageclass = array('class' => "gallery-image"); 

if (!empty($images)) { 
    foreach($images as $image): ?> 
     <a rel="<?php echo $post->ID ?>" class="portfolio-gallery" data-gallery="<?php echo $post->ID ?>" href="<?php echo wp_get_attachment_url($image->ID, 'large'); ?> " title="" > 
      <?php echo wp_get_attachment_image($image->ID, 'singles_thumb', '' ,$imageclass); ?> 
     </a> 
    <?php endforeach; ?> 
<?php } ?> 

任意のアイデア？私のjQueryのFancyboxは、それぞれのギャラリーを開始するために異なるrelタグを探しているはずですので、私はそれについて倍増していることを知っています。

Answer 1

は私の問題への解決策を見つけました。問題は、ファンシーボックスが発射するために使用していたものであった。

< rel>タグを使用する代わりに、クラスを使用してfancyboxを起動するように変更するのは難点でした。

$('a.portfolio-gallery').fancybox({ 
    'transitionIn'  : 'elastic', 
    'transitionOut'  : 'elastic', 
    'cyclic'  : true, 
    'autoScale'  : true, 
    'showNavArrows'  : true, 
    'overlayColor'  : '#666'    
}); 

そしてポスト> IDを使用して異なる値にタグを付ける私< REL>とすることで、fancyboxは、ポートフォリオ・ギャラリーの私のクラスがクリックされたことがわかります。そして、各< rel>タグは別のギャラリーであることを認識します。

<a rel="<?php echo $post->ID ?>" class="portfolio-gallery" data-gallery="<?php echo $post->ID ?>" href="<?php echo wp_get_attachment_url($image->ID, 'large'); ?> " title="" > 
    <?php echo wp_get_attachment_image($image->ID, 'singles_thumb', '' ,$imageclass); ?> 
</a> 

ファンシーボックスhttp://fancybox.net/howtoの情報に見つかりました。だから私の答えはかなりシンプルだった...私はちょうどそれを考えていた。

Answer 2

実際にはなく答えても、私はコメントを追加できません： 複数のギャラリーを1ページにまとめることは目的ですか？

Btw - あなたの画像にはすべて同じものがあります - それはあなたが望むものですか？ ..

画像にfancybox直接トリガするために参考になっかもしれない - これは、私は通常、ワードプレスのためにそれを行う方法：

//*** START FancyBOX --> 
    jQuery(document).ready(function() { 
    /* Apply fancybox to multiple items */ 
    jQuery('.gallery-icon a,.wp-caption a,.wp-caption-text').attr('rel', 'fancygallery') 
    //* use the following add class dynamically with jQuery 
    //** jQuery('.gallery-icon a').addClass('fancybox').attr('rel','gallery') 
    jQuery(".gallery-icon a").fancybox({ 
     'my_options_here' : 'elastic', 

    }); 
    jQuery(".wp-caption a").fancybox({ 
     'my_options_here' : 'elastic', 

    }); 
});