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

サイト構築 -JavaScript

Post on:2012年2月16日

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」：画像がダイナミックに回転しながら切り替わります。

[ad#ad-2]

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