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.

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?

Can you give an example?

Thanks for your help.

Hello,

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?

The code at https://github.com/trvswgnr/bs5-lightbox/blob/main/src/index.ts#L137 causes errors in the browser:

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.

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.

So im using google drive images and with the standard image link the image dont load and gives a 403 error.

<a href="https://drive.google.com/thumbnail?id=1n7l1sFnytkPLXF5SBjvaAs6srSjHgvWO&sz=w1080" data-toggle="lightbox" data-gallery="gallery" class="col-sm-4 img-fluid">
<img src="https://drive.google.com/thumbnail?id=1n7l1sFnytkPLXF5SBjvaAs6srSjHgvWO&sz=w300" class="img-fluid"></a>

A "fix" is to change the google link to https://lh3.googleusercontent.com/d/1n7l1sFnytkPLXF5SBjvaAs6srSjHgvWO=w1080 as its not the standard API from google drive so this "fix" might just be working temporarily

But the image dont get the img-fluid class so the full image is not fitted in to the lightbox.

data-bs-ride does not use value given in options, enabled by default

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.

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:

document.querySelectorAll('[data-toggle="lightbox"]').forEach(el => el.addEventListener('click', Lightbox.initialize));

Are you aware of any issues that this line of code might cause with the functionality of the hamburger menu?

This is wonderful. Is it possible to add captions in the lightbox? If not, do you have plans to implement this functionality?

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?

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.

Am I doing something wrong?

App.js (entry file)

import 'bootstrap';
import 'bs5-lightbox';

File.html

<a href="../img/inv-item.jpeg" data-toggle="lightbox" data-gallery="hero-inv-gallery" class="ratio ratio-1x1  col-6">
    <img class="c-ofc" src="../img/inv-item.jpeg" class="img-fluid">
</a>
<a href="../img/inv-item2.jpg" data-toggle="lightbox" data-gallery="hero-inv-gallery" class="ratio ratio-1x1 col-6">
    <img class="c-ofc" src="../img/inv-item2.jpg" class="img-fluid">
</a>
<div data-src="../img/inv-item2.jpg" data-toggle="lightbox" data-gallery="hero-inv-gallery"></div>
<div data-src="../img/inv-item2.jpg" data-toggle="lightbox" data-gallery="hero-inv-gallery"></div>
<div data-src="../img/inv-item3.jpg" data-toggle="lightbox" data-gallery="hero-inv-gallery"></div>

When I view the source js file in production there is no reference to data-toggle but there is in development mode.

Appreciate any advice/guidance.

What must i do to use this with webpack?
I got allways this:
Cannot find namespace 'bootstrap'

My testcode

import {bootstrap as bootstrap} from 'bootstrap';
import 'bs5-lightbox';

Hi, I tried using data-toggle attribute along with data-remote but its not triggering inside bootstrap 5 card. Here is the sample code for reference:

let newImg = document.createElement('img');
newImg.src = 'https://i.gifer.com/33Ho.gif';
newImg.setAttribute("data-toggle","lightbox");
newImg.setAttribute("data-remote",image);

https://github.com/ShubhamAnand/infinitescroll/blob/main/index.html

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

Hi there

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?

Thanks!

Although the gallery works great, vertical images overflow the screen size and create a scroll, rather than being scaled back to fit the screen.

Edit: temporary fix;

.carousel-item img {
    width: auto !important;
    max-height: 90vh;
    margin: 0 auto;
}

Hi there,

are there any restrictions to PNG format?

i get error message in console:

=== CHROME
(index):1 Uncaught TypeError: Cannot read properties of undefined (reading 'previousSibling')
at HTMLImageElement.onload ((index):1)

=== FIREFOX
Uncaught TypeError: this.add is undefined

when i use JPG file everything works fine ...

Hi there

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?

Thanks!

I've been trying to add parameters but it doesn't seem to be taking effect during the creation of the modal

Hi everybody,

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?

Thank you!

How could one equalise image high in the gallery? May be something similar to ekko's "data-max-height" option?

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.

Using v1.8.0.

import * as bootstrap from 'bootstrap'
import 'bs5-lightbox'

Results in

ERROR in [at-loader] ./node_modules/bs5-lightbox/dist/index.d.ts:14:19
    TS2503: Cannot find namespace 'bootstrap'.

ERROR in [at-loader] ./node_modules/bs5-lightbox/dist/index.d.ts:15:22
    TS2503: Cannot find namespace 'bootstrap'.

