LightBox gallery


MDB Pro required

This lesson requires MDB Pro package. If you use MDB Free please be aware that some elements may not work as expected.

Get MDB PRO

Step 1 - LightBox

Go to the LightBox Docs and copy the code for Gallery with margins.

Next, place it inside <!--Section: gallery-->, below the description.



        <!--Section: gallery-->
        <section id="gallery" class="text-center py-5">

            <!-- Container -->
            <div class="container">

                <!-- Section heading -->
                <h2 class="h1-responsive font-weight-bold mb-5">Our best projects</h2>
                <!-- Section description -->
                <p class="grey-text w-responsive mx-auto mb-5">Duis aute irure dolor in reprehenderit in
                    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p>

                <div class="row">
                    <div class="col-md-12">

                        <div id="mdb-lightbox-ui"></div>

                        <div class="mdb-lightbox">

                            <figure class="col-md-4">
                                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg"
                                    data-size="1600x1067">
                                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(145).jpg"
                                        class="img-fluid">
                                </a>
                            </figure>

                            <figure class="col-md-4">
                                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).jpg"
                                    data-size="1600x1067">
                                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(150).jpg"
                                        class="img-fluid" />
                                </a>
                            </figure>

                            <figure class="col-md-4">
                                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).jpg"
                                    data-size="1600x1067">
                                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(152).jpg"
                                        class="img-fluid" />
                                </a>
                            </figure>

                            <figure class="col-md-4">
                                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).jpg" data-size="1600x1067">
                                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).jpg"
                                        class="img-fluid" />
                                </a>
                            </figure>

                            <figure class="col-md-4">
                                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).jpg"
                                    data-size="1600x1067">
                                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(151).jpg"
                                        class="img-fluid" />
                                </a>
                            </figure>

                            <figure class="col-md-4">
                                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).jpg" data-size="1600x1067">
                                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(40).jpg"
                                        class="img-fluid" />
                                </a>
                            </figure>

                            <figure class="col-md-4">
                                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).jpg"
                                    data-size="1600x1067">
                                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(148).jpg"
                                        class="img-fluid" />
                                </a>
                            </figure>

                            <figure class="col-md-4">
                                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).jpg"
                                    data-size="1600x1067">
                                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg"
                                        class="img-fluid" />
                                </a>
                            </figure>

                            <figure class="col-md-4">
                                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).jpg"
                                    data-size="1600x1067">
                                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(149).jpg"
                                        class="img-fluid" />
                                </a>
                            </figure>

                        </div>

                    </div>
                </div>

            </div>
            <!-- Container -->

        </section>
        <!--Section: gallery-->

    

To make LightBox work, we have to initialize it first.

Below the scripts place this JavaScript function to initialize the LightBox.



        // MDB Lightbox Init
        $(function () {
        $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
        });

    

Save the file and click on any picture of the LightBox - it works!

Let's have a closer look at the LightBox.



        <figure class="col-md-4">
            <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg"
                data-size="1600x1067">
                <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(145).jpg"
                    class="img-fluid">
            </a>
        </figure>

    

As you can see for each picture we use an image in two different sizes:

  • Big, high-quality image

  • Small image as a thumbnail

We do it for performance sake. When the website is loaded we display to the user only thumbnails because if we wanted to render all the big, high-quality pictures it could kill the browser.

But when the user clicks on the particular image - we will render this in its best quality.

Step 2 - shadows

To make the LighBox looks even better, we will add a shadow to the images.

Add .z-depth-1-half class to each thumbnail.



        <figure class="col-md-4">
            <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg"
                data-size="1600x1067">
                <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(145).jpg"
                    class="img-fluid z-depth-1-half">
            </a>
        </figure>

    

To learn more about available options of the LightBox read our LightBox Docs.


Rate this lesson

Previous lesson Live preview Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits