Multiple overlays on a same page

Overlay demo 7 / 8 : Multiple overlays on a same page

The following buttons will open multiple overlays side-by-side so that all overlays can be visible together:

first second third fourth

HTML code

Here are our trigger buttons. Each one references the correct overlay with the jQuery selector for the rel attribute:

<!-- overlay buttons -->
<p>
	<button rel="div.overlay:eq(0)" type="button">first</button>
	<button rel="div.overlay:eq(1)" type="button">second</button>
	<button rel="div.overlay:eq(2)" type="button">third</button>
	<button rel="div.overlay:eq(3)" type="button">fourth</button>
</p>

We have four identical overlay elements on the page. Each one is similar to the one found in the minimal setup.

JavaScript code

Our JavaScript code initializes each overlay so that the finish configuration property is different for each overlay:

$(function() {		
		
	// positions for each overlay
	var positions = [ 
		[0, 	530],
		[400, 20],
		[400, 530],
		[0, 	20]	   
	];	
		
	// setup triggers
	$("button[rel]").each(function(i) {
			
		$(this).overlay({

			// common configuration for each overlay
			oneInstance: false, 
			closeOnClick: false, 
			 
			// setup custom finish position
			top: positions[i][0],
			left: positions[i][1],
			
			// use apple effect
			effect: 'apple'
			
		});			
	});
	
});

Opening and closing all at once

Try these buttons to open and close all overlays at once.

Open all Close all

The idea is to get the handle to each overlay's API and call its open and close methods. Here are our functions:

// open all overlays
function openAll() {
	$("button[rel]").each(function() {
		$(this).overlay().load();
	});
}

// close all overlays
function closeAll() {
	$("button[rel]").each(function() {
		$(this).overlay().close();
	});
}

Note: the openAll method could have alternately been written like this $("button[rel]").click() which would programmatically click all triggers revealing all overlays simultaneously.

report a bug »

What's new in v1.2.6 »

jQuery Tools Twitter feed