使用带有fancybox的jQuery流沙的问题

Posted 2023-03-05

技术标签:

【中文标题】使用带有fancybox的jQuery流沙的问题【英文标题】：Problems using jQuery quicksand with fancybox 【发布时间】：2011-12-24 06:52:09 【问题描述】：

我正在使用这个流沙 jQuery 示例。

Making a Beautiful html5 Portfolio

现在，我想在单击图像时打开灯箱。为此，我正在使用fancybox jQuery。但问题在于这个制作漂亮的 HTML5 组合（quicksand jQuery）示例图像在<Ul> <LI> 标签中，而在fancybox jQuery 示例中有<p> 标签。

我无法选择 ul li 之间的锚标记。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>Making a Beautiful HTML5 Portfolio | Tutorialzine Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script>
            !window.jQuery && document.write('<script src="assets/js/jquery-1.4.3.min.js"><\/script>');
        </script>

        <script src="assets/js/jquery.quicksand.js"></script>
        <script src="assets/js/script.js"></script>

        <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
        <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="./fancybox/style.css" />
        <script type="text/javascript">
            $(document).ready(function() 

                $("a#example2").fancybox(
                    'overlayShow'   : false,
                    'transitionIn'  : 'elastic',
                    'transitionOut' : 'elastic'
                );
                $("ul li a#example2").fancybox(
                    'overlayShow'   : false,
                    'transitionIn'  : 'elastic',
                    'transitionOut' : 'elastic'
                );


            );
        </script>
    </head>

    <body>

        <header>
            <h1>My Portfolio</h1>
        </header>

        <nav id="filter"></nav>

        <section id="container">
        <p>
        <a id="example2" href="assets/img/shots/1.jpg"><img src="assets/img/shots/1.jpg"  /></a>
        </p>
        <p>
            <ul id="stage">
                <li data-tags="Print Design"><a id="example2" href="#"><img src="assets/img/shots/1.jpg"  /></a></li>
                <li data-tags="Logo Design,Print Design"><img src="assets/img/shots/2.jpg"  /></li>
                <li data-tags="Web Design,Logo Design"><img src="assets/img/shots/3.jpg"  /></li>
                <li data-tags="Web Design,Print Design"><img src="assets/img/shots/4.jpg"  /></li>
                <li data-tags="Logo Design"><img src="assets/img/shots/5.jpg"  /></li>
                <li data-tags="Web Design,Logo Design,Print Design"><img src="assets/img/shots/6.jpg"  /></li>
                <li data-tags="Logo Design,Print Design"><img src="assets/img/shots/7.jpg"  /></li>
                <li data-tags="Web Design"><img src="assets/img/shots/8.jpg"  /></li>
                <li data-tags="Web Design,Logo Design"><img src="assets/img/shots/9.jpg"  /></li>
                <li data-tags="Web Design"><img src="assets/img/shots/10.jpg"  /></li>
                <li data-tags="Logo Design,Print Design"><img src="assets/img/shots/11.jpg"  /></li>
                <li data-tags="Logo Design,Print Design"><img src="assets/img/shots/12.jpg"  /></li>
                <li data-tags="Print Design"><img src="assets/img/shots/13.jpg"  /></li>
                <li data-tags="Web Design,Logo Design"><img src="assets/img/shots/14.jpg"  /></li>
                <li data-tags="Print Design"><img src="assets/img/shots/15.jpg"  /></li>
                <li data-tags="Logo Design"><img src="assets/img/shots/16.jpg"  /></li>
                <li data-tags="Web Design,Logo Design,Print Design"><img src="assets/img/shots/17.jpg"  /></li>
                <li data-tags="Web Design"><img src="assets/img/shots/18.jpg"  /></li>
                <li data-tags="Web Design,Print Design"><img src="assets/img/shots/19.jpg"  /></li>
                <li data-tags="Logo Design,Print Design"><img src="assets/img/shots/20.jpg"  /></li>
                <li data-tags="Web Design,Logo Design"><img src="assets/img/shots/21.jpg"  /></li>
                <li data-tags="Print Design"><img src="assets/img/shots/22.jpg"  /></li>
                <li data-tags="Logo Design,Print Design"><img src="assets/img/shots/23.jpg"  /></li>
            </ul>

        </section>

        <footer>
            <h2>Making a Beautiful HTML5 Portfolio</h2>
            <a class="tzine" href="http://tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/">Read &amp; Download on</a>
        </footer>



    </body>
</html>

在此代码中，P 标签中的图像适用于花哨的盒子，但在 ul li 标签中它们不是。

我认为问题就在这里

<script type="text/javascript">
                $(document).ready(function() 

                    $("a#example2").fancybox(
                        'overlayShow'   : false,
                        'transitionIn'  : 'elastic',
                        'transitionOut' : 'elastic'
                    );
                    $("ul li a#example2").fancybox(
                        'overlayShow'   : false,
                        'transitionIn'  : 'elastic',
                        'transitionOut' : 'elastic'
                    );


                );
    </script>

全码http://fyels.in/Y95

【问题讨论】：

大多数人不会费心阅读这么多代码。如果可以，请尝试将其最小化到问题仍然存在但代码更小的水平。 @Amaan ohh 然后看看 jQuery 选择的最后一个代码，我写了他们这是主要问题。您尝试应用 fancybox 两次是否有原因？第一个正在为图像工作

但第二个不适用于

中的图像这就是问题 【参考方案1】：

修复它。

fancybox 不想在您的代码中使用流沙的主要原因是流沙插件的工作原理。流沙所做的（为了在重组可见结构时为元素设置动画）是克隆元素并将它们的副本注入到 DOM 中。洗牌完成后，附加到这些元素的任何事件都将消失。这就是为什么 fancybox 不适用于这些元素的原因。

quicksand plugin documentation（“与其他插件集成”部分）中描述了解决此问题的方法。它涉及将回调函数作为第二个元素传递给流沙。该回调将在洗牌完成后执行，在我们的例子中，它将负责查找并重新将fancybox应用于被洗牌的元素。

这里是使用流沙和fancybox的工作示例：http://jsfiddle.net/E2vLq/29/

请注意关于代码的两点：

LI 中的所有链接现在都有类 fsand（因此我们不会一遍又一遍地使用相同的 id）。将回调传递给流沙，流沙将fancybox重新应用到所有匹配a.fsand选择器的元素。

除此之外，还有另外两个问题：

对同一站点上的两个元素使用相同的 id（根据 html 规范，这通常是被禁止的）。您未能在 UL 之后关闭段落元素。

【讨论】：

您的示例在点击图片后无法在 jsfiddle.net/wtk_pl/E2vLq 用于幻想框终于解决了！！！您给出并解释了非常好的解决方案（CLASS）。谢谢！！【参考方案2】：

重复使用 id 无效。尝试任一

在ul 中为a 使用不同的ID

使用不同的机制来引用元素 - 例如使用类

【讨论】：

我也尝试过不同的课程，让我试试 ul 中的 id。从fyels.in/Y95下载我的代码，你可以帮助我更好的方式

以上是关于使用带有fancybox的jQuery流沙的问题的主要内容，如果未能解决你的问题，请参考以下文章

Fancybox 不适用于 jQuery v1.9.0 [ f.browser 未定义 / 无法读取属性 'msie' ]

jquery fancybox 只显示 ajax 内容的第一行

jQuery FancyBox Iframe - 在fancybox 中使用$(document).ready？

使用 Fancybox 的问题

Uncaught TypeError: jQuery(...).fancybox is not a function｜wordpress中使用的fancybox

用jquery设置fancybox高度