如何将使用Roundabout制作的图像库与Fancybox集成在一起? [英] How to integrate an image gallery made with Roundabout with Fancybox?

问题描述

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

I am trying to create a compact image gallery using the Roundabout plugin.

轮播应该旋转缩略图，并且仅对于当前聚焦的图像，在 Fancybox 中打开较大的图像.单击时弹出.

The carousel should rotate the thumbnails and, only for the image currently on focus, open the larger image in a Fancybox popup when clicked.

这是标记的样子:

<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>

问题是，如果我尝试同时激活图像上的环形交叉口和Fancybox，则无论我单击哪个图像，单击它们都会触发旋转和弹出窗口.相反，该弹出窗口应仅对当前聚焦的图像有效.
我无法取消绑定缩略图上的click事件，因为这也会禁用旋转. 这是链接到示例页面(画廊是在页面的底部).

The problem is, if I try to activate both Roundabout and Fancybox on the images, clicking on them will trigger both the rotation and the popup, no matter on which image I clicked on. The popup, instead, should only be active for the image currently in focus.
I cannot unbind the click event on thumbnails, because this would disable the rotation too.. This is a link to an example page (the gallery is at the bottom of the page).

这是在页面加载时运行的jQuery:

Here's the jQuery that runs on page load:

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

推荐答案

好，在检查了您提到的页面后，焦点图像具有"round回焦点"类，因此下面的方法可以解决此问题.试试

ok, after inspecting the page you have mentioned, the focus image have roundabout-in-focus class so following may resolve this issue. try it

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

修改: 尝试映射焦点图像链接的click事件，并手动打开链接框的fancybox.还要删除上述功能中的fancybox映射. (我已经在代码中对此进行了评论)

try to map the click event of focused image link and open fancybox manually for link url. Also remove fancybox mapping in above function. (I've commented it in code)

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

这篇关于如何将使用Roundabout制作的图像库与Fancybox集成在一起?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！