企業情報　│　お問い合わせ　│サポート

OVERLAY - jQuery TOOLS

[ オーバレイの最小限の設定 ] [ メニュー ] [ オーバレイでモーダルダイアログを作成する]

オーバレイの Apple 効果

ここでは、Apple 効果のアクションを見ることができます:

Berlin Gustavohouse

The Gustavo House in Storkower Strasse. It was built in 1978 and reconstructed in 1998 by the Spanish artist Gustavo.

Berlin Alexanderplatz Station

Berlin Alexanderplatz is a railway station in the Berlin city centre and is one of the city's most important interchange points for local public transport.

スタンドアロン・デモ

アップルの効果は、ゼロから目的のサイズまで背景画像を拡張することにより、視覚に訴える方法でオーバレイを行うものです。これは、静的な DIV によりオーバレイをする、"通常"のオーバレイ・ソリューションとは異なります。欠点は、イメージの大きさに縛られるということです。幅の変更はできますが、高さは、アスペクト比が一定に保たれるようにスケールが決まります。

HTML 設定

HTMLの設定は、オーバレイの最小限の設定に同じです。トリガ要素と、それに対応するオーバレイ要素があります。

<!-- トリガ要素 -->
<img src="photos/gustavohouse.jpg" rel="#photo1"/>
<img src="photos/alexanderplatz-station.jpg" rel="#photo2"/>
 
<!-- 1番目のトリガのオーバレイ。id は rel- 属性とマッチする -->
<div class="overlay black" id="photo1">
  <img src="photos/gustavohouse-medium.jpg" />
 
  <div class="details">
    <h2>Berlin Gustavohouse</h2>
    <p>
      The Gustavo House in Storkower Strasse. It was built in 1978
      and reconstructed in 1998 by the Spanish artist Gustavo.
    </p>
  </div>
</div>
 
<!-- 2番目のトリガのオーバレイ -->
<div class="overlay" id="photo2">
  ...
</div>

CSS コード

この効果のCSSコーディングに関するいくつかの重要な事柄:

この効果は、オーバレイ要素が、幅がゼロから目的のサイズまでに拡幅する背景画像を使用する必要があります。背景画像は、backgroundImage CSSプロパティを使用し、オーバレイ要素へ定義されます。
このボタンは、close クラス名を持つオーバレイツールによって自動的に生成します。 [閉じる]ボタンは、スタイルに使用できるCSSクラス名 close を持つオーバレイツールによって自動的に生成されます。コンフィギュレーションからクラス名を変更することができます。
zIndex パラメータは、デフォルト効果とは対照的に、 CSSの中ではなくオーバレイ設定の中で与えます。このパラメータは、拡張する画像へ指定するもので、[閉じる]ボタンとオーバレイ・コンテンツには、背景画像の上に出現するようにより大きい値が自動的に割り当てられられます。
オーバレイ内部の要素の絶対配置を使用することができます。それらの要素は、オーバレイの要素に相対的に配置されています。オーバレイも絶対配置されているためです。これは、CSSがどのように動作するかです。

つぎの、 overlay-apple.css スタイルシートを使用します:

/* オーバレイ要素 */
.apple_overlay {
 
    /* 最初はオーバレイを非表示にする */
    display:none;
 
    /* 拡張する背景画像 */
    background-image:url(/media/img/overlay/white.png);
 
    /*
      拡張アニメーション終了後の幅
      高さは自動的に計算される
      */
    width:640px;
 
    /* ネストした要素を見易いレイアウトにするパディング  */
    padding:35px;
 
    /* 小さなフォントへ */
    font-size:11px;
}
 
/* デフォルトで、[閉じる]ボタンを右上隅に配置する */
.apple_overlay .close {
    background-image:url(/media/img/overlay/close.png);
    position:absolute; right:5px; top:5px;
    cursor:pointer;
    height:35px;
    width:35px;
}

オーバレイにより、ブラウザがレンダリング可能な、どのような背景画像でも使用することができます。しかし、PNG画像を使用すると、PNGはアルファ透過をサポートしていますので、オーバレイできれいなドロップシャドウを持つことを可能にします。一方で、GIF と JPG ではできません。大きな品質の低下を感じさせることなく、異なるサイズに同じ背景画像を使用することができます。

黒い "skin"

単純に背景画像を変更することで、簡単にオーバレイの外観を変更することができます。上記例では、黒と白の背景を使用しています。黒のオーバレイのクラス名を "black" とし、設定は以下の通りです:

/* オーバレイの黒バージョン。単純に別の背景画像を使用する */
div.apple_overlay.black {
	background-image:url(/media/img/overlay/transparent.png);
	color:#fff;
}

JavaScript コード

ここに、オーバレイの設定があります。effect コンフィギュレーション変数を使用して、 "apple" 効果を指定します。

	$("#apple img[rel]").overlay({effect: 'apple'});

注: この効果は、標準のjQueryツールのディストリビューションには含まれていません。それらの効果を含めるために、custom combination をダウンロードしなければなりません。

Photo credits »

[ オーバレイの最小限の設定 ] [ メニュー ] [ オーバレイでモーダルダイアログを作成する]