Topic: Lightbox after DOM manipulation

vgs pro asked 4 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


Jakub Strebeyko staff answered 4 years ago


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 4 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!

FREE CONSULTATION

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

Status

Closed

Specification of the issue

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