[JS]さまざまな要素にオーバーレイをアニメーションで簡単に適用できるスクリプト -Simple Overlay

ページ内のさまざまな要素に、オーバーレイをアニメーションで簡単に適用できるjQueryのプラグインを紹介します。

Simple Overlay

[ad#ad-2]

上記ページの右上にもデモが掲載されており、左の「Try It」ボタンをクリックすると下記のようにモニターの画像にオーバーレイが適用されます。
オーバーレイの解除はオーバーレイをクリックです。

デモのキャプチャ（拡大）

Simple Overlayの主な特徴

• さまざまなエフェクト

  jQueryを使用しているので、フェードのエフェクト、スライドのエフェクトなどさまざまなアニメーションでオーバーレイを適用できます。もちろん、エフェクト無しも可です。

• CSSでのフック

  オーバーレイを適用する要素に、オーバーレイがアクティブである時にclass名を付与することができます。

• コールバック

  オーバーレイ時にコールバックを設定することができます。これは例えば、右クリックでダウンロード禁止するなども可能です。

• 豊富なオプション

  マルチプルオーバーレイのサポート、マルチプルコンテナ、CSS3のグロッシーエフェクトなど

Simple Overlayの実装

Simple Overlayは画像だけでなくテキストなど、さまざまな要素に適用が可能です。
まずは、テキストに適用する例を紹介します。

HTML

jQueryのセレクタで指定できるようidを付与したp要素です。

<p id="paragraph-trigger">テキストテキスト</p>

JavaScript

「#paragraph-trigger」のクリックをトリガーにオーバーレイを適用し、オーバーレイをクリックすると解除されます。

$('#paragraph-trigger').click(function() {
  $(this).overlay({
    closeOnClick: true
  });
});

[ad#ad-2]

次に画像にオーバーレイを適用する例です。

デモページ：Photo Overlay

HTML

上記のテキストと同様にidを付与します。

<div id="photo-trigger">
	<img src="image.jpg" alt="" />
</div>

JavaScript

写真画像をクリックするとオーバーレイが適用され、コールバックを使用して右クリックを禁止にします。

$('#photo-trigger').click(function() {
  $(this).overlay({
    color: '#ccc',
    effect: 'fade',
    glossy: true,
    container: '#photo-trigger',
    onShow: function() {
      $(this).click(function(evt) {
        evt.preventDefault();
      }).bind('contextmenu', function(evt) {
        evt.preventDefault();
      });
    }
  });
});