如何将 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>

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

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();
});

推荐答案

好的，在检查你提到的页面后，焦点图像有roundabout-in-focus类，所以下面可能会解决这个问题.试试看

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();
});

尝试映射聚焦图像链接的点击事件并手动打开fancybox以获得链接url.还要删除上述函数中的花式框映射.(我已经在代码中注释了)

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