I was about to use your lightbox, because it would fit my needs and works great so far. But why do you bundle carousel and modal within the script file? If a site already uses BS5, why not reuse the code, instead of include it twice?
Currently the project is compiled using module: "commonjs".
At @HolterDev we use AMD module resolution for our projects. We cannot include the current version of this project in our products since the project structure is incompatible.
Compiling bs5-lightbox with strategy UMD can increase its compatibility for multiple scenarios.
For now we compiled the project manually using UMD and included it in our products. I suggest to change to this strategy to make this package as compatible as possible. Alternatively I'd suggest to add a second webpack task to create an AMD/UMD compatible versions of the package.
Hi, thanks for this great library. Is it possible to use lazy load images?
I have so much images in the gallery. I use smaller thumbnails in the gallery. When I open the lightbox, every image is loaded directly in large size. But it would be fine. if only the current images is loaded.
Is that possible?
I'm trying to include this script into a CMS Template (head or end of body) via the <script>-Tag. The browser console however shows the following error message:
Uncaught TypeError: s is undefined <anonymous> index.js:10 <anonymous> index.bundle.min.js:5
Bootstrap 5.1.3 incl. modal and carousel are loaded (as far as I can tell).
I get the below error when trying to use the lightbox with data base64 urls. Everything works excepts when clicking on the image, the lightbox does not open and the error below is provided in the console.
Failed to construct 'URL': Invalid URL
Here is the code I am using. It works fine when I use an actual URL to an image on the server, but not with data base64 URLs.
On the latest version of Bootstrap 5.2.0, when scrolling through a gallery of images, each image slides the whole carousel in from the whatever side you click.
If I change to the version on your demo page (5.0.2) then it works exactly like your demo.
Am new to all this so hope am doing it right by reporting it here.
This seems simple enough, but controlling the size of the lightbox via data-size does not work. It only uses the default "xl".
Maybe this could be controlled by Javascript, but there is no working example in the docs that show this. All examples show control via data- attributes.
I'm trying to use bs5-lightbox in a Django project and I'm encoutering some display issues. The plugin seems to be properly implemented and reactive, however when I click on one of the images, it doesn't display the image at the expected size.
Here's what's happening:
Capture.video.du.2023-09-07.11-46-04.webm
I didn't do it in the video, but if I right click on the small-sized popped up image and "open in new tab", the proper-sized image shows up.
I uploaded the script locally but the issue was exactly the same when loading it from the CDN. The script is loaded at the end of my html file, after the bootstrap script.
Here's an excerpt of my Django template code. There's a bit of Django templating language in it but it shouldn't be hard to read. In substance, if the image has principale == True, it displays as a single image:
The {{ image.image.url }} and other sections between curly brackets dynamically load the images based on their model definition. I don't think that's where the issue comes from as I tested with different values and it seems to be loading all the expected images.
Any suggestion would be very welcome on how to fix this. Thanks!
I have a scenario where I would like to add my thumbnail gallery inside a modal window and then have those thumbnails open up the Lightbox on top of the modal. Do you know why I can not get this to work? Is there any additional code I need to apply?
I am having a hard time understanding how to implement the options, could you please provide a standalone example, where I can look at the full code of a page that uses your plugin?
I looked at the code in your website but it didn't clarify things either.
When I try to force data type (image with extension unknown to the lightbox - JPG in capitals) by data-type="image", the lightbox is forced to be rendered in an iframe, causing incorrect image alignment.
Im a previous user of ekko so I'm glad to see you made something for bootstrap 5+.
I would like our images to scale full size to the size of the modal rather than having the black bars. I know you added this as an option but I dont see how to implement it in the documentation. Could you add an example? I'm stuck. Thank you
When you close a modal box, the focus should be returned to the link you opened it from. Is there a way to get the Lightbox to work in this manner too?
Is there a way to customize the lightbox's size? It defaults to a 16:9 viewport, but I want it to use the whole height of the page and maybe 50~80% of the viewport, so it looks best on mobile and desktop, is there a way to customize it through CSS or is it baked into the JS?
Since I only need very basic lightbox functionality I'm looking for as lightweight a solution as possible, and I didn't notice anything on the documentation stating the package's additional size without the Bootstrap components. How big are the additional dependencies in KB?
Hi, I've installed the bs5-lightbox node module on a Wordpress site which is using Bootstrap 5. I've noticed that the following line of code is affecting the hamburger menu which is opening but not closing again. The 'show' class should disappear when the menu is closed but it remains on the element:
The lightbox has pre-defined aspect ration 16x9. If I open high image, it becomes very small:
How do I achieve the lightbox to change it's aspect ration according to the displayed image?
Are there any JS hooks triggered when changing the image?
Are there any HTML templates for the lightbox code itself?
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
I'm not sure of the purpose of that onload code and if it's actually needed (removing it from my local copy doesn't appear to have changed much?), but it would be better to do this onload script as an event handler on the image rather than using onload.
Hi, first of all thanks for the lightbox, it works great!
I'm wondering if it is possible to configure the main carousel using a carousel-fade option, as it's possible in bootstrap 5.2.
So, for example, the generated html should be:
div id="lightboxCarousel-xxx" class="lightbox-carousel carousel carousel-fade slide pointer-event" data-bs-ride="carousel" data-bs-interval="false">
I'm using the lightbox directly via the minified js (no custom options in js).
Thank you
I have a page that uses ajax to load the images.
How do I delay the initalization of bs5-lightbox so that the lightbox fub=nctionality can be applied to the loaded images.
On bootstrap 4 I used this:
$(document).on('click', '[data-toggle="lightbox"]', function (event) {
event.preventDefault();
$(this).ekkoLightbox();
});
The green border is the modal-body class provided by Bootstrap 5 and is the right height. The red border is the lightbox-carousel class from the bs5-lightbox module and is a child of modal-body. This is causing the sizing problem.
On further investigation, I can see that's it's positioned absolutely with a top 50% and left 50% and using CSS translate to move it up and left 50% back to the edge of the browser. This is done with the bootstrap utility classes translate-middle, top-50 and start-50. Removing these classes actually resolves the problem as the positioning reverts to the default top 0 and left 0.
I don't really want to modify the module directly as my changes will be overwritten if/when it gets updated so could you please apply this fix to the module or suggest an alternative solution or explanation as to why this problem is occurring? I look forward to your reply, thank you.
If we specify a blob URL in the data-src attribute the library automatically adds the &caption= query string at the end of the image which breaks functionality and the image is not displayed.
I suggest modifying the data-footer attribute which will add the caption to the modal footer but not as a query string on the image URL.
Can this lightbox be used to display a <div></div> with a small table of data, or only multimedia content? Seemingly some tweaks would be required, but I wasn't sure where.
I am running Rails 7 with importmap to the cdn link.
Its being load in the application.js within the initial load in the view mode it errors and does NOT work and needs the page to refresh to work. When you click into edit mode it works but clicking back to view mode it errors also with the the error mentioned in the subject line. Any idea?
I'm making website , using wordpress (make original-template) , bootstrap and this lightbox system.
Please tell me , how to insert a new line break at "data-caption".
Only HTML file , is working.
but, remake wordpress original template , its not working.
Firstly, thanks for creating such a great plugin. Seems to work brilliantly when I run it locally. In production, however, it breaks. No console errors and when you click an image you are just taken to the source in a new window. I am using Bootstrap 5.
could you help me to figure out why the modal window with images gallery appears two times on the page?
I call my JS function ones to generate a lightbox gallery: function initLightboxForImages(elemId) { document.querySelectorAll(elemId + ' a.detail_img').forEach(el => el.addEventListener('click', (e) => { e.preventDefault(); const lightbox = new Lightbox(el); lightbox.show(); })); }
The images on the page (see attached file)
When there is one image for showing, the modal window appears one time.
When there are more than one picture, the modal window appears two times.
I click on image from the other modal window, which appeared before. Maybe some collision with other modal window?