Fancybox只向第一个画廊开火

Fancybox only firing on first gallery

本文关键字：开火 第一个 Fancybox      更新时间：2023-09-26

我在wordpress内部使用foreach循环来给出每个图像的<rel>标记$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标签来启动每个库，所以我知道我正在加倍努力。

即使不是真的，我也不能添加注释：你的目标是在一页上有多个画廊吗？

顺便说一句-你的图片都会有相同的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，而不是使用<rel>标签就是诀窍。

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

通过使我的<rel>使用post->ID标记一个不同的值，使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>

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

相关文章：