Light box wont work


Topic: Light box wont work

burakr9 asked 3 months ago

I am trying to create a lightbox gallery but when I click an image lightbox did not open and send me image url. How can I solve this.

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/mdb.min.css">
   <!--Section: gallery-->
  <section id="gallery" class="text-center py-5">

      <!-- Container -->
      <div class="container">

          <!-- Section heading -->
          <h2 class="h1-responsive font-weight-bold mb-5">Our best projects</h2>
          <!-- Section description -->
          <p class="grey-text w-responsive mx-auto mb-5">Duis aute irure dolor in reprehenderit in
              voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
              cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p>

          <div class="row">
              <div class="col-md-12">

                  <div id="mdb-lightbox-ui2"></div>

                  <div class="mdb-lightbox">

                      <figure class="col-md-4">
                          <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg"
                              data-size="1600x1067">
                              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(145).jpg"
                                  class="img-fluid">
                          </a>
                      </figure>

                      <figure class="col-md-4">
                          <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).jpg"
                              data-size="1600x1067">
                              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(150).jpg"
                                  class="img-fluid" />
                          </a>
                      </figure>

                      <figure class="col-md-4">
                          <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).jpg"
                              data-size="1600x1067">
                              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(152).jpg"
                                  class="img-fluid" />
                          </a>
                      </figure>

                      <figure class="col-md-4">
                          <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).jpg" data-size="1600x1067">
                              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).jpg"
                                  class="img-fluid" />
                          </a>
                      </figure>

                      <figure class="col-md-4">
                          <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).jpg"
                              data-size="1600x1067">
                              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(151).jpg"
                                  class="img-fluid" />
                          </a>
                      </figure>

                      <figure class="col-md-4">
                          <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).jpg" data-size="1600x1067">
                              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(40).jpg"
                                  class="img-fluid" />
                          </a>
                      </figure>

                      <figure class="col-md-4">
                          <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).jpg"
                              data-size="1600x1067">
                              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(148).jpg"
                                  class="img-fluid" />
                          </a>
                      </figure>

                      <figure class="col-md-4">
                          <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).jpg"
                              data-size="1600x1067">
                              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg"
                                  class="img-fluid" />
                          </a>
                      </figure>

                      <figure class="col-md-4">
                          <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).jpg"
                              data-size="1600x1067">
                              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(149).jpg"
                                  class="img-fluid" />
                          </a>
                      </figure>

                  </div>

              </div>
          </div>

      </div>
      <!-- Container -->

  </section>
  <!--Section: gallery-->

$('body').scrollspy({
  target: '.dotted-scrollspy'
});

// initialize lightbox
$(function () {
  $("#mdb-lightbox-ui2").load("../mdb-addons/mdb-lightbox-ui.html");
});

$('.navbar-collapse a').click(function(){
        $(".navbar-collapse").collapse('hide');
    });

/* WOW.js init */
new WOW().init();


Marcin Luczak staff answered 3 months ago

Hi,

In Lightbox initialization function you've loaded wrong directory, use .load("mdb-addons/mdb-lightbox-ui.html") instead of .load("../mdb-addons/mdb-lightbox-ui.html"). Please see my snippet with working Lightbox:

https://mdbootstrap.com/snippets/jquery/marcin-luczak/2820791

Please also note that Lightbox is a pro component and it won't work without MDB Pro package on your local machine.

Regards, Marcin


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.19.2
  • Device: Laptop
  • Browser: Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No