lightbox 2: how to add dynamically images via javascript
Question
I'm having trouble attempting to dynamically add images , since lightbox2 (by lokesh dakar) is initialized after document load by existent html coded images and it doesn't parse the document anymore after the first time.
If i try to add new images with javascript (appending them in the body for example) they are not added to the lighbox groups.
Documentation in official website doesn't seems to describe any scripted method
Anyone with experience can help me? solution with jquery are really welcome, but i can handle well vanilla js too.
Code sample:
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)
});
})
3 answers
solution1
8 ACCPTED 2015-12-26 13:23:37
After a couple of hours spent on testing and reading the code, I came up with this magic code:
//set album values
IMG = $('<a href="...">')
.attr('data-lightbox','roadtrip')
.append('<img src="...">')
//lightbox open:
IMG.click(function(){
lightbox.start($(this));
return false;
})
some helpful tips:
don't set data with
$(...).data('lightbox','group'), since lightbox uses the selector$('a[data-lightbox]')each time a link is clicked. Instead, you should use$(...).attr('lightbox','group').lightbox.albumis a temporary variable which you don't need to deal with.
solution2
1 2016-01-19 16:45:24
To add existing img tags to be lightboxified on their own (without gallery functionality) one could use something like:
$('img')
.wrap(function(index) {
return '<a href="'+$(this).attr('src')+'" data-lightbox="image-'+index+'"></a>';
});
Just add it BEFORE inserting the lightbox.js
solution3
0 2021-09-08 13:31:46
Im a couple of years late with a solution to this, but hopefully it will help others in the future.
You can re-initialize Lightbox by calling lightbox.init() after adding your images.
For example:
var src = "https://via.placeholder.com/150"
$(`#photo-container`)
.append(`
<a href="${src}" data-lightbox="album">
<img src="${src}" width="100">
</a>
`);
lightbox.init();
Be sure to include lightbox and jQuery before your script
solution4
0 2022-07-28 16:33:02
You need to add this code after load images (under ajax success):
document.querySelectorAll('[data-toggle]').forEach((el) => el.addEventListener('click', (e) => {
e.preventDefault();
const lightbox = new Lightbox(el);
lightbox.show(); }));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.