[JS]iPhone, iPadにも対応したCSS3アニメーションを使ったシンプルな画像ギャラリー -Glisse.js

シンプルで、Responsive Web Designにも対応、フルカスタマイズも可能な画像ギャラリーを実装するjQueryのプラグインを紹介します。
CSS3非対応ブラウザでの動作も考慮しています。

サイトのキャプチャ

Glisse.js

Glisse.jsの主な特徴

Glisse.jsは、CSS3アニメーションの美しいエフェクトを使った画像ギャラリーで、Responsive Web Designにも対応しており、実装は簡単でフルカスタマイズも可能です。

  • キーボードナビゲーション
  • CSSのフルカスタマイズ
  • キーフレームを使ったCSS3アニメーション
  • 7種類の移行エフェクト
  • 異なる画面サイズに最適化
  • iPhone, iPad対応
  • Androidももうすぐ完全にサポート

対応ブラウザ

  • Firefox 4+
  • Opera 11.6+
  • Chrome 14+
  • Safari 5+
  • iPhone/iPad iOS 4.3+
  • BlackBerry OS v6+

以下のブラウザはCSS3のエフェクトは無しで動作します。

  • Opera 10+
  • Firefox 3.6
  • IE8+

Glisse.jsのデモ

デモではその快適な動作、美しいCSS3のエフェクトが堪能できます。

デモのキャプチャ

Demo 1

画像の切替は、美しいCSS3アニメーションです。

デモのキャプチャ

エフェクト「rotate」:画像がダイナミックに回転しながら切り替わります。

Demo 2は画像をグループ化したものです。

デモのキャプチャ

Demo 2

Glisse.jsの使い方

実装方法は非常にシンプルです。

外部ファイル

jquery.js」と当スクリプトを外部ファイルとして記述します。
画像ギャラリーの外観も用意されているので、スタイルシートも同様に記述します。

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="glisse.min.js"></script>

<link rel="stylesheet" href="glisse.css" />

HTML

スライドショーに使う画像はjQueryのセレクタで指定できるように同じclass名を付与し、「data-glisse-big」属性を追加して配置します。

<img class="pics" src="thumb.jpg" data-glisse-big="big.jpg"/>

画像をグループ化する場合は、「rel」属性を追加します。

<img class="pics" src="thumb-1.jpg" data-glisse-big="big-1.jpg" rel="group1"/>
<img class="pics" src="thumb-2.jpg" data-glisse-big="big-2.jpg" rel="group1"/>
<img class="pics" src="thumb-3.jpg" data-glisse-big="big-3.jpg" rel="group1"/>

スライドショーの間にタイトルを表示する場合は、「title」属性を追加します。

<img class="pics" src="thumb-1.jpg" data-glisse-big="big-1.jpg" rel="group1" title="my awesome picture"/>
<img class="pics" src="thumb-2.jpg" data-glisse-big="big-2.jpg" rel="group1" title="wooh, another picture"/>

JavaScript

jQueryのセレクタでスライドショー用の画像(.pics)を指定し、動作を設定します。

<script>
$(function () {
    $('.pics').glisse({
        changeSpeed: 550, 
        speed: 500,
        effect:'bounce'
    }); 
});
</script>

スクリプトのオプション

changeSpeed
2枚の画像の移行時間
default: 1000
speed
スライドショーの開始と終了の持続時間
default: 300
dataName
画像に使用する属性
default: data-glisse-big
effect
適用するエフェクト(bounce, fadeBig, fade, roll, rotate, flipX, flipY)
default: bounce

top of page

©2017 coliss