jQuery 画像とキャプションの表現

HTML上に配置された画像にマウスオーバーした際にキャプションが追加される方法を解説します。キャプションの動きは全部で3種類用意しています

キャプション表現のHTML

まずはHTMLを以下の通り記述します。全部で3枚の画像を配置しています。

<div id="images">
        <h2>IMAGES</h2>
        <div class="inner clearfix">
            <p><img src="img/01_img.jpg"><strong>Hummingbird</strong><span></span></p>
            <p><img src="img/02_img.jpg"><strong>Sitta</strong><span></span></p>
            <p><img src="img/03_img.jpg"><strong>Bee-eater</strong><span></span></p>
        </div>
    </div>

上記コードで特徴的なのが各キャプション（strong要素）の後に空のspan要素が記述されている点です。この要素はテキストや画像などは含まれていませんが、後でJavaScriptからCSSを操作することで、この要素にマウスオーバーした際に半透明の背景色と内側の影を追加します。

キャプション表現のCSS

CSSは以下の通り記述します。

#images p {
    overflow: hidden;
}

#images p strong {
    position: absolute;
    display: block;
    z-index: 1;
    bottom: 0;
    width: 540px;
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    text-align: left;
    padding: 20px;
}

#images p span {
    position: absolute;
    display: block;
    z-index: 0;
    top: 0;
    width: 580px;
    height: 380px;
    box-shadow: inset 0 0 50px rgba(50, 30, 0, 0.6),
                inset 0 0 100px rgba(50, 30, 0, 0.3);
    background: rgba(255, 155, 0, 0.2);
    opacity: 0;
}

CSSでは、初期状態としてキャプションの背景を以下の通り記述しています。

マウスオーバー時にspan要素に指定する半透明の背景色と内側の影を以下の通り、指定しています。

#images p:nth-child(1) strong {
   opacity: 0;
}

$(function(){
   var duration = 300;

   //images
   var $images = $('#images p');

   //images 1つめの画像
   $images.filter(':nth-child(1)')
      .on('mouseover', function(){
      $(this).find('strong, span').stop(true).animate({
         opacity: 1      
      }, duration);
      .on('mouseout', function(){
         $(this).find('strong, span').stop(true).animate({
            opacity: 0
         }, duration);
      });
});

各画像に対する処理では、最初にfilter()メソッドを使用して処理対象の画像を絞りこんでいます。

$images.filter(‘:nth-child(1)’)

filter()メソッドはjQueryオブジェクトに含まれる各要素の中から、セレクタを使用してさらに要素を絞りこむメソッドです。今回の場合、$imagesには3つの画像すべて含まれているので、最初にfilter()メソッドで処理対象を1つめの画像に限定しています。

find()メソッドを使用して処理対象をさらに絞り込んだ上で、次の処理を実行しています。

• マウスオーバー時に徐々に不透明度(opacity)が1になる
• マウスアウト時に徐々に不透明度(opacity)が0になる

尚、今回はfilter()メソッドを使用して処理対象を絞り込みましたが以下の記述でも同様の結果となります。

■処理対象の要素の絞り込み方

var $same1 = $('#images p:nth-child(1)');
var $same2 = $('#images p').filter(':nth-child(1)');

 filter()とfind()の違い

fliter()メソッドとfind()メソッドは共に、jQueryオブジェクトを対象にして要素を絞り込むメソッドですが、絞り込み方に違いがあります。

■各メソッドの違い

• find()　…　jQueryオブジェクトの各要素の子孫要素を対象として要素を絞り込む
• filter()　…　jQueryオブジェクトの各要素を対象として要素を絞り込む

上記を踏まえて、1つの例を紹介します。

//$('div .text')と同じ要素を持ったjQueryオブジェクトになる
var $find = $('div').find('.text');

//$('div.text')と同じ要素を持ったjQueryオブジェクトになる
var $filetr = $('div').filter('.text');

find()メソッドの場合、「div」に半角スペースと引数のセレクタ「.text」を結合した「div .text」の要素持つように絞込みします。

一方、filter()メソッドは。「div」と引数のセレクタ「.text」を結合したセレクタ「div.text」の要素を持つように絞込みします。

2つ目のキャプション表現（スライドイン）

次にキャプションが左からスライドインしてくる表現を実装します。

2つめの画像向けのCSS

(#images p:nth-child(2) strong)のみに以下のCSSを適用します。ここではstrong要素（画像のキャプション）を透明にし、また画像上から左側にずらして配置しています。

■2つ目画像のCSS

#images p:nth-child(2) strong {
   opacity: 0;
   left: -200%;
}

 2つ目画像のjQuery

上記の効果を実現するコードは以下の通りとなりまｓ。

■2つ目画像のjQuery

$(function(){
   var duration =300;

   //images
   var $images = $('#images p');

   // images 1つ目の画像 省略

   // images 2つ目の画像
   $images.filter(':nth-child(2)')
      .on('mouseover', function(){
         $(this).find('strong').stop(true).animate({
            opacity: 1
         }, duration);
      })
      .on('mouseout', function(){
         $(this).find('strong').stop(true).animate({
            opacity: 0,
            left: '-200%'
         }, duration);
      });
});

先述した1つ目の画像との違いはanimate()メソッドの処理内容です。1つ目の画像の場合は、strong要素とspan要素に対して同じ処理を実行しておりましたが、今回はキャプションをスライドインで表示するため、処理をわけています。

strong要素（キャプション）はCSSでleft: -200%;と指定しているので、ここでleft:’0%’に向かってアニメーションさせることで表示領域に移動しています。

3つ目のキャプション表現（下部からスライドイン）

3つめの画像ではキャプションを画像下部からスライドイんさせるとともに、画像自体も少し上方向にスライドさせます。

3つ目画像のCSS

3つめの画像(#images p:nth-child(3) strong)のみ以下のCSSを適用します。ここではstrong要素（画像のキャプション）の下部に不透明の色を敷き、画像下部に配置します。

jQueryでは、CSSに指定されているbottom: -80px;を、bottom: 0px;へと変化させることで、画像下部から表示されるキャプションを表現しています。img要素（画像）は絶対配置でtop: 0pxに配置します。

■3つ目の画像向けCSS

#images p:nth-child(3) strong {
   bottom: -80px;
   background: rgba(34, 34, 34, 1);
}

#images p:nth-child(3) img {
   postion: absolute;
   top: 0px;
}

 3つ目画像のjQuery

jQueryで上記の効果を実現するコードは以下の通りです。

■3つ目画像のjQuery

$(funciton(){
   var duration = 300;

   //images
   var $images = $('#images p');

   //images 1つ目の画像 省略
   //images 2つ目の画像 省略

   //images 2つ目の画像
   $images.filter(':nth-child(3)')
      .on('mouseover', function(){
         $(this).find('strong').stop(true).animate({
            bottom: '0px'
         }, duration);
         $(this).find('span').stop(true).animate({
            opacity: 1
         }, duration);
      })
      .on('mouseout', function(){
         $(this).find('strong').stop(true).animate({
            bottom: '-80px'
         }, duration);
   })
})

上記コードで今回は「duration * 1.3」を記述しています。この値はアニメーションにかける時間です。この値を1.3倍にすることで、アニメーションにかける時間が1.3倍となり、通常よりゆっくりとアニメーションされることとなります。

関連記事はこちら

jQueryの基礎を体験しよう

jQueryの制御文

jQueyのスコープと命名規則

jQueryのホバーエフェクト

jQueryの関数

jQueryはじめてみる

JQueryのアニメーション実装方法

jQuery実行のタイミングについて