Twitter Bootstrap 4 : Lightbox

In this article, you will learn how to use Bootstrap Lightbox to display images. According to the readme, ekko-lightbox is:

A lightbox module for Bootstrap that supports images, YouTube videos, and galleries - built around Bootstrap's Modal plugin.

Install the ekko-lightbox library.

bower install ekko-lightbox --save

Add the javascript to display the lightbox when a user clicks on the thumbnail to the end of the body section:

<script type="text/javascript">
    $(document).on('click', '[data-toggle="lightbox"]', function(event) {
        event.preventDefault();
        $(this).ekkoLightbox();
    });
</script>

Add the data-toggle attribute to the image link to trigger the lightbox:

<a href="../me.jpg" data-toggle="lightbox">
  <img src="../me.jpg" class="img-fluid" align="left" width="80" height="45">
</a>

Add the lightbox javascript to the botom of the page before the end of the body tag:

<script src="../bower_components/bootstrap/ekko-lightbox/dist/ekko-lightbox.min.js"></script>

Add link to lightbox CSS within the head tag:

<link rel="stylesheet" href="../bower_components/ekko-lightbox/dist/ekko-lightbox.min.css" />

The entire file looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>RubyPlus</title>
    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bower_components/tether/dist/css/tether.min.css">
    <link rel="stylesheet" href="../bower_components/components-font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="../bower_components/ekko-lightbox/dist/ekko-lightbox.min.css" />
    <link rel="stylesheet" href="sticky_footer.css" >
</head>
<body>
  <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">RubyPlus</a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Products <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Screencasts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Podcasts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Articles</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Subscribe</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Login</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>

    <div class='container-fluid'>
      <div>
        <h3>#1 Integrate Twitter Bootstrap 4 with Rails 5</h3>
        <p>
          <a href="../me.jpg" data-toggle="lightbox">
            <img src="../me.jpg" class="img-fluid" align="left" width="80" height="45">
          </a>
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                       Curabitur leo dolor,
                       fringilla vel lacus at, auctor finibus ipsum. Lorem ipsum dolor
                       sit amet.
           </p>
           <h3>#2 Integrate Stripe with Rails 5</h3>
           <p>
             <img src="../me.jpg" align="left" width="80" height="45"/>
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                       Curabitur leo dolor,
                       fringilla vel lacus at, auctor finibus ipsum. Lorem ipsum
                       dolor sit amet.
             </p>
        </div>
    </div>

    <footer class="footer">
      <div class="container text-center">
        <span>
          &copy; 2013 - 2017 RubyPlus | 
          <a href="#">About</a> &middot; <a href="#">Contact</a> &middot; <a href="#">Jobs</a> 
        </span>

      </div>
    </footer>  

    <script src="../bower_components/jquery/dist/jquery.min.js"></script>
    <script src="../bower_components/tether/dist/js/tether.min.js"></script>
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../bower_components/ekko-lightbox/dist/ekko-lightbox.min.js"></script>

<script type="text/javascript">
    $(document).on('click', '[data-toggle="lightbox"]', function(event) {
        event.preventDefault();
        $(this).ekkoLightbox();
    });
</script>
</body>
</html>

You can now click on thumbnail image in the first row to display the bigger version of the image. It will look like the screenshot shown below.

Twitter Bootstrap 4

Read the documentation for ekko-lightbox to learn how to use it for image gallery, video gallery and more.


Related Articles


Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.