KLUTCHE

【jQuery】トランプをシャッフルするように画像をめくって切り替えれるギャラリー

画像をクリックするとトランプのカードをシャッフルする時のように画像を入れ替えます。ちょっと変わった画像の切り替えをしたい時にいいと思います。iPhone、iPadでも動作します。

以前APIを使ってGoogleマップの静止画像を生成する方法を書きましたが、画像作成時に座標を数値で入力する必要があるので、座標をサクッと取得するサンプルも作ってみました。

画像がフェードイン・フェードアウトで切り替わるだけの、シンプルなギャラリーです。
Javascriptがなるべく短くて、設置が簡単にできて、HTMLがすっきりしていて、CSSを書かなくてもいいものが欲しくて作ってみました。

今やjQueryのスライドコンテンツ用プラグインは星の数程あります。
今回は「Coda-Slider」というプラグインを使って画像のスライドショーを作ります。
特徴として、jQuery Easing Pluginを使用するので動きがスムーズな点とタブコンテンツを実装できる点があります。

シンプルなタブコンテンツを実装したい時、jQueryを使うことにより、短くてシンプルなソースで設置することができます。
JavascriptもHTMLもすっきりと収まるのですがすがしいです。