thumbnails are not properly shown in light box gallery

Question

thumbnails are not properly shown in light box gallery

776 views Asked by user3465377 At 18 September 2024 at 08:36

I have used light box 2 to create a gallery for my bootstrap 3 webpage. The thumbnails are not properly arranged. It is supposed to seen as a horizontal line but it shows in a vertical line. Besides this, lightbox works properly. Below is my code.

<body>
    <div class="container">
        <h3>Gallery</h3>        
        <div class="gallery">
            <div class="row">
                <div class "col-lg-3">  
                    <a href="img/1.jpg" data-title="caption" data-lightbox="school">
                        <img src="img/1.jpg" width="200px" class="img-thumbnail"/>
                    </a> 
                </div>
                <div class "col-lg-3">  
                    <a href="img/2.jpg" data-title="caption" data-lightbox="school">
                        <img src="img/2.jpg" width="200px" class="img-thumbnail"/>
                    </a> 
                </div>
                <div class "col-lg-9">  
                    <a href="img/3.jpg" data-title="caption" data-lightbox="school">
                        <img src="img/3.jpg" width="200px" class="img-thumbnail"/>
                    </a> 
                </div>
            </div>
            <div class="row">
                <div class "col-lg-3">  
                    <a href="img/1.jpg" data-title="caption" data-lightbox="school">
                        <img src="img/1.jpg" width="200px" class="img-thumbnail"/>
                    </a> 
                </div>
                <div class "col-lg-3">  
                    <a href="img/2.jpg" data-title="caption" data-lightbox="school">
                        <img src="img/2.jpg" width="200px" class="img-thumbnail"/>
                    </a> 
                </div>
                <div class "col-lg-3">  
                    <a href="img/3.jpg" data-title="caption" data-lightbox="school">
                        <img src="img/3.jpg" width="200px" class="img-thumbnail"/>
                    </a> 
                </div>
            </div>
        </div>
    </div>
    </div>
    <script src="js/bootstrap.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/lightbox.min.js"></script>
</body>

I am also attaching a screenshot of it:

the thumbnails are supposed to line up horizentlly

Original Q&A

There are 1 answers

**omikes** · Accepted Answer · 2015-06-20 23:49:04

It seems your link to bootstrap, or the copy of bootstrap you are using is not valid. Perhaps the gallery is disabling or overriding its styles somehow. In either case it will work if you replace

 class="col-lg-2" // or the equivalent

with

 style="width:33%; display:inline-block"  // with the equivalent width

EXAMPLE:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://stanford.edu/~nisham/bootstrap/js/bootstrap.js"></script>
<script src="http://xcounter.se/lightbox/js/lightbox.min.js"></script>
<body>
    <div class="container">
        
<h3>Gallery</h3>

        <div class="gallery">
            <div class="row">
                <div style="width:33%; display:inline-block"> <a href="http://www.theintentionallife.com/wp-content/uploads/2014/12/1.jpg" data-title="caption" data-lightbox="school">
                        <img src="http://www.theintentionallife.com/wp-content/uploads/2014/12/1.jpg" width="200px" class="img-thumbnail"/>
                        </a> 
                </div>
                <div style="width:33%; display:inline-block"> <a href="https://www.rome2rio.com/images/rome2rio-2.png" data-title="caption" data-lightbox="school">
                        <img src="https://www.rome2rio.com/images/rome2rio-2.png" width="200px" class="img-thumbnail"/>
                        </a> 
                </div>
                <div style="width:33%; display:inline-block"> <a href="http://static.wixstatic.com/media/6d5967_046bf0297b2343ed87cf116a298746c3.jpg" data-title="caption" data-lightbox="school">
                        <img src="http://static.wixstatic.com/media/6d5967_046bf0297b2343ed87cf116a298746c3.jpg" width="200px" class="img-thumbnail"/>
                        </a> 
                </div>
            </div>
            <div class="row">
                <div style="width:33%; display:inline-block"> <a href="http://www.theintentionallife.com/wp-content/uploads/2014/12/1.jpg" data-title="caption" data-lightbox="school">
                        <img src="http://www.theintentionallife.com/wp-content/uploads/2014/12/1.jpg" width="200px" class="img-thumbnail"/>
                        </a> 
                </div>
                <div style="width:33%; display:inline-block"> <a href="https://www.rome2rio.com/images/rome2rio-2.png" data-title="caption" data-lightbox="school">
                        <img src="https://www.rome2rio.com/images/rome2rio-2.png" width="200px" class="img-thumbnail"/>
                        </a> 
                </div>
                <div style="width:33%; display:inline-block"> <a href="http://static.wixstatic.com/media/6d5967_046bf0297b2343ed87cf116a298746c3.jpg" data-title="caption" data-lightbox="school">
                        <img src="http://static.wixstatic.com/media/6d5967_046bf0297b2343ed87cf116a298746c3.jpg" width="200px" class="img-thumbnail"/>
                        </a> 
                </div>
            </div>
        </div>
    </div>
</body>

</html>

TechQA.

thumbnails are not properly shown in light box gallery

There are 1 answers

Related Questions in JQUERY

Related Questions in TWITTER-BOOTSTRAP

Related Questions in THUMBNAILS

Related Questions in LIGHTBOX

Popular Questions

Popular Tags

Trending Questions