写真にオンマウスすると、解説などを上下から半透明オーバーレイでブラインドシャッター型のテキストで表示します。スクリプトで開閉スピードを変更できます。また、画像サイズ、オーバーレイのサイズ、オーバーレイの色、オーバーレイのopacity、文字サイズ、文字色、オーバーレイの色などほとんどをCSSから変更できます。

htmlの構造は、「class="heading"」の中のspan要素にタイトル文、画像、「class="caption"」の中のspan要素に解説文という順で配置したものを「class="photo"」で包みます(次のソース参照)。

htmlソース

<div class="photo">
  <div class="heading"><span>チューリップ(解説タイトル1)</span></div>
  <img src="images/500x200-4.jpg" width="500" height="200" alt="" />
  <div class="caption"><span>【解説文1】ダミーテキスト・ダミーテキスト・
  ダミーテキスト・ダミーテキスト・ダミーテキスト・ダミーテキスト・ダミーテキスト
  </span></div>
</div>
チューリップ(解説タイトル1)
【解説文1】ダミーテキスト・ダミーテキスト・ダミーテキスト・ダミーテキスト・ダミーテキスト・ダミーテキスト・ダミーテキスト
夕空の雲(解説タイトル2)
【解説文2】ダミーテキスト・ダミーテキスト・ダミーテキスト・ダミーテキスト・ダミーテキスト・ダミーテキスト・ダミーテキスト
サルスベリ(解説タイトル3)
【解説文3】ダミーテキスト・ダミーテキスト・ダミーテキスト・ダミーテキスト・ダミーテキスト・ダミーテキスト・ダミーテキスト
※参照元:http://www.queness.com/post/484/create-a-thumbnail-gallery-with-slick-heading-and-caption-effect-with-jquery
戻るボタン