loading...

Bootstrap 4 – Displaying images using Bootstrap Lightbox

One important feature missing from our Events section is the ability to include images that illustrate an event (or provide additional information). Of course, you can add images using the img tag, but that may not be very practical, as the image size will be limited by the container’s dimensions.

In this section, we will demonstrate how we can overcome this limitation by allowing users to enlarge images as they click on them, without redirecting them away from our page. To this end, go ahead and embed one image with each event (take a look at figure 5.8). Each image should be aligned to the left of the event description and should have a width of 80 and a height of 45:

    <div > 
        <h3>My Sample Event #1</h3> 
        <p> 
            <img src="images/event1.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,
            consectetur adipiscing elit. Morbi quis arcu lorem. Vivamus
            elementum convallis
            enim sagittis tincidunt. Nunc feugiat mollis risus non 
            dictum.
            Nam commodo nec
            sapien a vestibulum. Duis et tellus cursus, laoreet ante 
            non,
            mollis sem.
            Nullam vulputate justo nisi, sit amet bibendum ligula 
            varius
            id.
        </p> 
        <h3>My Sample Event #2</h3> 
        <p> 
            <img src="images/event2.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,
            consectetur adipiscing elit. Morbi quis arcu lorem. Vivamus
            elementum convallis
            enim sagittis tincidunt. Nunc feugiat mollis risus non 
            dictum.
            Nam commodo nec
            sapien a vestibulum. Duis et tellus cursus, laoreet ante 
            non,
            mollis sem.
            Nullam vulputate justo nisi, sit amet bibendum ligula 
            varius
            id.
        </p>
    </div>

As you save the preceding markup and refresh the page, you will note that the images are not very nicely aligned with the text. They appear somewhat squashed. We can improve their appearance by adding some spacing between the images, the text, and the top of the container. To do this, go ahead and add a top margin of 0.5em and a right margin of 1em to each image within our services-events-content container:

    #services-events-content div img { 
        margin-top: 0.5em; 
        margin-right: 1em; 
    }

In addition, we also update the #services-event-content rule to reduce the width of the content area in order to space everything out a bit:

#services-events-content { 
     height: 15em;
     overflow-y: scroll;
     width: 95%;
}
Figure 5.8: Sample images accompanying each event description; the images are left-aligned and have a dimension of 80 x 45 (example04.html)

One popular third-party library that allows users to enlarge the images embedded within the event description is “Lightbox for Bootstrap”, available via GitHub at https://github.com/jbutz/bootstrap-lightbox. Go ahead and install the plugin using NPM:

npm install ekko-lightbox

Next, include it in our HTML document:

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

Using the plugin to display our images within a lightbox fortunately requires hardly any modification to our existing markup. The only two steps to undertake are as follows:

  1. Place the img elements within an anchor (a) tag that points to the image that has a data-toggle="lightbox attribute.
  2. Add the following JavaScript code below the footer of our page:
$(document).on('click', '[data-toggle="lightbox"]', 
    function (event) { 
        event.preventDefault();
        $(this).ekkoLightbox();
    }
);
<a href="images/event3.jpg" data-toggle="lightbox">
    <img 
        src="images/event3.jpg"
        align="left"
        width="80"
        height="45"
        
        data-target="images/event3.jpg"/>
</a>

Note that the data-toggle attribute is used to identify the element that serves as the lightbox toggle:

Figure 5.9: An enlarged image displayed using Lightbox for Bootstrap (example04.html)

To summarize, our Events section should now look as follows:

   <div class="container">
   <div class="row">
      <div id="services-events-content">
         <div id="page-1">
            <h3>My Sample Event #1</h3>
            <p>
               <a href="images/event1.jpg" data-
                  toggle="lightbox">
               <img src="images/event1.jpg" align="left" 
                  width="80" height="45"
                  class="img-fluid" data-
                  target="images/event1.jpg"/>
               </a>
               Lorem ipsum dolor sit amet, consectetur 
               adipiscing elit. Curabitur leo
               dolor,fringilla vel lacus at, auctor finibus 
               ipsum. Lorem ipsum dolor sit amet,
               consectetur adipiscing elit. Morbi quis arcu 
               lorem. Vivamus elementum convallis
               enim sagittis tincidunt. Nunc feugiat mollis 
               risus non dictum. Nam commodo nec
               sapien a vestibulum. Duis et tellus cursus, 
               laoreet ante non, mollis sem.
               Nullam vulputate justo nisi, sit amet bibendum 
               ligula varius id.
            </p>
            <h3>My Sample Event #2</h3>
            <p>
               <a href="images/event2.jpg" data-
                  toggle="lightbox">
               <img src="images/event2.jpg" align="left" 
                  width="80" height="45"
                  class="img-fluid" data-
                  target="images/event2.jpg"/>
               </a>
               Lorem ipsum dolor sit amet, consectetur 
               adipiscing elit. Curabitur leo dolor,
               fringilla vel lacus at, auctor finibus ipsum. 
               Lorem ipsum dolor sit amet,
               consectetur adipiscing elit. Morbi quis arcu 
               lorem. Vivamus elementum convallis
               enim sagittis tincidunt. Nunc feugiat mollis 
               risus non dictum. Nam commodo nec
               sapien a vestibulum. Duis et tellus cursus, 
               laoreet ante non, mollis sem.
               Nullam vulputate justo nisi, sit amet bibendum 
               ligula varius id.
            </p>
         </div>
         <div id="page-2">
            <h3>My Sample Event #3</h3>
            <p>
               <a href="images/event3.jpg" data-
                  toggle="lightbox">
               <img src="images/event3.jpg" align="left" 
                  width="80" height="45"
                   data-
                  target="images/event3.jpg"/>
               </a>
               Lorem ipsum dolor sit amet, consectetur 
               adipiscing elit. Curabitur leo dolor,
               fringilla vel lacus at, auctor finibus ipsum. 
               Lorem ipsum dolor sit amet,
               consectetur adipiscing elit. Morbi quis arcu 
               lorem. Vivamus elementum convallis
               enim sagittis tincidunt. Nunc feugiat mollis 
               risus non dictum. Nam commodo nec
               sapien a vestibulum. Duis et tellus cursus, 
               laoreet ante non, mollis sem.
               Nullam vulputate justo nisi, sit amet bibendum 
               ligula varius id.
            </p>
         </div>
      </div>
      <div ></div>
   </div>
</div>

Comments are closed.

loading...