Bootstrap lightbox does not show image

I am trying to implement a lightbox for a gallery page on a production site. I followed the steps, just like the demo page of the Photoshop boot page http://www.jasonbutz.info/bootstrap-lightbox/#usage , as well as youtube video https://www.youtube.com/watch?v= J-EZC46hOc8 However, my lightbox does not work. Plz help me. My code is as follows:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"> <link href="bootstrap-lightbox.css" rel="stylesheet"> <script src="bootstrap-lightbox.js"></script> 

These are the files in the chapter section. The code in the body section is as follows:

 <div class="row"> <div class="container"> <div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true"> <div class='lightbox-content'> <img src="img-3.png"> <div class="lightbox-caption"><p>Your caption here</p></div> </div> </div> <div class="col-lg-3"> <a data-toggle="lightbox" href="#demoLightbox" class="thumbnail">Open Lightbox <img src="img-3.png"> </a> </div> </div> </div> 

I get an error like: Uncaught TypeError: this.hideWithTransition is not a Plz function help, where is wrong with the code.

+6
source share
2 answers

Try to remove the "hide" class from:

 <div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true"> 

he works for me.

0
source

problem fixed, check my code CODEPEN

 <a data-toggle="lightbox" href="#demoLightbox" ><img class="thumbnail" src="http://www.jasonbutz.info/bootstrap-lightbox/assets/img/small.png"></a> <div id="demoLightbox" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true"> <div class='lightbox-content'> <img src="http://www.jasonbutz.info/bootstrap-lightbox/assets/img/large.png" alt="" /> <div class="lightbox-caption"><p>Your caption here</p></div> </div> </div> </div> 
0
source

Source: https://habr.com/ru/post/985330/


All Articles