Modal & Lightbox

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.


<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.

Option Description
activity

Boolean: Display the loading spinner when images are loading.

button

Boolean: Display the close button.

caption

Boolean: Choose to display the content of the images alt tag as a caption.

navigation

Boolean: Show the navigation pips at the bottom of a gallery slider.

overlay

Boolean: Display an overlay as a background to the expanded image, if set to false the image will just overlay the page contents.

preloadNext

Boolean: Silently preload the next image.

enableKeyboard

Boolean: Allow users to navigate through gallery images using the arrow keys, also allows the user to close the lightbox using the esc key.

quitOnImgClick

Boolean: Quits the lightbox if the actual expanded image is clicked on, enabled by default in the data-lightbox="lightbox"