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

OVERLAY - jQuery TOOLS

[ ツールチップの動的配置 ] [ メニュー ] [ オーバレイの Apple 効果]

オーバレイの最小限の設定

下に、オーバレイを始める2つの画像を見ることができます。使用される2つの用語があります: トリガ は、オーバレイを始める要素で、オーバレイはページ上に配置される要素です。

The Barcelona Pavilion

Barcelona, Spain

The Barcelona Pavilion, designed by Ludwig Mies van der Rohe, was the German Pavilion for the 1929 International Exposition in Barcelona, Spain. It was an important building in the history of modern architecture.

Several critics, historians and modernists have declared it "the most beautiful building of the century"

The Barcelona Pavilion

Barcelona, Spain

Another unique feature of this building is the exotic materials Mies chose to use.

Plates of high-grade stone materials like veneers of Tinos verde antico marble and golden onyx as well as tinted glass of grey, green, white, in addition to translucent glass, perform exclusively as spatial dividers.

スタンドアロン・デモ

トリガのHTMLコード

最初に、トリガを次のように定義します:

<img src="thumbs/barcelona-pavilion.jpg" rel="#mies1"/>
<img src="thumbs/barcelona-pavilion2.jpg" rel="#mies2"/>

このトリガは、rel 属性の中にオーバレイ要素への参照を持っています。この属性は、使用するオーバレイを選択する jQueryセレクタです。一般的に、セレクタはユニークなidを持つ1つの要素を選択します。例えば、#mies1 は、"mies1" の id を持っている要素を選択します。

ページには、1つ以上のトリガを持つことができ、各トリガはそれぞれが同じオーバレイや異なるオーバレイを参照することができます。

注: ここでは button タグを使用しましたが、 rel 属性を持っている限り、トリガとしては任意の要素を使用することができます。一般的なシナリオは、rel 属性およびネストされた img タグを持つ a タグを使用することです。

オーバレイのHTMLコード

次は、オーバレイが必要です:

<!-- first overlay. id attribute matches our selector -->
<div class="simple_overlay" id="mies1">
  <!-- large image -->
  <img src="photos/barcelona-pavilion-large.jpg" />
 
  <!-- image details -->
  <div class="details">
    <h3>The Barcelona Pavilion</h3>
    <h4>Barcelona, Spain</h4>
    <p>The content ...</p>
  </div>
</div>
 
<!-- second overlay -->
<div class="simple_overlay" id="mies2">
  ...
</div>

オーバレイは、任意のHTML要素にすることができますが、div が最も一般的に使用されます。オーバレイはフォーム、イメージ、FlashオブジェクトやJavaScriptウィジェットを含む任意のHTMLを含むことができますが、どのようにそれを構造化してスタイルの設定を行うかは、我々次第です。これが、このツールが柔軟である理由です。オーバレイとコンテンツの両方を可視化することができます。まさに、想像力を働かせてください。

CSS コード

ここに、オーバレイされる要素のスタイルがあります。ここで注意すべき点がいくつかあります:

ここでは、全くイメージを使いませんでした。すべてが純粋なCSSです。これで、動的にオーバレイのサイズを変更する能力が与えられます。オーバレイの高さは、動的にオーバレイの中の要素の高さに調整されます。
ここでは、CSS3の角丸やドロップシャドウを使用しています。これらの設定は、オーバレイが古いブラウザへ悪影響を及ぼすことなく、最新のブラウザでよく見えるようになります。これは、"Progressive Enhancement with CSS" として知られています。
HTMLの構造ではありませんが、[閉じる]ボタンをデザインしています。このボタンは、クラス名 close を持つオーバレイツールによって自動的に生成します。 configuration でこれを変更することができます。
オーバレイ内部の要素の絶対配置を使用することができます。それらの要素は、オーバレイの要素に相対的に配置されています。オーバレイも絶対配置されているためです。これは、CSSがどのように動作するかです。
オーバレイは、絶対配置されているので、ほとんどの場合、ページの上に置かれます。しかし、ページ上に他の絶対(または相対)配置した要素があれば、オーバレイの上に表示されることがあります。適切な要素のレイヤにするため、z-index パラメータを使用することができます。より高い z-index を持つ要素は、より低い値を持つ要素の上に配置されます。

/* オーバレイ要素 */
.simple_overlay {
 
    /* 最初は非表示でなければならない */
    display:none;
 
    /* 他の要素の上にオーバレイを配置する */
    z-index:10000;
 
    /* スタイル設定 */
    background-color:#333;
 
    width:675px;
    min-height:200px;
    border:1px solid #666;
 
    /* 最新ブラウザへの CSS3 スタイル */
    -moz-box-shadow:0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;
}
 
/* [閉じる]ボタンを右上隅に配置 */
.simple_overlay .close {
    background-image:url(/media/img/overlay/close.png);
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:35px;
    width:35px;
}

ここに、イメージの説明を表示するオーバレイ内の .details 要素の、簡単なスタイルの設定があります:

/* オーバレイ内の要素のスタイル設定 */
  .details {
  position:absolute;
  top:15px;
  right:15px;
  font-size:11px;
  color:#fff;
  width:150px;
  }
 
  .details h3 {
  color:#aba;
  font-size:15px;
  }

JavaScript コード

これは、この設定の中で最も簡単な部分です。単にトリガ要素を選択し、追加オプションを指定せずにオーバレイを有効にします:

	$("img[rel]").overlay();

Photo credits »

[ ツールチップの動的配置 ] [ メニュー ] [ オーバレイの Apple 効果]