【jQuery】タッチデバイス対応のマウスオーバーギャラリーを作りました [IE8対応]

150813_001

下記記事のマウスオーバー版を作りました。
フェードに挑戦しましたが、ちょっと上手く出来ないのでシンプルな切り替えのみです。

目次

検証済みブラウザとOS

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

 

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

description

出来ること
  • サムネイルをマウスオーバーで、メイン領域を切り替え
  • タッチデバイスでは、サムネイルをタッチすると瞬時に切り替え
  • テキスト領域の高さは、テキスト量の成り行きで変化
  • サムネイル用画像は不要
  • インラインHTMLの表示
出来ないこと
  • カルーセルスライダー
  • 自動切り替え
  • サムネイルのロールオーバー

 

要点とコード

code

  • メイン画像とサムネイルは同じ画像
  • サムネイルのアクティブ時の装飾は、CSSで調整
  • キャプションの背景は rgba() のため、IE8で使えない

 

カスタマイズ

customize

メイン画像のリンクは要らない
a タグを削除する。
別窓ではなく通常リンクにしたい

をコメントアウトする。

キャプションは要らない

を削除する。

 

参考サイト、書籍

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)
西畑一馬
KADOKAWA/アスキー・メディアワークス
売り上げランキング: 79,125
    • このエントリーをはてなブックマークに追加