Search code examples
bootstrap-5bootstrap-lightbox

Lightbox for Bootstrap 5 not loading properly

I'm having difficulties installing this Lightbox for Bootstrap 5 : https://trvswgnr.github.io/bs5-lightbox/

Even though it seems very easy to integrate and well documented, the pictures open in a new tab when clicked :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Lightbox for Bootstrap 5</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bs5-lightbox@1.8.3/dist/index.bundle.min.js"></script>
<!--<script>
import Lightbox from 'bs5-lightbox';
document.querySelectorAll('.lightbox').forEach(el => el.addEventListener('click', Lightbox.initialize));    
</script>-->
</head>

<body>
    <div class="row justify-content-center">
        <div class="col-sm-3" data-code="example-1">
            <a href="https://unsplash.it/1200/768.jpg?image=250" data-toggle="lightbox" data-caption="This describes the image">
                <img src="https://unsplash.it/600.jpg?image=250" class="img-fluid">
            </a>
        </div>
    </div>
</body>
</html>

I read older questions on similar problems but they don't provide solution as they're not refering to the same plugins and BS versions.

Here are a few things I tried :

  • I made sure the scripts were loading in the right order (and tried different positions)
  • I double checked the URLs
  • I litterally copied/pasted the example to avoid typo.
  • I tried previous versions.
  • I isolated all the scripts on a test page to avoid external conflict.
  • I passed various options to check the reaction (the comments in the example below).
  • I switched data-* attributes to data-bs-* (the new Bootstrap nomenclature)

My only doubt would be about PHP version on my server as I'm currently on PHP 7.0. What do you think ? Could it be the problem and how to be sure ?

Thanks for the help.

Solution

  • In the code snippet you included in your post, you have the JavaScript in the header. If you put it at the end of the body, then the elements will exist for the JavaScript to act upon.

    The source code you're using for bs5-lightbox includes the querySelectorAll function, so you don't need to include it again.

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="row justify-content-center">
    <div class="col-sm-3" data-code="example-1">
      <a href="https://unsplash.it/1200/768.jpg?image=250" data-toggle="lightbox" data-caption="This describes the image">
        <img src="https://unsplash.it/600.jpg?image=250" class="img-fluid">
      </a>
    </div>
    <div class="col-sm-3" data-code="example-2">
      <a href="https://unsplash.it/1200/768.jpg?image=250" data-toggle="lightbox" data-caption="This describes the image">
        <img src="https://unsplash.it/600.jpg?image=250" class="img-fluid">
      </a>
    </div>
  </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bs5-lightbox@1.8.3/dist/index.bundle.min.js"></script>