Topic: Light box wont work

burakr9 free asked 1 year 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 1 year 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.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

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