Lightbox after DOM manipulation

Topic: Lightbox after DOM manipulation

vgs pro asked 6 years ago

Hello,

lightbox works well for me using your example HTML code from mdbootstrap.com. But only with hardcoded HTML.

When I add

<div id="mdb-lightbox-ui"></div>
<div class="mdb-lightbox"><figure...>...</figure></div>

via jquery DOM manipulation, for example

$("#sample").html (...)

the lightbox does not work any more correctly. The thumbnails are visible and can be clicked, but when I click the target image, it is just opened in the current browser tab (i.e. as a direct link http://.....image.jpg).

I think this has to do something with invalid LB initialization, but just calling

initPhotoSwipeFromDOM('.mdb-lightbox');

as it is done in mdb.js does not help, I get an js error "linkE1 is undefinied", which comes from line 24058:

 linkEl = figureEl.children[0];

How I can get dynamically added divs and figures work with lightbox?

Thank you in advance

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Hi there vgs,

Thanks for reaching out. This is what I thought first - the dynamically added gallery does not get properly initiated. I followed the steps: created a button with an <code>id</code> and an event listener, that adds (via <code>.html()</code> or <code>.append()</code>) the <a href="https://mdbootstrap.com/javascript/lightbox/#basic-example">sample gallery</a> to an empty <code>div</code> element upon clicking. This is how I reached the reported issue.

Unfortunately I wasn't able to reproduce the bug fully. Adding <code>initPhotoSwipeFromDOM('.mdb-lightbox');</code> inside the event listener callback function, right beneath the <code>.html()</code> or <code>.append()</code>, solved the issue. As it turns out, I could even have have events/functions adding <code>figure</code>s and <code>div</code>s to <code>.mdb-lightbox</code> dynamically, and as long as these ended with <code>initPhotoSwipeFromDOM('.mdb-lightbox');</code>-type initialization, I was good to go. Could you perhaps provide your code?

With Best Regards,
Kuba

Please insert min. 20 characters.

Hi there vgs, Thanks for reaching out. This is what I thought first - the dynamically added gallery does not get properly initiated. I followed the steps: created a button with an id and an event listener, that adds (via .html() or .append()) the sample gallery to an empty div element upon clicking. This is how I reached the reported issue. Unfortunately I wasn't able to reproduce the bug fully. Adding initPhotoSwipeFromDOM('.mdb-lightbox'); inside the event listener callback function, right beneath the .html() or .append(), solved the issue. As it turns out, I could even have have events/functions adding figures and divs to .mdb-lightbox dynamically, and as long as these ended with initPhotoSwipeFromDOM('.mdb-lightbox');-type initialization, I was good to go. Could you perhaps provide your code? With Best Regards, Kuba

vgs pro commented 6 years ago

Yes your are right. The issue was caused by an asynchronous builtup of the DOM. The method call just took place _prior_ the DPM update :-) Thanks for pointing this out!

Add comment

Closed

This topic is closed.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

vgs

Pro User 55Support score
8Questions 5Answers 0Snippets