首页 > 编程语言> 文章详细

灯箱2：如何通过JavaScript动态添加图片

2019-10-13 05:34:49 阅读：176 来源： 互联网

标签：lightbox html lightbox2 javascript jquery

我在尝试动态添加图像时遇到了麻烦,因为lightbox2(由lokesh dakar创建)是在文档加载后由现有的html编码图像初始化的,并且第一次后不再解析该文档.

如果我尝试使用javascript添加新图像(例如,将它们添加到正文中),则不会将它们添加到lighbox组中.

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

有经验的人可以帮助我吗？ jQuery的解决方案真的很受欢迎,但是我也可以很好地处理香草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)
  });
})

解决方法:

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

//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是一个不需要处理的临时变量.

标签：lightbox,html,lightbox2,javascript,jquery
来源： https://codeday.me/bug/20191013/1905695.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

灯箱2：如何通过JavaScript动态添加图片