Fancybox仅在第一个图库上触发

Question

我在wordpress中使用了一个foreach循环，为每个图像的<rel>标签赋予$post_ID值。 我还创建了一个名为$post_ID gallery的数据变量，其值为$post_ID 。 然后，我使用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：

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

关于fancybox为什么只在第一个画廊上起作用的任何想法？ 我的jQuery中的Fancybox应该在寻找不同的rel标签来启动每个画廊，所以我知道我对此加倍。

Answer 1

即使不是真正的答案，我也无法添加评论：您的目标是在一页上建立多个画廊吗？

顺便说一句-您的图像都具有相同的相关性-那是您想要的吗？ ..

直接在图像上触发fancybox可能会有所帮助-这是我通常在wordpress上执行的操作：

    //***  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',

    });
});

Answer 2

找到了解决我问题的方法。 问题在于fancybox用来触发什么。

诀窍是使用类而不是使用<rel>标记来更改fancybox。

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

通过使用post-> ID使我的<rel>标签具有不同的值，可以使fancybox看到单击了我的Portfolio-Gallery类。 然后识别出每个<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>

我在fancybox http://fancybox.net/howto页面上的信息中找到了。 所以我的回答很简单...我只是在想它。