Modals & Lightbox

Modals come in 2 forms in Ensemble, there is a simple modal window that can be set to appear after a certain time has elapsed after load, or on button click, this is useful for things like sign in forms, subscribe hints, or for information you want to put front and center. The second lightbox is more feature rich and is for displaying images and video, it has the ability to set up slideshows, and alter the transitions between slides using the Ensemble animation framework.

On-click modal

By adding the modal-toggle class to the modal class, you can have a modal window appear on click of an element, the element can be anything you like as long as it has the class modal-open.

Test modal window

<div class="modal modal-toggle">
	<span class="modal-close"></span>
	<div class="modal-content">
		<h4>A Modal heading</h4>
		<p>
			Some modal content
		</p>
	</div>
</div>

<a href="#" class="modal-open">OPEN MODAL</a>

Timed modal

By the time you have made your way to read this section, the timed modal should have appeared. By adding the modal-timed-open class to the modal class, you can make a modal appear ater a certain time has elapsed after page load, the example is set to appear after 8 seconds. You can adjust the opening time by going to scripts.js and going to the Modal window section, there you can adjust the timing of the window, its set to 8 seconds by default (8000ms).

<div class="modal modal-timed-open">
	<span class="modal-close"></span>
	<div class="modal-content">
		<p>
			Modal content here
		</p>
	</div>
</div>

Here you can adjust the timing of the modal window, remember to use this feature cautiously, although it can be a good way of showing a user important information, over use is likely to annoy.

$('.modal').ensembleModal({
	delay: '8000',
	clickOverlayClosing: 'false'
});

Click overlay to close

In the javascript options it is possible to set the modal window to close by clicking anywhere on the outer area of the modal, simply change clickOverlayClosing: from false to true.

	clickOverlayClosing: 'false'

Single image lightbox

The Ensemble lightbox, is similar in operation to the simple modal, but with the addition of the ability to create slideshows of lightbox enabled images. The lightbox animations are fully customisable using the Ensemble animation framework.

To create a single image light box simply wrap your thumbnail image in an anchor tag with a data attribute of lightbox which links to the larger image you wish to display. The images Alt attribute can be displayed as a caption.

<a data-lightbox="lightbox" href="lightbox-image__large.jpg" data-caption='Caption text'>
	<img src="lightbox-image__thumbnail.jpg" alt="A modal image">
</a>

Multi image lightbox

By adding the data attribute gallery to images in a series you can give a user the option to slide through all images with that data attribute like a slideshow.

The markup for the gallery version of Ensemble lightbox is practically identical except data-lightbox="lightbox" is swapped out for data-lightbox="gallery"

<a data-lightbox="gallery" href="lightbox-image__large.jpg"  data-caption='Caption One'>
	<img src="lightbox-image__thumbnail.jpg" alt="This is The first image">
</a>

<a data-lightbox="gallery" href="lightbox-image__large.jpg"  data-caption='Caption Two'>
	<img src="lightbox-image__thumbnail.jpg" alt="This is The second image">
</a>

<a data-lightbox="gallery" href="lightbox-image__large.jpg"  data-caption='Caption Three'>
	<img src="lightbox-image__thumbnail.jpg" alt="This is The third image">
</a>

Javascript options

With the Ensemble lightbox you can make a series of customisations in the plugins Javascript file located in the js directory. In the js directory you will see your scripts.js file, in the section lightbox you can set your options.

$('a[data-lightbox="lightbox"]').ensembleLightbox({
	activity: true,
	button: true,
	caption: true,
	overlay: true,
	quitOnImgClick: true,
	selector: 'a[data-lightbox="lightbox"]'
});

$('a[data-lightbox="gallery"]').ensembleLightbox({
	activity: true,
	button: true,
	caption: true,
	navigation: false,
	overlay: true,
	arrows: true,
	selector: 'a[data-lightbox="gallery"]'
});

Options & descriptions

Opposite you will find a list of the available options and what they do.