【jQuery】タッチデバイスでも滑らかなフェードで切り替える、キャプション付きギャラリーを作りました [IE8対応]

150805_001

不動産物件を紹介するサイトなどでは、サムネイルをクリックして画像を切り替えるギャラリーの需要が、今でも一定数あります。
幅広い世代が閲覧することを想定して、機能を絞って作りました。

目次

検証済みブラウザとOS

  • IE 8~ ※一部CSSはIE8不可
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X Yosemite
  • iOS 8
  • Android 4.1

 

このjQueryで出来ること、出来ないこと

description

出来ること
  • サムネイルをクリックで、メイン画像をフェードで滑らかに切り替え
  • 各画像にリンクURLを指定する
  • メイン画像にキャプション(見出しとテキスト)を追加する
  • キャプション領域の高さは、テキスト量の成り行きで変化
  • サムネイル用画像は不要
出来ないこと
  • カルーセルスライダー
  • サムネイルのロールオーバー
  • インラインHTMLの表示
  • 自動切り替え
タッチデバイスでも滑らかな理由
Julian Shapiro 氏の、 Velocity.js を利用しています。

 

要点とコード

code

  • メイン画像とサムネイルは同じ画像
  • サムネイルのリンクにメイン画像を指定する
  • サムネイルのアクティブ時の装飾は、CSSで調整
  • メイン部分には、position: absolute; と overflow: hidden; を指定して、領域以外を非表示にしている
  • 挿入するURLを <b> で囲んでいるのは、b タグが「他に適当なテキストタグがないときに使える」ため
  • キャプションの見出しはサムネイルの title を、テキストはサムネイルの alt が反映される
  • キャプションの背景は rgba() のため、IE8で使えない

 

カスタマイズ

customize

メイン画像のリンクは要らない
a タグを削除する。
別窓ではなく通常リンクにしたい
a タグの target=”_blank” を削除する。
キャプションは要らない

をコメントアウトする。

 

問題点

下記環境で、切り替え時に一瞬チラつくことがあります。

  • IE
  • Firefox
  • Mac OS
  • iOS

許容範囲内だと思いますが、どうしても気になる場合は、.velocity 部分を普通のjQueryメソッドに直してください。

 

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)
西畑一馬
KADOKAWA/アスキー・メディアワークス
売り上げランキング: 12,539

 

JavaScript逆引きハンドブック
古籏 一浩
シーアンドアール研究所
売り上げランキング: 152,274
    • このエントリーをはてなブックマークに追加