bootstrap lightbox not showing image

Question

I am trying to implement lightbox for the gallery page in the working site.I followed the steps exactly as demonstrated the bootstrap lightbox page demo http://www.jasonbutz.info/bootstrap-lightbox/#usage and also youtube video https://www.youtube.com/watch?v=J-EZC46hOc8 However my lightbox is not working. 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 files included in head section. The code in body section is as:

<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 error as: Uncaught TypeError: this.hideWithTransition is not a function Plz help where is wrong with the code.

did you find any solution so far? – Shubham Bhave Aug 12 '15 at 08:59 — Shubham Bhave, Aug 12 '15 at 08:59

score 0 · Accepted Answer · answered Aug 29 '15 at 15:26

0

Try removing class "hide" from:

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

it works for me.

answered Aug 29 '15 at 15:26

Danko

1,819
1
13
12

The plugin is no longer maintained. Will not work with Bootstrap 3 - even when you redefine the hide class as suggested in the repo itself. – dwilbank Dec 12 '15 at 18:17

score 0 · Answer 2 · answered Aug 13 '16 at 20:06

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>

bootstrap lightbox not showing image

2 Answers2