0

下面的源代码由 Cristiano G. Carvalho 发布，以回答以下问题： 使用另一个用户创建的其他链接调用 fancybox gallery 。

<div class="details_gallery">
 <a href="#" class="manualfancybox">Manual Call Fancybox</a>
 <div class="details_gallery_min">
  <a rel="details" href="max/1.jpg" class="fancybox"><img src="min/1.jpg" alt="" /></a>
  <a rel="details" href="max/2.jpg" class="fancybox"><img src="min/2.jpg" alt="" /></a>
  <a rel="details" href="max/3.jpg" class="fancybox"><img src="min/3.jpg" alt="" /></a>
  <a rel="details" href="max/4.jpg" class="fancybox"><img src="min/4.jpg" alt="" /></a>
 </div>
</div>

<script>

$(document).ready(function(){
    $(".manualfancybox").click(function() {
        var photos  = new Array();

        $(".details_gallery_min a").each(function(){

            href = $(this).attr("href"); 
            title = $(this).attr("title"); 
            photos.push({'href': href, 'title': title})         

        });

        jQuery.fancybox(photos , 
            {   'transitionIn' : 'elastic', 
                'easingIn' : 'easeOutBack', 
                'transitionOut' : 'elastic', 
                'easingOut' : 'easeInBack', 
                'opacity' : false, 
                'titleShow' : true, 
                'titlePosition' : 'over',
                'type'              : 'image',          
                'titleFromAlt' : true 
            }
        );
    });
});

</script>

它确实有效……如果您只有一个画廊（示例中为.details_gallery_min）。

我试图改变

$(".details_gallery_min a").each(function(){

到

$(".galleryone a, .gallerytwo a").each(function(){

但它仅适用于“.galleryone a”，当我单击名为“gallerytwo”的链接时，它会打开“galleryone”。我的 HTML 代码是正确的。

我的问题是：

如果我有多个链接打开不同的画廊，并且我想对所有画廊使用相同的行为（过渡、缓动等）怎么办？

4

1 回答 1

1

好吧，虽然Cristiano G. Carvalho的回答有效，但我认为这是过度的事情。array()+ 该方法.each()在内存和性能方面将具有（n）（有争议的）高成本，如果您的画廊中有多个图像，则成本会更高。

如果一个简单的fancybox代码和手动事件处理程序可以解决这个问题，我看不出有任何理由遍历每个元素并（再次）在数组中构建fancybox画廊。但这完全是我个人的看法。

因此，例如，如果您有这样的 html：

<h3>gallery one</h3>
<div id="gallery_one">
    <a rel="galleryone" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
    <a rel="galleryone" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
... etc.
</div>

<h3>gallery two</h3>
<div id="gallery_two">
    <a rel="gallerytwo" class="fancybox" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a>
    <a rel="gallerytwo" class="fancybox" href="http://fancyapps.com/fancybox/demo/4_b.jpg"><img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt=""/></a>
...etc.
</div>

重写我自己对同一问题的答案，我会设置我需要的任何手动链接，例如：

<a class="manualfancybox" data-gallery="gallery_one" href="#nogo">manual call to first gallery</a>
<a class="manualfancybox" data-gallery="gallery_two" href="#nogo">manual call to second gallery</a>

请注意，我添加了一个 HTML5data-gallery属性，指示链接所针对的画廊（该data-gallery值与每个画廊的父容器的 ID 匹配）

然后，为所有画廊添加 fancybox 代码

$(".fancybox").fancybox({
    // API options here
});

并将事件处理程序绑定到手动fancybox调用，例如：

$(".manualfancybox").on("click", function(){
    var gallery = "#" + $(this).data("gallery");
    $(gallery).find(".fancybox").eq(0).click();
    return false;
});

.eq()根据画廊应该从哪个图像开始设置值。

见JSFIDDLE

注意：.on()需要 jQuery v1.7+

于 2013-08-15T17:28:59.143 回答