One important feature missing from our Events section is the ability to include images that illustrate an event (or provide additional information). Sure, 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 (see Figure 5.8). Each image should be aligned to the left of the event description, 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 notice 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; }
Take a look at the following screenshot:
One popular third-party library that allows users to enlarge the images embedded within the event description is Bootstrap Lightbox, available via GitHub at https://github.com/jbutz/bootstrap-lightbox. Unfortunately, the plugin is no longer maintained and ships with several unfixed bugs and usability issues. Upon downloading it, you will find that it does not immediately work out of the box. Luckily, DJ Interactive ( http://djinteractive.co.uk) extended the original Bootstrap Lightbox through Lightbox for Bootstrap. Also available via GitHub ( https://github.com/djinteractive/Lightbox-for-Bootstrap), the plugin is published under the Creative Commons Attribution 2.5 license. This means that the plugin is free for use under the condition that the author of the plugin is properly attributed.
Go ahead and download Lightbox for Bootstrap, and include both its JavaScript and CSS files within the
head
of our HTML document:
<script src="bower_components/lightbox-for-bootstrap /js/bootstrap.lightbox.js"></script> <link rel="stylesheet" href="bower_components/bootstrap-lightbox /css/bootstrap.lightbox.css" />
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:
img
element inside a container element that has a thumbnail
class and data-toggle
attribute.thumbnail
class and data-target
attribute to our img
element:<p> <span class="thumbnails" data-toggle="lightbox"> <img src="images/event1.jpg" align="left" width="80" height="45" class="thumbnail" data-target="images/event1.jpg"/> </span> 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>
The
data-target
attribute tells Lightbox for Bootstrap where our larger image is located. It is important to note that the src
attribute of our image element has no effect on the image that will be displayed within the lightbox; only the data-target
attribute determines this. As such, we could display a thumbnail, which then actually links to a different lightbox image (although this would make little sense and be grossly misleading). Unsurprisingly, the data-toggle
attribute is used to identify the element that serves as the lightbox toggle, in our case, the toggle is our 80 x 45 image. However, it is important to note that toggles do not need to be image elements. Any element can become a lightbox toggle.
Last but not least, the thumbnails
class serves as selectors for the lightbox
plugin. Without them, the desired functionality would not work. Take a look at the following screenshot:
To summarize, our Events section should now look as follows:
<div class="container"> <div class="row" style="margin: 1em;"> <div id="services-events-content"> <div id="page-1"> <h3>My Sample Event #1</h3> <p> <span class="thumbnails" data-toggle="lightbox"> <img src="images/event1.jpg" align="left" width="80" height="45" class="thumbnail" data-target="images/event1.jpg"/> </span> Lorem ipsum... </p> <h3>My Sample Event #2</h3> <p> <span class="thumbnails" data-toggle="lightbox"> <img src="images/event2.jpg" align="left" width="80" height="45" class="thumbnail" data-target="images/event2.jpg"/> </span> Lorem ipsum... </p> </div> <div id="page-2"> <h3>My Sample Event #3</h3> <p> <span class="thumbnails" data-toggle="lightbox"> <img src="images/event3.jpg" align="left" width="80" height="45" class="thumbnail" data-target="images/event3.jpg"/> </span> Lorem ipsum... </p> </div> </div> <div id="services-events-pagination"></div> </div> </div>