Can't get bootstrap-lightbox working....!

Question

I'm sure that there's an easy solution to my problem, but for the life of me I can't work out what I'm doing wrong.

I'm trying to get bootstrap-lightbox working in my site (which is a Django app, if that makes any difference).

I have the following in my header:

<script type="text/javascript" src="/static/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/static/js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="static/dash/bootstrap-lightbox.js"></script>
<script src="static/dash/excanvas.min.js"></script>
<script src="static/dash/bootstrap.min.js"></script>
<script src="static/dash/jquery.flot.min.js"></script>
<script src="static/dash/jquery.gritter.min.js"></script>
<script src="static/dash/jquery.flot.resize.min.js"></script>
<script src="static/dash/jquery.peity.min.js"></script>
<script src="static/dash/fullcalendar.min.js"></script>
<script src="static/dash/unicorn.dashboard.js"></script>
<script src="static/dash/unicorn.js"></script>
<script src="static/dash/custom.js"></script>
<link rel="stylesheet" href="static/dash/bootstrap.min.css" />
<link rel="stylesheet" href="static/dash/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="static/dash/fullcalendar.css" />   
<link rel="stylesheet" href="static/dash/unicorn.main.css" />
<link rel="stylesheet" href="static/dash/jquery.gritter.css" />
<link rel="stylesheet" href="static/dash/unicorn.grey.css" class="skin-color" />
<link rel="stylesheet" href="static/dash/bootstrap-lightbox.css" />

And in my HTML:

<a data-toggle="lightbox" href="#worldlightbox" class="thumbnail"><img src="/static/img/pics/bg/thumbs/WorldThumb.jpg" alt=""></a>

<div class="lightbox" id="worldlightbox" style="display: none;">
<div class='lightbox-content'>
    <img src="/static/img/pics/bg/World.jpg">
</div>

When I click the link image, nothing happens at all. There are no errors in the console and the scripts are loading correctly.....

I'm pretty sure there's some conflict somewhere as none of the lightbox plugins I've tried have worked.

If someone can show where I'm going wrong, I'd be really grateful!!

Answer 1

I am sorry this is so late, but I just had the problem myself. The simple answer for your problem is that the lightbox is just not working the way it should be. And the help is scant and incomplete. I don't know how the developer ever got their example to work. But I got mine to work, and it should work for you too:

    <ul class="thumbnails" style=" position:relative; top: 110px; display:block;">
      <li class="span2">
        <a data-toggle="lightbox" href="#carouselLightBox" class="thumbnail">Open Lightbox</a>        
      </li>
    </ul>
    <div class="lightbox fade" id="carouselLightBox" style="display: none;">
        <div class='lightbox-content'>
            <img src="/content/images/mapicons/cad.png" alt="" />
        </div>
    </div>

For whatever reason, putting your 'a' tag inside the 'ul' with the class name thumbnails, then naming your 'a' tag class thumbnail makes it work. Hopefully Django will take the time to fix this issue soon...