Customizing Bootstrap's jQuery carousel plugin

MyPhoto uses Bootstrap’s carousel as a gallery to display sample images. The carousel is a very neat component, allowing the user to cycle through images. We will add some new functionality to the carousel plugin. Specifically, we will implement the ability to surface an image in a modal window when there is a click event on a carousel slide. We will be using Bootstrap’s modal plugin to surface the modal, and we will dynamically pass the image source and carousel caption from the markup of the slide to the modal. A practical application of this might be the need to surface a larger version of the image, or to display additional metadata or controls that would not normally fit on the carousel slide.

We will begin customizing the carousel plugin by first writing the markup for it.

1. The markup

The only thing we really need to do in the markup is create a modal element and reference that modal in the carousel’s slide elements so as to link them together. First, let’s create the modal. We only want a bare-bones modal here—an image, a close button, and a title. We have already seen how to create modals before, so let’s just add the markup we need to our HTML. We will add it just above the carousel element:

<button type=”button” class=”close” data-dismiss =”modal”

aria-label=”Close”><span aria-hidden=

“true”>×</span></button>

</div>

<img>

</div>

We have created a very simple modal here. We added a carousel-modal class to the parent element for any styles we may need to apply, and we attributed carousel-modal as the id for the modal. We have an empty modal-title element, which we will populate dynamically. Most interestingly, we have an empty img tag in the modal-body element. It isn’t often that you see an img tag with no src attribute, but our extension will create this attribute dynamically. We could, of course, have created a different modal for each image, but that wouldn’t scale, and it just wouldn’t be interesting!

That’s our simple modal window declared. Great. Now we just need to reference the modal in our slides. On each img element within the carousel, simply add a data-modal- picture attribute with the #carousel-modal value. Observe the following code:

<img class=”d-block img-fluid” src=”images/brazil.png”

data-modal-picture=”#carousel-modal”>

Brazil

</div>

<img class=”d-block img-fluid” src=”images/datsun.png”

data-modal-picture=”#carousel-modal”>

Datsun 260Z </div>

</div>

<img class=”d-block img-fluid” src=”images/skydive.png”

data-modal-picture=”#carousel-modal”>

Skydive

</div>

The data-modal-picture attribute is the data-attribute we will hook our on-click listener to in the very same way that alert hooked into data-dismiss. Let’s set up our carousel plugin extension and wire all this together.

2. Extending carousel’s functionality with JavaScript

Just like with our alert extension, we will create a new JS file for the carousel extension. Create a js/carousel.js file and include the file on the MyPhoto page:

Again, we want to create an IIFE and assign the carousel constructor to a variable we can work with. Observe the following code:

+function ($) {

‘use strict’;

var Carousel = $.fn.carousel.Constructor;

}(jQuery);

From our markup, we know what data-attribute we want to listen to—data-modal- picture. Observe the following code:

+function ($) {

‘use strict’;

var Carousel = $.fn.carousel.Constructor;

$(document).on(‘click.bs.carousel.data-api’,

‘[data-modal- picture]’, Carousel.prototype.zoom)

}(jQuery);

Note that, unlike with alert.js, we are not referencing any particular value for the data- modal-picture attribute. We will be using the attribute value to identify which modal to use, so of course we want the plugin to be flexible enough to handle more than one modal ID. We have also defined which function we want to call when the event is triggered—Carousel.protoype.zoom. Let’s create that function:

Carousel.prototype.zoom = function () {

var $this = $(this) var $src = $this.attr(‘src’)

var $title = $this.next(‘.carousel-caption’).text()

var $modal = $this.attr(‘data-modal-picture’)

var $modalElement = $.find($modal)

$($modalElement).find(‘.modal-body’).find(‘img’).attr(‘src’,

$src)

$($modalElement).find(‘.modal-title’).text($title)

$($modal).modal(‘show’)

}

First, as we did earlier, we create a jQuery wrapper of the element that triggers the event. Next, we use the attr method to find the value of the element’s src attribute. We then use the next method to find the next carousel-caption element and assign the inner text of that element to $title. We need these to dynamically update the blank modal.

Next, we grab the value of the data-modal-picture element, which we then use as a reference to find the modal we want to use to render our picture. We use the find method to first find the modal-body of this element and then the nested image element. We then create an src attribute on this element, passing in a reference to the source of the slide’s image element. Similarly, we inject the caption of the slide into the modal’s title element.

Finally, we use the modal API to show the modal. Take a look at the screenshot in figure 6.6:

Figure 6.6: Our modal showing a clicked slide image (example03.html); note the CSS bug due to which the image is overflowing the modal

The modal is now surfacing. The dynamic title is working well, too. The dynamic image is getting applied and loaded. That’s perfect, except that the entire thing looks terrible. However, it’s nothing a bit of CSS can’t fix.

3. Extending carousel’s style sheets

Thanks to our forward-thinking, we already have the carousel-modal class applied to the modal parent element. We just need to set some rules.

As this modal is directly related to our carousel plugin extension, we will create a CSS file explicitly for handling styling born out of our extension. Create styles/carousel.css and include the file in our page:

awesome/css/font-awesome.min.css” />

There are two things wrong that we need to address. First, the modal is too narrow. We want it to be somewhat larger. To achieve this, we need to apply the modal-lg class to the modal dialog:

…

</div>

Figure 6.7: Our modal showing an enlarged version of a slide image with applied changes (example03.html); note how the image is still overflowing the modal

Now, we just need to ensure that the image doesn’t breach the borders of the modal. The fix here is simple. We will just give any img element that is a descendant of a carousel- modal element a width of 100% so that it will only take up the width explicitly available to it. Observe the following code:

.carousel-modal img {

width: 100%;

}

Take a look at the screenshot in figure 6.8:

Figure 6.8: Our modal showing an enlarged version of a slide image, with the image fitting the modal (example03.html)

This is much better. Our customization is complete. We have surfaced a modal on a click event from the carousel, passed data from the carousel component into the modal component, and rendered the image successfully. Very neat.

Now that we have successfully customized two of Bootstrap’s jQuery plugins, let’s build a plugin from scratch.

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.

Bootstrap

Customizing Bootstrap’s jQuery carousel plugin

1. The markup

2. Extending carousel’s functionality with JavaScript

3. Extending carousel’s style sheets

Leave a Reply Cancel reply

1. The markup

2. Extending carousel’s functionality with JavaScript

3. Extending carousel’s style sheets

Leave a Reply Cancel reply

Login