Javascript Fancybox仅在第一个画廊开火

我使用wordpress内部的foreach循环为每个图像的标记

$post\u ID

的值。我还创建了一个名为“gallery”的数据变量，其值为

$post\u ID

。然后我使用fancybox调用我的数据变量并启动fancybox

这一切对于第一个图像库来说都是完美的，但是当我转到下一个图像库时，它不会启动fancybox，即使数据值和rel标记值在下一个图像库中匹配

我的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标签来启动每个库，这样我就知道我正在加倍努力。

即使它不是真的，我也不能添加注释： 你的目标是在一个页面上有多个图库吗

顺便说一句-你的图片都会有相同的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',

    });
});

---

即使它不是真的和答案-我不能添加评论： 你的目标是在一个页面上有多个图库吗

顺便说一句-你的图片都会有相同的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',

    });
});

---

找到了解决我问题的办法。问题在于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页面上的信息中找到了。所以我的答案很简单……我只是想得太多了。

找到了解决我问题的办法。问题在于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页面上的信息中找到了。所以我的答案很简单……我只是想得太多了。

我有类似的想法，但没有积极的结果。我使用Flexslider作为主图像，然后在Flexslider的标题区域内使用fancybox图像库来创建缩略图库。我很疯狂。哈哈，我真的找到了一个答案，我马上就发到这里。我很高兴它起作用了。你发布的解决方案和我写的一模一样，但没关系。我有类似的想法，但没有积极的结果。我使用Flexslider作为主图像，然后在Flexslider的标题区域内使用fancybox图像库来创建缩略图库。我很疯狂。哈哈，我真的找到了一个答案，我马上就发到这里。我很高兴它起作用了。你发布的解决方案和我写的一模一样，但没关系。