Запуск Fancybox в динамическом контенте - PullRequest
Новая
       19

Запуск Fancybox в динамическом контенте

2 голосов
/ 19 января 2011
Тег

My <a>, вызывающий функцию Fancybox, будет загружен после вызова из ajax. При нажатии на ссылку модальное окно не появится. Я попытался использовать <a> в статическом режиме, и это работает, но не с помощью динамического кода. Я также заметил, что при просмотре «Source» в моем браузере ie тег отсутствует. Любая помощь? Спасибо !!

этот код будет создаваться динамически после вызова ajax со стороны сервера (я использую java). Я использую класс в качестве ссылки на функцию jquery, потому что теги могут быть несколькими экземплярами с одинаковым именем класса: 

 <a class="link" href="#task" title="Details">View details</a>
    <div style="display: none;">
        <div id="task" style="width:400px;height:100px;overflow:auto;">
            some data from the server.
        </div>
    </div>

Это моя функция fancybox: 

$("a.link").fancybox({
        'titlePosition' : 'inside',
        'transitionIn'  : 'none',
        'transitionOut' : 'none'
});

Ответы [ 4 ]

3 голосов
/ 12 июня 2012

fancyBox, начиная с версии 2.0, использует «live» для привязки события клика, поэтому оно будет работать и для динамически создаваемых элементов.

2 голосов
/ 14 февраля 2012

Когда вы динамически добавляете новые элементы в DOM после того, как документ готов, fancybox не может «связать» эти новые элементы, вместо этого вы можете попытаться прослушать события в этих элементах с делегатом (), а затем динамически создать информационный блок вроде : 

<html>
<head>
    <style>
    p { background:yellow; font-weight:bold; cursor:pointer; 
      padding:5px; }
    p.over { background: #ccc; }
    span { color:red; }
    </style>

    <link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" type="text/css" />

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://pcapr.googlecode.com/svn-history/r75/trunk/script/fancybox/jquery.fancybox-1.3.4.js"></script>

    <script type="text/javascript">

        $("body").delegate("#example7", "click", function(event) {
            event.preventDefault();
            $.fancybox({
                //'modal': false,
                //'padding'        : 0,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'fade',
                'titlePosition': 'inside',
                'autoDimensions': false,
                'title': this.title,
                'width': 400,
                'height': 400,
                'href': this.href,
                'margin': 5,
                'showCloseButton': true,
                'autoScale':true,
                'hideOnOverlayClick':true,
                'hideOnContentClick':true,
                'overlayShow': true
                //'type': 'iframe'
            }

            );

        });
    </script>
</head>
<body>
  <p><a title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="http://3.bp.blogspot.com/_167-sL7Cczk/TBiMz6jdtYI/AAAAAAAABcs/JxqC2vCIFa4/s1600/cute-puppy-dog-wallpapers.jpg" id="example7">hola, click me for fancybox</a></p>

    <script type="text/javascript">


    </script>
</body>
</html>

По крайней мере, у меня это сработало! удачи!

0 голосов
/ 04 апреля 2013

Используйте jQuery (). Live ('mouseenter'), чтобы разрешить fancybox присоединяться к динамическому контенту. 

jQuery("a.fancybox").live('mouseenter', function(e){
    e.preventDefault();
    jQuery("a.fancybox").fancybox();
});

Убедитесь, что НЕ используете jQuery(this).fancybox();, иначе он будет искать только элементы внутри "mouseenter", который, скорее всего, будет только одним изображением и разбит галереями.

0 голосов
/ 19 января 2011

Возможно, вам придется использовать livequery в этой ситуации

...