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 id=”page-1″>
<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:
- Place the img elements within an anchor (a) tag that points to the image that has a data-toggle=”lightbox attribute.
- 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″
class=”img-fluid”
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″ class=”img-fluid” 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 id=”services-events-pagination”></div>
</div>
</div>
Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.