Topic: Lightbox after DOM manipulation
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
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 7 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!Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No