Fancybox 和 Quicksand - 有点头疼

发布于 2024-11-28 16:38:23 字数 1468 浏览 0 评论 0原文

我一直在尝试让 Fancybox 和 Quicksand 一起工作。我让他们都在同一个页面上工作,但不是“一起”。
以下是一些代码片段:

<head>
<script type="text/javascript">
    $(document).ready(function() {  
                $("a:visible").fancybox({
                'type'              : 'image',
                'titlePosition'     : 'outside',
                'overlayColor'      : '#000',
                'overlayOpacity'    : 0.7
            });
    });

</script>
</head>

然后:

  <a href="./gallery/img/shots/3.jpg" ><img src="./gallery/img/shots/3.jpg" /></a> 

这些代码一起工作。但是,在流沙“区域”中的任何内容上都不起作用(只需在新选项卡中打开图像),例如:

<section id="container">
            <ul id="stage">
                <li data-tags="Urban"><a href="./gallery/img/shots/1.jpg"><img src="./gallery/img/shots/1.jpg" alt="Illustration" /></li></a>
            </ul>
        </section>

我环顾四周,发现我可能必须将教程中的以下代码更改

$('#stage').quicksand(link.data('list').find('li'));

$('#stage').quicksand(link.data('list').find('li'),function(){
    // FancyBox initialization code.
});

我我还四处寻找这个“初始化代码”,我发现的只是fancybox_init();。这个好像没什么作用吧? :S 我也尝试将其更改为 $('a:visible').fancybox({...});,但这也不起作用。
我知道这是一些小/愚蠢的事情,我只是看不到它。
我知道这适用于页面上的任何链接,但这是稍后要解决的问题,我不认为这是问题所在? 感谢您的帮助,
约瑟夫·达菲

I've been trying to get Fancybox and Quicksand to work together. I've got them both working, on the same page, just not "together".
Here's some pieces of code:

<head>
<script type="text/javascript">
    $(document).ready(function() {  
                $("a:visible").fancybox({
                'type'              : 'image',
                'titlePosition'     : 'outside',
                'overlayColor'      : '#000',
                'overlayOpacity'    : 0.7
            });
    });

</script>
</head>

And Then:

  <a href="./gallery/img/shots/3.jpg" ><img src="./gallery/img/shots/3.jpg" /></a> 

Together, these work. However, is doesn't work (Just opens image in new tab) on anything in the Quicksand "area", such as:

<section id="container">
            <ul id="stage">
                <li data-tags="Urban"><a href="./gallery/img/shots/1.jpg"><img src="./gallery/img/shots/1.jpg" alt="Illustration" /></li></a>
            </ul>
        </section>

I've looked around, and found that I might have to change the following code from the tutorial:

$('#stage').quicksand(link.data('list').find('li'));

to

$('#stage').quicksand(link.data('list').find('li'),function(){
    // FancyBox initialization code.
});

I've also looked around for this "initialization code", and all I;ve found is fancybox_init();. This doesn't seem to do anything? :S I've also tried changing it to the $('a:visible').fancybox({...});, but this doesn't work either.
I know it's something small/silly, I just can't see it.
I know this works on any link on the page, but that's something to fix later, I don;t think it's the issue?
Thanks for any help,
Joseph Duffy

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

圈圈圆圆圈圈 2024-12-05 16:38:23

我相信它可能不起作用的原因是您在标记中包含了链接标签。基本上,您的链接被点击,并且图像因点击而打开。尝试删除“a”标签,看看您是否仍然遇到同样的问题。

I believe the reason that it might not be working is that you're including a link tag in your mark-up. Basically, your link gets clicked and the image opens up as the result of the click. Try removing the 'a' tags and see if you still experience the same problem.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文