ERROR in [at-loader] ./node_modules/bs5-lightbox/dist/index.d.ts:18:12
    TS2503: Cannot find namespace 'bootstrap'.

ERROR in [at-loader] ./node_modules/bs5-lightbox/dist/index.d.ts:19:15
    TS2503: Cannot find namespace 'bootstrap'.

ERROR in [at-loader] ./node_modules/bs5-lightbox/dist/index.d.ts:39:31
    TS2503: Cannot find namespace 'bootstrap'.

ERROR in [at-loader] ./node_modules/bs5-lightbox/dist/index.d.ts:39:56
    TS2503: Cannot find namespace 'bootstrap'.

Same with

import { Modal, Carousel, Collapse, Dropdown, Offcanvas } from 'bootstrap';
import 'bs5-lightbox'

Hi,

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:

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:

  {% for image in object.illustrations.all %}
  {% if image.principale == True %}

  <figure class="figure">
    <a href="{{ image.image.url }}" data-toggle="lightbox" data-gallery="focus-gallery" data-caption={{ image.legende }}>
          <img src="{{ image.image_thumbnail_medium.url }}" class="img-fluid">

    </a>
  </figure>

  {% endif %}
  {% endfor %}

And when principale == False, it loads a gallery with the other images:

  {% for image in object.illustrations.all %}
  {% if image.principale == False %}

  <figure class="figure">
  <a href="{{ image.image.url }}" data-toggle="lightbox" data-gallery="general-gallery">
    <img src="{{ image.image_thumbnail_small.url }}" class="rounded justify-content-between mx-1 my-1">
  </a>
  </figure>

  {% endif %}
  {% endfor %}

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!

Nice script. I’d love to see keyboard arrow navigation (left & right) as an option.

Hi,
I get this error. can you give me a tip what to do?

bootstrap already installed

Hi,
I'm using the full screen option on your bs5-lightbox module to display some HTML content but it's cutting off at the top. Example here (click on 'view plant list' button half way down the page): http://fermionx.britwebtest.co.uk/electronic-contract-manufacturing/pcba/

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.

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?

Vimeo iframe src returns false.

Hello,

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

<a href="<?php echo $product->imageMainURL ?>?image=250" data-toggle="lightbox" data-caption="This describes the image" data-type="image"> <img src="<?php echo $product->imageMainURL ?>?image=250" class="img-fluid" data-type="image"> </a>

Image URL: https://target.scene7.com/is/image/Target/GUEST_7425d8e4-eb03-4fda-9ae5-20864a19829a

With low-res images, I'd like to be able to prevent the image from being displayed any larger than the original resolution.

Thanks for your consideration, and for this library 🙏

Hi,

How to use without npm?

Direct in HTML on head.

Thanks.

Similar to #12, the use of inline style attributes breaks Content Security Policies without the (insecure) setting style: unsafe-inline.

Instead of using style attributes, styling should probably be supplied via classes.

In total I count 7 instances of the style attribute in index.js, for example:

How to change background color to transaparent mate? i write this, but not work :(

.lightbox-carousel > .carousel-inner > .carousel-item > .ratio{
    background-color:#fff0;
  }

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?

Thanks

Larry

I have:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.bundle.min.js"></script>

and have used the example from the documentation

<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox">
	<img src="https://unsplash.it/600.jpg?image=251">
</a>

and instead of the lightbox opening, it liks to the image url.

Hello,

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.

<a data-remote="data:image/jpeg;base64,/9j/4AAQ..." data-toggle="lightbox" data-gallery="user-gal"> <img src="data:image/jpeg;base64,/9j/4AAQ..." class="img-fluid"> </a>

Does this not support these data URLs? Or am I doing something wrong for this specifically?

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.

Was attempting to use this with a newer version of Bootstrap 5 and ran in the same issue as seen here
https://stackoverflow.com/questions/74567169/why-is-data-bs-interval-false-no-longer-working-in-bootstrap-5-2-3-in-year-202

Where the images in the gallery style with auto play through when loaded into the lightbox.

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.

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

is threre a variation of this that i can use?

The vertical image in lightbox will have the scrollbar
How can I object-fit it inside the box?

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.

Thank you.

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.

Basically I'm trying to do the same as mentioned in https://trvswgnr.github.io/bs5-lightbox/#force-type, but the option is ignored (this happens also in the linked example).

Can you insert a solution to use the youtube-nocookie.com for youtube Videos?

Great package!

Is there a way to render bs5-lightbox directly with Base64 content instead of the URL?

Modern browsers don't allow Base64 sources as href values.