jQuery使って画像にキャプションをオーバーレイ

非常にシンプルです

画像にキャプションをオーバーレイ。これってjQueryのプラグインたくさんある。

• マウスオーバーで画像にキャプションを追加するjQueryプラグイン「Mosaic」を使ってみた
• 画像のキャプション表示
• 画像をホバーするとキャプションが表示する「jQuery Image Overlay Plugin」 – ウェブ学のすすめ
• FerretArmy.com jQuery Image Overlay Plugin
• 画像にオーバーレイのキャプションをつけられるjQuery | CREAMU
• Create a Thumbnail Gallery with Slick Heading and Caption Effect with jQuery | Queness

などなど。。どれもサクッと使えていいのだろうけど、とりあえずやってみよう!! やればわかるさ (^^)

[js highlight=”11″]
//画像へキャプションをオーバーレイ
jQuery(".works_meta").css({
position : "absolute",
bottom : "-200px",
width : "200px",
height : "200px",
opacity : "0"
});

jQuery(".works_each_entry").hover(function(){
jQuery(this).children(".works_meta").stop().animate({
bottom : "0",
opacity : ".65"
}, 600, "swing");
jQuery(".works_meta a").css({
position : "absolute",
width : "100%",
height : "100%",
top : "0",
left : "0"
});
}, function(){
jQuery(".works_meta").stop().animate({
bottom : "-200px"
}, 600, "swing");
});
[/js]

.children()が便利 (^^)。要は画像＋キャプションを出したいボックスを作って画像以外のデータはそのボックスから外に出してoverflow: hidden;しといて、hoverで出すってヤツ。最初は.children()を付けてなかったからhoverで全ての画像にキャプションが出て非常に残念な動きだった…^^;

children([exper])

要素内の全ての子要素を選択する。選択される要素は直下にある子要素のみで、孫要素以下は対象外となる。

この関数は、条件式を渡して選択される子要素を更に絞り込むことも可能。
parents()関数が先祖まで辿って行くのに対し、children()関数は直下の子要素のみ選択する。

直下の子要素のみ選択ってのがいいっすね (^^)
あとは、各要素を順番にフェードインさせたかったので、jQueryで画像などコンテンツ要素を順番にフェードインさせる方法を参考に、

[js]
//.works_each_entryを順番にフェードイン
jQuery(".works_each_entry").css({
display : "none"
});
var delaySpeed = 250;
var fadeSpeed = 1000;
jQuery(".works_each_entry").each(function(i){
jQuery(this).delay(i*(delaySpeed)).css({
display : "block",
opacity : "0"
}).animate({
opacity : "1"
}, fadeSpeed);
});
[/js]

でOK (^^)。WordPressで作ってるサイトなので、今回はカスタムフィールドに追加した画像を一覧表示でやってみた。ついでにトップページへもスライダーで出すようにしてみた。結構便利かも (^^)

ネタもと

• jQueryで画像などコンテンツ要素を順番にフェードインさせる方法 | BlackFlag
• children([expr]) – jQuery 日本語リファレンス
• .children() – jQuery API