
Multiple overlays on the same page
The following buttons will open multiple overlays side-by-side so that all overlays can be visible together:
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.
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.