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)
  });
})

Could you add your code snippet here.

Jitendra Khatri
– Jitendra Khatri

2015-12-24 15:40:24 +00:00
Commented Dec 24, 2015 at 15:40 — Jitendra Khatri
– Jitendra Khatri, Commented Dec 24, 2015 at 15:40
@JitendraKhatri edit done!

Nereo Costacurta
– Nereo Costacurta

2015-12-25 14:57:05 +00:00
Commented Dec 25, 2015 at 14:57 — Nereo Costacurta
– Nereo Costacurta, Commented Dec 25, 2015 at 14:57

Community · Accepted Answer · 2016-04-15 12:57:54Z

8

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.album is a temporary variable which you don't need to deal with.

edited Apr 15, 2016 at 12:57

CommunityBot

11 silver badge

answered Dec 26, 2015 at 13:23

Nereo Costacurta

8,6014 gold badges24 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nathan Arthur Over a year ago

How are you able to access the lightbox variable? I'm getting a "not defined" error.

Nereo Costacurta Over a year ago

first: assure you are using lightbox 2 (the latest). this script MUST be placed AFTER lightbox2 has loaded. so place your script after the <script src="lightbox2.js"></script> inclusion.

Nathan Arthur Over a year ago

Thanks for the help! I gave up on calling Lightbox2 directly. It seems I was having difficulty with Lightbox's internal state--things inside Lightbox were causing the "undefined" errors.

Suhail Mumtaz Awan Over a year ago

lightbox.start($(this)); this was it for me. :)

Jayna Tanawala Over a year ago

@NereoCostacurta, I am trying to show 2 dynamic images on click. on function click, I set attribute of data-lightbox and href of <a>. But it is only showing the second image i.e. last image, not both!!

Ashton · Accepted Answer · 2021-09-08 13:31:46Z

2

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

answered Sep 8, 2021 at 13:31

Ashton

613 bronze badges

Comments

Storrm · Accepted Answer · 2016-01-19 16:45:24Z

1

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

answered Jan 19, 2016 at 16:45

Storrm

1021 silver badge7 bronze badges

1 Comment

Nereo Costacurta Over a year ago

well, thank you for the proposal @Storrm! but in the question is explicitly required the "dynamic" addition, so lightbox should be already operative... and added image (or existing ones not already lightboxified) should trigger LB on click. this is achived ONLY by the second part of my accepted answer: IMG.click(function(){ lighbox.start($(this)); return false; })

Collectives™ on Stack Overflow

lightbox 2: how to add dynamically images via javascript

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related