Question

我正在尝试执行与此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个画廊做同样的事情，但它不是那样的。

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

Answer 1

我使用您提供的代码创建了一个问题的小提示，但示例中的图像小提琴 - 它似乎按照您的意愿工作。

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], {

根据每个<a>个<li>标记的数量进行索引，然后为每个标记指定1个索引。

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

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

我决定只将自动$(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>

我选择将.open_fancybox类保留在<li>元素上，尽管这不是必需的。这个解决方案取决于你包裹<a>的想法，但这里没有包含它。如果你没有，我很抱歉，我无法帮助，我想我会把这个放在这里以防万一（或者对于那些犯了同样错误的人）。我几乎不了解Javascript / JQuery所以我很自豪地想出这个。我很确定还有很多其他方法可以解决这个问题;这个解决方案对我来说是最简单的，并且可以在我的实现中使用。

Answer 2

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

$(".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>

Answer 3

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

使用.each()可以节省旅行费用：

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

参见 JSFIDDLE

Answer 4

你需要给每个图像一个单独/唯一的类，然后声明fancybox 3次，每个新类一个。

Fancybox多画廊问题

4 个答案: