带有新创建元素的灯箱

Question

我的网站上有一个灯箱插件 (fancyboy) 运行。对于几乎每个图像，这个库都正常工作。

但是，我的代码中有一个片段（来自第 3 方库）创建了一个图片库（adgallery）——取自 TER（Typo3 存储库）

    var context = this;
    var image = this.images[index];
    var img_container = $(document.createElement('div')).addClass('ad-image');
    var img = $(new Image()).attr('src', image.image);
    if(image.link) {
      var link = $('<a href="'+ image.link +'" class="lightbox"></a>');
      link.append(img);
      img_container.append(link);

    } else {
      img_container.append(img);
    }

如您所见，我已经将 "class="lightbox" 属性添加到 link。dom 看起来不错：

<a href="/uploads/tx_adgallery/apfel-prasi43.jpg" class="lightbox">
    <img src="/typo3temp/_processed_/csm_apfel-prasi43_d89a571bb8.jpg" width="400" height="300">
</a>

但是，没有触发灯箱事件。相反，它只是在同一选项卡中打开 link。

<script type="text/javascript">
    $(document).ready(function()
        {
            $('.ad-gallery').adGallery({
                width:'###WIDTH###',
                height:'###HEIGHT###',
                effect:'####',
                slideshow:{
                    enable:true,
                    autostart:true,
                    speed:3000,
                    start_label:'Lecture',
                    stop_label:'Pause'
                }
            });
     });
</script>

同上，HTML-Dom是正确的。我已经尝试使用 $(window).load()，但这并没有奏效。

当我将 lightbox-class 添加到缩略图时，它可以正常工作。我错过了什么吗？

谢谢

Answer 1

问题隐藏是动态内容（每次更改都会重新呈现大图像，因此会遗漏所有事件）。你可以试试这个技巧：

$('.ad-gallery').on('mousedown touchstart', '.ad-image a', function(){
    $(this).fancybox();
});

这将 activate/reactivate fancybox 在用户点击之前发生的每个 mousedown 和 touchstart 上运行。

带有新创建元素的灯箱

Lightbox with new created elements

javascript

jquery

lightbox