Question

我有一个Lightbox-plugin（fancyboy），我在我的网站上运行。对于几乎每张图片，这个lib都是例外的。

但是，我的代码（来自第三方库）中有一个代码段，它创建了一个图片库（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);
    }

正如您所看到的，我已经添加了＆＃34; class =＆＃34; lightbox＆＃34;属性到链接。 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>

然而，灯箱事件未被触发。相反，它只是在同一个选项卡中打开链接。

<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()，但这并没有成功。

然而，当我将灯箱类添加到缩略图时，它正在工作。我错过了什么吗？

谢谢

Answer 1

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

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

这会在用户点击之前的每个mousedown和touchstart上激活/重新激活fancybox功能。

带有新创建元素的灯箱

1 个答案: