Fancybox 只在第一个画廊开火答案

【问题标题】：Fancybox only firing on first galleryFancybox 只在第一个画廊开火
【发布时间】：2012-03-09 03:22:20
【问题描述】：

我在 wordpress 中使用了一个 foreach 循环来为每个图像的标记提供$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 标签来启动每个画廊，所以我知道我正在加倍努力。

【问题讨论】：

标签： javascript jquery wordpress fancybox

【解决方案1】：

即使不是真的回答 - 我无法添加评论：您的目标是在一页上拥有多个画廊吗？

顺便说一句-您的图像都将具有相同的 rel-这是您想要的吗？ ..

直接在图像上触发 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',

    });
});

【讨论】：

我有类似的事情，但没有积极的结果。我将 Flexslider 用于主图像，然后在 flexslider 的标题区域内使用 fancybox 图像库来创建缩略图库。我很狂野。哈哈。我实际上找到了一个答案，我会在一秒钟内发布。
好吧。我很高兴它有效。您发布的解决方案正是我所写的 - 但没关系。

【解决方案2】：

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

改用类而不是使用标签来触发 fancybox 是诀窍。

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

并且通过使用 post->ID 使我的标记具有不同的值，让 fancybox 看到我的投资组合画廊类被点击。然后识别出每个标签都是不同的画廊。

<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 页面上的信息中找到。所以我的回答很简单……我只是想多了。

【讨论】：