Question

我在wordpress中使用foreach循环来给每个图像＆lt; rel＆gt;标记$post_ID的值。我还创建了一个名为“gallery”的数据变量，其值为$post_ID。然后我使用fancybox调用我的数据变量和fire 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

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

顺便说一下 - 你的图像都具有相同的相关性 - 这就是你想要的吗？ ..

直接在图像上触发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用来射击的地方。

使用类而不是使用＆lt;更改为使用类来激发fancybox rel＆gt;标签是诀窍。

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

通过制作我的＆lt; rel＆gt;使用post-＆gt; ID标记不同的值，使fancybox看到我的类投资组合库被点击。然后认识到每个＆lt; rel＆gt;标签是一个不同的画廊。

<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页面的信息中找到了。所以我的答案非常简单......我只是在想它。

Fancybox只在第一个画廊开火

2 个答案: