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

时间：2023-03-26
本文介绍了使用带有fancybox的jQuery流沙的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I am using this example of quicksand jQuery.

制作精美的 HTML5 作品集

现在，我想在单击图像时打开灯箱.为此，我正在使用fancybox jQuery.但问题在于这个制作美丽的 HTML5 作品集(quicksand jQuery)示例图像在 <Ul><LI> 标签，当在 fancybox jQuery 示例中有 <p> 标签.

Now, i want to open light box when clicking on image. for this i am using fancybox jQuery. but the problem is in this Making a Beautiful HTML5 Portfolio(quicksand jQuery) example images are in <Ul> <LI> Tag, when in fancybox jQuery example have <p> Tag.

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

I am not able to select the anchor tag between 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" alt="Illustration" /></a>
        </p>
        <p>
            <ul id="stage">
                <li data-tags="Print Design"><a id="example2" href="#"><img src="assets/img/shots/1.jpg" alt="Illustration" /></a></li>
                <li data-tags="Logo Design,Print Design"><img src="assets/img/shots/2.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design,Logo Design"><img src="assets/img/shots/3.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design,Print Design"><img src="assets/img/shots/4.jpg" alt="Illustration" /></li>
                <li data-tags="Logo Design"><img src="assets/img/shots/5.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design,Logo Design,Print Design"><img src="assets/img/shots/6.jpg" alt="Illustration" /></li>
                <li data-tags="Logo Design,Print Design"><img src="assets/img/shots/7.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design"><img src="assets/img/shots/8.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design,Logo Design"><img src="assets/img/shots/9.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design"><img src="assets/img/shots/10.jpg" alt="Illustration" /></li>
                <li data-tags="Logo Design,Print Design"><img src="assets/img/shots/11.jpg" alt="Illustration" /></li>
                <li data-tags="Logo Design,Print Design"><img src="assets/img/shots/12.jpg" alt="Illustration" /></li>
                <li data-tags="Print Design"><img src="assets/img/shots/13.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design,Logo Design"><img src="assets/img/shots/14.jpg" alt="Illustration" /></li>
                <li data-tags="Print Design"><img src="assets/img/shots/15.jpg" alt="Illustration" /></li>
                <li data-tags="Logo Design"><img src="assets/img/shots/16.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design,Logo Design,Print Design"><img src="assets/img/shots/17.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design"><img src="assets/img/shots/18.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design,Print Design"><img src="assets/img/shots/19.jpg" alt="Illustration" /></li>
                <li data-tags="Logo Design,Print Design"><img src="assets/img/shots/20.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design,Logo Design"><img src="assets/img/shots/21.jpg" alt="Illustration" /></li>
                <li data-tags="Print Design"><img src="assets/img/shots/22.jpg" alt="Illustration" /></li>
                <li data-tags="Logo Design,Print Design"><img src="assets/img/shots/23.jpg" alt="Illustration" /></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 标签中它们不是.

in this code images in P tag working for fancy box but in ul li tags they aren't.

我认为问题就在这里

<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

推荐答案

已修复.

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

The main reason fancybox didn't want to get along quicksand in your code is because of how quicksand plugin works. What quicksand does (in order to animate elements when reorganizing visible structure) is cloning the elements and injects copy of those into the DOM. Any events attached to those elements are gone after shuffling is done. This is why fancybox didn't work for those elements.

quicksand 插件文档(部分与其他插件集成").它涉及将回调函数作为第二个元素传递给流沙.一旦洗牌完成，该回调将被执行，在我们的例子中，它将负责查找并重新将fancybox应用于被洗牌的元素.

The way to fix this is described in quicksand plugin documentation (section "Integration with other plugins"). It involves passing a callback function to quicksand as a second element. That callback will be executed once the shuffling is done, in our case it will be responsible for finding and re-applying fancybox to elements that were shuffled.

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

Here's working example of using quicksand with fancybox: http://jsfiddle.net/E2vLq/29/

请注意关于代码的两点:

Please note two things about the code:

  • 现在 LI 中的所有链接都有类 fsand(所以我们不会一遍又一遍地使用相同的 id).
  • 将回调传递给流沙，将fancybox重新应用到所有匹配a.fsand选择器的元素.
  • All links in the LI's have now class fsand (so we don't use same id over and over again).
  • Passing the callback to quicksand that is re-applying fancybox to all elements that match a.fsand selector.

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

  • 对同一站点上的两个元素使用相同的 id(一般情况下，根据 html 规范，这是被禁止的).
  • 您未能在 UL 之后关闭段落元素.
  • Using same id for two elements on the same site (it is forbidden in general and according to html specs).
  • You failed to close paragraph element after UL.

这篇关于使用带有fancybox的jQuery流沙的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！

上一篇：jQuery BlockUi 消息接踵而至 下一篇：如果您在页面中包含 2 个版本的 jQuery，您如何将

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权