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

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

Этот код будет создан динамически после вызова ajax со стороны сервера (я использую java). Im используя класс как моя ссылка на функцию 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' 
});

источник

2011-01-19 Brenard

Некоторый код был бы полезен для потенциальных ответчиков :) – stecb

Я добавил код. – Brenard

Любые предложения? – Brenard

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

источник

2011-01-19 09:10:58 rahul

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

<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>

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

источник

2012-02-14 17:28:08 lito

код не работает для галерей, хотя ... Он открывает первое изображение без проблем, но когда вы пытаетесь перейти к следующему/prev, он дает ошибку. – Sherzod

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

источник

2012-06-12 13:43:18 Janis

Это не сработает, если вы вынуждены использовать Fancybox 1 из-за плагина, такого как https://github.com/moskis/fancybox-for-wordpress, или чего-то подобного. – bafromca

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

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

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

источник

2013-04-03 23:01:36 bafromca

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

ответ

Смежные вопросы