个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我在尝试动态添加图像时遇到问题，因为 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)
});
})
最佳答案
在花了几个小时测试和阅读代码后，我想出了这个神奇的代码:
//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 是一个您不需要处理的临时变量。
关于javascript - 灯箱 2 : how to add dynamically images via javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34454681/
25
4
0
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
如何在放大的每个图像下添加自定义文本？现在它基于 alt 文本，但我想使用图像等对其进行更多自定义。 完美的解决方案是将文本显示在 div 中。 这是代码笔: // Create a lightbox
为了重新启动我的客户站点 (craft2eu.net)，我需要集成 Galleriffic用lightBox .我知道有 GallerificPlus ，但它基于旧版本的 Galleriffic，它带
设计一个网站，其中我在很多地方使用了很多背景:rgba。因此，当我尝试制作一个灯箱时，我正在使用 background: rgba(0, 0, 0 , 0.6) !important; 使屏幕的其余部
晚上好，感谢您首先尝试提供帮助。 我有一个“作品集”页面，其中包含 45 张我 build 的房屋的图片。它们被布置在一个网格中，5 宽 9 向下。简单地说，当您在浏览器中单击并展开图像时，效果很好。
我试图允许从灯箱弹出窗口填写表格。类似于“获得满意度”使用的那种(尽管我只需要能够收集信息，而不是从查询中显示信息)。您可以在 http://tweet.fabeetle.com 处查看“获得满意”示
我正在尝试使用这个灯箱， http://lokeshdhakar.com/projects/lightbox2/#getting-started in my app. 1) How can I ad
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
有谁知道一个好的 Rails 灯箱插件？我找到了 redbox，但它似乎已经过时了。 谢谢! -艾略特 最佳答案 我只使用常规的 Lightbox 2。包括所有适当的 javascript 和样式表，
我正在使用 bootstrap-lightbox以便在页面中显示某些图像。 × 我只需要显示被点击的缩略图的完整版本。 是
我目前正在使用 prettyPhoto在我正在开发的网站上，但在移动设备上遇到了一个小问题。 该插件具有选项“allow_resize: false”，它不允许调整大于视口(viewport)的照片大
我正在使用jquery lightbox ，有没有办法显示文本字段而不是图像或两者都显示？ 或者也许是另一种在灯箱弹出窗口中显示文本的方式？ 最佳答案 这是灯箱的最佳示例视频 https://www.
我对 Jquery 很陌生，我发现了几个使用 cookie 和 onload 功能打开灯箱的示例。我正在使用与 fancybox 一起使用的 cookie 示例，但我一直在我的所有网站上使用 Pret
我这辈子都想不出如何在不影响我的灯箱图像的情况下模糊变暗的背景。任何帮助将不胜感激，因为我仍在努力学习如何使用 :target 功能。我计划制作一些不同的图像，这样当我单击每个图像时，此灯箱效果将适用
首先，我将从以下内容开始:我绝不是一名开发人员、编码员等。我只是一名平面设计师，正在帮助 friend 设计她的网站。 截至目前，我在将缩略图链接到我的灯箱标注上的完整图像时遇到问题 - 您可以在 w
我肯定遇到了一个简单的问题，但就是无法解决。我想按照描述使用 jquery 触发灯箱 here但这是行不通的。.lightBox() 方法找不到，我只是不明白为什么。 代码是 $(f
我在 Lightbox iframe 中有一个按钮。如何通过单击该按钮关闭该 iframe？ 我的代码是这样的: 最佳答案 通过this answer至 Close a ligh
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我正在使用 angular 来显示我的 Student Object 的详细信息 一切正常 但还需要作业文本上的超链接，这样当有人点击它时，会打开一个灯箱，其中包含所有作业对象的详细信息。 现在我的老
我是一名优秀的程序员,十分优秀！