Проблемы с использованием jQuery quicksand с fancybox - PullRequest
Новая
       17

Проблемы с использованием jQuery quicksand с fancybox

3 голосов
/ 08 ноября 2011

Я использую этот пример зыбучих песков и jQuery.

Создание красивого портфолио HTML5

Теперь я хочу открыть лайтбокс при нажатии на изображение.для этого я использую 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" 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 это не так.

Я думаю, что проблема здесь 

<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

Ответы [ 2 ]

4 голосов
/ 16 ноября 2011

Исправлено.

Причина main , почему fancybox не хотел ладить с зыбучим песком в вашем коде, заключается в том, как работает плагин зыбучего песка. То, что делает зыбучие пески (для анимации элементов при реорганизации видимой структуры), клонирует элементы и внедряет их копии в DOM. Любые события, связанные с этими элементами, исчезают после того, как перетасовка завершена. Вот почему fancybox не работает для этих элементов.

Способ исправить это описан в документации по плагину quicksand (раздел «Интеграция с другими плагинами»). Он включает передачу функции обратного вызова в зыбучие пески в качестве второго элемента. Этот обратный вызов будет выполнен после того, как будет произведена перестановка, в нашем случае он будет отвечать за поиск и повторное применение fancybox к элементам, которые были перетасованы.

Вот рабочий пример использования плывуна с fancybox: http://jsfiddle.net/E2vLq/29/

Обратите внимание на две вещи о коде:

  • Все ссылки в LI теперь имеют класс fsand (поэтому мы не используем один и тот же идентификатор снова и снова).
  • Передача обратного вызова к зыбучему песку, который повторно применяет fancybox ко всем элементам, которые соответствуют селектору a.fsand.

Кроме этого , были еще две проблемы:

  • Использование одного и того же id для двух элементов на одном сайте (это запрещено вообще и согласно спецификациям html).
  • Не удалось закрыть элемент абзаца после UL.
3 голосов
/ 08 ноября 2011

Повторное использование идентификатора недопустимо.Попробуйте либо

  1. Использование другого идентификатора для a в ul

  2. Использование другого механизма для ссылки на элемент - например,используйте класс

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...