CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Matt Hall
Matt Hall

Reputation: 2412

Bootstrap Lightbox Not Working

Hello I've been trying to implement Jason Butz's Lightbox plugin for Twitter Bootstrap (I'm using version 3 of Bootstrap).

So far I've had limited success with triggering the lightbox from a thumbnail image to a larger one.

Here's someone else's example where it's working:

http://jsfiddle.net/gmeyer/WwMFD/

Here's mine where it is not (all js and css in below fiddle is unchanged from the lightbox files):

http://jsfiddle.net/qwwpetvu/

...and my code:

<div class="container">
    <div class="item">
        <a data-toggle="lightbox" href="#lightbox0">
            <img class="gallery" src='https://farm8.staticflickr.com/7275/7535360724_02f36c5af4_n.jpg'>
        </a>
    </div>
</div>

<div id="#lightbox0" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="lightbox-dialog">
        <div class="lightbox-header">
            <button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">&times;</button>
        </div>
    <div class="lightbox-content">
        <img src='https://farm8.staticflickr.com/7275/7535360724_02f36c5af4_b.jpg'>
        <div class="lightbox-caption"><p>Your caption here</p></div>
    </div>
</div>

I've been comparing my code to the example, I can't figure out what the issue is.

Upvotes: 0

Views: 3451

Answers (1)

agriboz
agriboz

Reputation: 4854

Small issues shown below

 <div id="lightbox0" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
//Removed hide class and corrected the selector id.
 <div id="#lightbox0" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">

Fiddle

Upvotes: 2

Related Questions