灯箱 2：如何通过 javascript 添加动态图像

Question

我在尝试动态添加图像时遇到问题，因为lightbox2 （由 lokesh dakar 编写）在文档加载后由现有的 html 编码图像初始化，并且在第一次之后不再解析文档。

如果我尝试使用 javascript 添加新图像（例如将它们附加到正文中），它们不会添加到灯箱组中。

官方网站上的文档似乎没有描述任何脚本方法

有经验的人可以帮帮我吗？ jquery的解决方案非常受欢迎，但我也可以很好地处理vanilla js。

代码示例：

HTML

<body>
 <div id="container">
  <a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
  <a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
  <a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>
 </div>
 <!-- where 'Image #X' = <img src="images/thumb/image-X.jpg>" -->
 <div id="loadmore">load more images</div>
 <script src="path/to/lightbox.js"></script>
 <script>
  /* see below for the script */
 </script>
</body>

javascript

$(function(){
  $('#loadmore').click(function(){
   //ajax request for more images.
   //load them with all the needed properties...
   //then put them into the container:
   var IMG = $('<a href="images/image-10.jpg" data-lightbox="roadtrip">'+
       '<img src="images/small/image-10.jpg">'+
     '</a>');
   //magic here... add IMG to roadtrip lightbox group!!!
   //probably something like lightbox.groups['roadtrip'].add(IMG)
   //but i'm only speculating
   $('#container').append(IMG)
  });
})

Answer 1

经过几个小时的测试和阅读代码，我想到了这个神奇的代码：

//set album values
IMG = $('<a href="...">')
    .attr('data-lightbox','roadtrip')
    .append('<img src="...">')
//lightbox open:
IMG.click(function(){
    lightbox.start($(this));
    return false;
})

一些有用的提示：

不要使用$(...).data('lightbox','group')设置数据，因为每次单击链接时，lightbox都会使用选择器$('a[data-lightbox]') 。 相反，您应该使用$(...).attr('lightbox','group') 。
lightbox.album是一个不需要处理的临时变量。

Answer 2

要添加现有的 img标签以单独进行灯箱化（不具有图库功能），可以使用以下方法：

$('img')
    .wrap(function(index) {
        return '<a href="'+$(this).attr('src')+'" data-lightbox="image-'+index+'"></a>';
    });

只需在插入lightbox.js之前添加它

Answer 3

我晚了几年才找到解决方案，但希望它会在未来对其他人有所帮助。

添加图像后，您可以通过调用lightbox.init()来重新初始化 Lightbox。

例如：

var src = "https://via.placeholder.com/150"
$(`#photo-container`)
.append(`
    <a href="${src}" data-lightbox="album">
        <img src="${src}" width="100">
    </a>
`);

lightbox.init();

确保在脚本之前包含灯箱和 jQuery

Answer 4

加载图片后需要添加这段代码（ajax下成功）：

document.querySelectorAll('[data-toggle]').forEach((el) => el.addEventListener('click', (e) => {
e.preventDefault();
const lightbox = new Lightbox(el);
lightbox.show(); }));

灯箱 2：如何通过 javascript 添加动态图像

问题描述

3 个解决方案

解决方案1
8 已采纳 2015-12-26 13:23:37

解决方案2
1 2016-01-19 16:45:24

解决方案3
0 2021-09-08 13:31:46

解决方案4
0 2022-07-28 16:33:02

灯箱 2：如何通过 javascript 添加动态图像

问题描述

3 个解决方案

解决方案1 8 已采纳 2015-12-26 13:23:37

解决方案2 1 2016-01-19 16:45:24

解决方案3 0 2021-09-08 13:31:46

解决方案4 0 2022-07-28 16:33:02

解决方案1
8 已采纳 2015-12-26 13:23:37

解决方案2
1 2016-01-19 16:45:24

解决方案3
0 2021-09-08 13:31:46

解决方案4
0 2022-07-28 16:33:02