Fancybox多个画廊发行

Fancybox Multiple Galleries Issue

本文关键字：Fancybox      更新时间：2023-09-26

我正在尝试做与此Fancybox示例相同的事情：http://jsfiddle.net/jekAe/

当我这样做的时候，它不断地为所有链接打开第二个图库。这是我的：

我的JS:

$(document).ready(function() {
var images = {
    1: [
        {
            href : 'images/1.jpg',                
        },
        {
            href : 'images/2.jpg',                
        },
        {
            href : 'images/3.jpg',                
        },
        {
            href : 'images/4.jpg',                
        },
        {
            href : 'images/5.jpg',                
        }
    ],
    2: [
        {
            href : 'images/6.jpg',                
        },
        {
            href : 'images/7.jpg',                
        },
        {
            href : 'images/8.jpg',                
        },
        {
            href : 'images/9.jpg',                
        },
        {
            href : 'images/10.jpg',                
        }
    ],
    3: [
        {
            href : 'images/11.jpg',                
        },
        {
            href : 'images/12.jpg',                
        },
        {
            href : 'images/13.jpg',                
        }
    ]
};
$(".open_fancybox").click(function() {
    $.fancybox.open(images[ $(this).index() + 1], {
        padding : 0
    });
    return false;
});
});

我的HTML:

<a class="open_fancybox" href="images/1.jpg"><img src="images/services-bg-01.jpg" alt="" width="290" height="140" class="services-bg" /></a>
<a class="open_fancybox" href="images/6.jpg"><img src="images/services-bg-02.jpg" alt="" width="290" height="140" class="services-bg" /></a>
<a class="open_fancybox" href="images/11.jpg"><img src="images/services-bg-03.jpg" alt="" width="290" height="140" class="services-bg" /></a>

我不确定我在这里做错了什么。我对jQuery知之甚少，从jsfiddle上的示例代码来看，我认为我可以对3个库做完全相同的事情，但事实并非如此。

无论我点击哪个链接，它都会打开第二个图库。

我使用您包含的代码创建了一个问题的fiddle，但示例fiddle中的图像-它似乎可以随心所欲地工作。

http://jsfiddle.net/YqLhw/

我相信问题实际上在于你没有包括的代码

<a class="open_fancybox" href="images/1.jpg"><img src="images/services-bg-01.jpg" alt="" width="290" height="140" class="services-bg" /></a>
<a class="open_fancybox" href="images/6.jpg"><img src="images/services-bg-02.jpg" alt="" width="290" height="140" class="services-bg" /></a>
<a class="open_fancybox" href="images/11.jpg"><img src="images/services-bg-03.jpg" alt="" width="290" height="140" class="services-bg" /></a>

工作良好，但如果<a>标记被包裹在例如<li>标记中，则索引中断。

<li><a class="open_fancybox" href="images/1.jpg"><img src="images/services-bg-01.jpg" alt="" width="290" height="140" class="services-bg" /></a></li>
<li><a class="open_fancybox" href="images/6.jpg"><img src="images/services-bg-02.jpg" alt="" width="290" height="140" class="services-bg" /></a></li>
<li><a class="open_fancybox" href="images/11.jpg"><img src="images/services-bg-03.jpg" alt="" width="290" height="140" class="services-bg" /></a></li>

我认为正在发生的是

$(".open_fancybox").click(function() {
$.fancybox.open(images[ $(this).index() + 1], {

是基于每个单独的<li>中的<a>标签的数量进行索引，然后为每个标签分配1的索引。

我最初的解决方案是将.open_fancybox类从<a>移动到父<li>元素。

后来我发现，在我的实现中，这意味着索引中包含了没有.open_fancybox类的其他<li>元素，从而产生了更多的问题。

我决定简单地将自动$(this).index()更改为$(this).data("galnum")，并为每个链接的库元素手动设置data-galnum=#。我的最终代码看起来有点像这样：

<li class="open_fancybox" data-galnum="1"><a href="images/1.jpg"><img src="images/services-bg-01.jpg" alt="" width="290" height="140" class="services-bg" /></a></li>
<li class="open_fancybox" data-galnum="2"><a href="images/6.jpg"><img src="images/services-bg-02.jpg" alt="" width="290" height="140" class="services-bg" /></a></li>
<li class="open_fancybox" data-galnum="3"><a href="images/11.jpg"><img src="images/services-bg-03.jpg" alt="" width="290" height="140" class="services-bg" /></a></li>

我选择在<li>元素上保留.open_fancybox类，尽管这不是必需的。这个解决方案依赖于这样一个想法，即您包装了<a>的，但这里没有包含它。如果你没有，对不起，我帮不了你，我想我会把这个放在这里以防万一（或者为了其他和我犯同样错误的人）。我几乎不了解Javascript/JQuery，所以我很自豪能弄清楚这一点。我确信还有很多其他方法可以解决这个问题；这个解决方案对我来说是最简单的，并且适用于我的实现。

这可能不是最好的方法，但我做了上面人推荐的事情。以下是我所做的：

$(".open_fancybox1").click(function() {
    $.fancybox.open(images[ $(this).index() + 0], {
        padding : 0
    });
    return false;
});
$(".open_fancybox2").click(function() {
    $.fancybox.open(images[ $(this).index() + 1], {
        padding : 0
    });
    return false;
});
$(".open_fancybox3").click(function() {
    $.fancybox.open(images[ $(this).index() + 2], {
        padding : 0
    });
    return false;
});
<a class="open_fancybox1" href="images/1.jpg"><img src="images/services-bg-01.jpg" alt="" width="290" height="140" class="services-bg" /></a>
<a class="open_fancybox2" href="images/6.jpg"><img src="images/services-bg-02.jpg" alt="" width="290" height="140" class="services-bg" /></a>
<a class="open_fancybox3" href="images/11.jpg"><img src="images/services-bg-03.jpg" alt="" width="290" height="140" class="services-bg" /></a>

也许你不需要按照建议声明fancybox 3次：如果你决定添加更多画廊怎么办？你不想每次都添加一个新的脚本，是吗？

使用.each()可以节省您的行程：

$(".open_fancybox").each(function (i) {
    $(this).on("click", function () {
        $.fancybox.open(images[i + 1], {
            padding: 0
        });
        return false;
    });
});

请参阅JSFIDDLE

您需要为每个映像提供一个单独/唯一的类，然后声明fancybox 3次，每个新类一个。

相关文章：