How to Implement Lightbox on Bootstrap 4

This is a simple tutorial on how to implement Lightbox in your project.

Lightbox is a simple JavaScript library that displays images or videos on the same page of a browser by filling part of the screen and dimming out the rest of the web page.

It is very helpful because it opens the image on your current web page instead of taking you to the link of the image.

How to Implement.

• First, we set up our index.html file. And Add all the bootstrap link, as seen here or you can clone this bootstrap starter pack.
  $ git clone https://github.com/Rhotimee/bootstrap4-beta-starter-pack.git

• Then we add the links to our images to the body of our HTML file. An example is shown below.

                    <a href="http://lrempixel.com/560/560/sports/2" 
                    data-toggle="lightbox" data-gallery="img-gallery">
                    <img src="http://lrempixel.com/400/400/sports/2" 
                    class="img-fluid">    
                    </a>

Make sure You specify that data-toggle = "lightbox"

• Then, we to add lightbox ekko CSS & js cdn link to our index.html

Css

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" />

Js

 <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>

• Create a Js file in your project, Link it to your Index.html then add the following code as seen below in the js file.

$(document).on('click', '[data-toggle="lightbox"]', function(event){
    event.preventDefault();
    $(this).ekkoLightbox();
});

• Save. And reload your browser.

See Screenshot of the Browser:

See full code in my Github Repo.
GITHUB: https://github.com/Rhotimee/lightbox-for-bootstrap

If you have any question or issue, I would be glad to help.

Enjoy!

---

Posted on Utopian.io - Rewarding Open Source Contributors

---