Question

我正在尝试使用Roundabout插件创建一个紧凑的图库。

旋转木马应旋转缩略图，并且仅对于当前焦点上的图像，单击时在Fancybox弹出窗口中打开较大的图像。

这就是标记的样子：

<ul class="image-gallery">
    <li id="img-1"><a href="images/picture1.jpg"><img src="images/th2_picture1.jpg" alt="picture 1" /></a></li>
    <li id="img-2"><a href="images/picture2.jpg"><img src="images/th2_picture2.jpg" alt="picture 2" /></a></li>
    <li id="img-3"><a href="images/picture3.jpg"><img src="images/th2_picture3.jpg" alt="picture 3" /></a></li>
    <li id="img-4"><a href="images/picture4.jpg"><img src="images/th2_picture4.jpg" alt="picture 4" /></a></li>
    <li id="img-5"><a href="images/picture5.jpg"><img src="images/th2_picture5.jpg" alt="picture 5" /></a></li>
    <li id="img-6"><a href="images/picture6.jpg"><img src="images/th2_picture6.jpg" alt="picture 6" /></a></li>
</ul>

问题是，如果我尝试在图像上激活Roundabout和Fancybox，点击它们将触发旋转和弹出，无论我点击哪个图像。相反，弹出窗口只应对当前焦点的图像有效我无法取消绑定缩略图上的click事件，因为这会禁用旋转.. 这是link to an example page（图库位于页面底部）。

修改
这是在页面加载上运行的jQuery：

$(function() {
    $('ul.image-gallery').roundabout({
        duration: 1200
    });
    $('ul.image-gallery a').fancybox();
});

Answer 1

好的，在检查了你提到的页面之后，焦点图像有了环形焦点类，所以下面的内容可以解决这个问题。试试吧

$(function() {
    $('ul.image-gallery').roundabout({
        duration: 1200
    });
    //$('ul.image-gallery .roundabout-in-focus a').fancybox();
});

修改尝试映射聚焦图像链接的单击事件，并手动打开链接URL的fancybox。同时删除上述功能中的fancybox映射。（我在代码中对它进行了评论）

$('ul.image-gallery .roundabout-in-focus a').live('click',function(event){ event.preventDefault(); $.fancybox({'href':$(this).attr('href')}); })

Answer 2

除了您的选项

之外

$('ul.image-gallery').find('li').focus(function() {
        $(this).find('a').fancybox.cancel();
    }
});

这假设您在ul上使用了环形交叉口，并且在它们内部的锚标签上使用了fancybox。当环形交叉口将焦点放在li上时，它会取消将执行相同操作的fancybox。

如何将Roundabout制作的图库与Fancybox集成？

2 个答案: