-1

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

无论我点击哪个链接，它总是会打开第二个画廊。

4

4 回答 4

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 几乎一无所知，所以我很自豪能弄清楚这一点。我很确定还有很多其他方法可以解决这个问题。这个解决方案对我来说是最简单的，并且适用于我的实现。

于 2013-10-10T22:32:59.350 回答
0

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

$(".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>
于 2013-08-27T23:25:25.747 回答
0

也许您不需要像建议的那样声明 fancybox 3 次：如果您决定添加更多画廊怎么办？您不想每次都添加新脚本，对吗？

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

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

见JSFIDDLE

于 2013-08-27T23:56:38.180 回答
-1

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

于 2013-08-27T20:21:28.703 回答