HTML コード

ここに、トリガーボタンがあります。それぞれのrel 属性には、jQueryセレクタにより、 正しいオーバレイを参照するようにします:

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

ページには、4つの同じオーバレイ要素をがあります。 各々のものは、 最小のセットアップ で見たものと同じようなものです。

JavaScript コード

finish コンフィギュレーション・プロパティは、各オーバレイごとに異なるため、 JavaScriptコードでは、それぞれのオーバレイを初期化します:

$(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'

    });
  });
});

一度ですべてを開き、閉じる

一度ですべてのオーバレイを開いたり閉じたりするのに、 このボタンを試してみてください。

全てを開く 全てを閉じる

アイデアは、各オーバレイAPI へのハンドルを取得し、 その open メソッドと close メソッドをコールすることです。 機能は、次のとおりです:

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

注: openAll メソッド、全オーバレイを同時に表示するトリガーを、 プログラムによって全てをクリックするこの $("button[rel]").click() のように書くこ とができたかもしれません。