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:

Figure 5.8: Sample images accompanying each event description. The images are left-aligned and have a dimension of 80 x 45.

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:

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:

Figure 5.9: An enlarged image displayed using Lightbox for Bootstrap.

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>