閉じる
jQuery
  • 2011.08.28 (Sun)

jQueryのスライドショーとイメージギャラリーのチュートリアルサイトまとめ

コーポレートサイト、ECサイト、ブログなど今やどんなサイトでも使えるほどメジャーになったjQuery仕様のスライドギャラリーは取り入れるだけでリッチなサイトになります。

今日まで、さまざまなバリエーションや機能を持ったjQueryスライドギャラリーが作られてきましが、作り方や新しい技術など常にチェックしておきたいものです。

そこで、スライドショーや画像ギャラリーを作成するためのチュートリアル付きサイトを紹介します。

Rotating Image Slider with jQuery

珍しい形をした時間差で画像が変わる画像スライダーです。オプションで自動再生ボタンとマウスホイールで動作する機能がついています。

THE LOF JSIDERNEWS PLUGIN

HTMLコンテンツを使用し作成できるので画像だけでなくテキストも入れたりとカスタマイズが可能です。デモでは6パターン用意されています。

jQuery Multimedia Portfolio

横スクロールバーで操作できるスライダーです。画像他、ビデオやオーディオなど複数のメディアをサポートしているマルチメディアポートフォリオタイプのjQueryギャラリーです。

Making a Really Cool jQuery Gallery

画像のフォルダをスキャンし、出力するjQueryのライトボックスギャラリー。

Slider Gallery with jQuery

写真などのポートフォリオギャラリーなんかに使えそうなjQueryスライドギャラリー。ライトボックスプラグインを使用しているので画像をクリックするとライトボックスが展開されます。

Create Beautiful jQuery Slider Tutorial

名前のイメージのとおり美しいjQueryのスライダー。

SIDEWAYS – JQUERY FULLSCREEN IMAGE GALLERY

画像ギャラリーサイトを作るならこのjQueryのフレームワークプラグインを使え!っていうくらい、リッチでエレガントなギャラリー。画像をクリックすることで、フルスクリーンで画像イメージが表示されます。

How To Create Circular Image Galleries With jQuery

画像は円形サークル型のつぶやき風ギャラリーです。実際にteitterと連動しているわけではないですが、twitterプラグインと連携させれば使えそうですね。他に、ピックモードやライトボックスをサポートしているデモなどが用意されています。

Portfolio Zoom Slider with jQuery

サムネイル型のスライダーで、フォーカスした箇所を拡大表示してくれます。画像をクリックするとライトボックスで表示されます。

Creating Photo Gallery using jQuery and VisualLightBox

シンプルなjQueryスライダーですがスライド時の画像切り替わりのアニメーション変化がちょっと変わってます。ちょっと変わったアニメーション効果が欲しい時にもってこいのスライダーです。

Create an Image Rotator with Description (CSS/jQuery)

ブログやECサイトの製品・商品紹介に利用できそうな、ローテーション型のスライドギャラリー。

How to Create a Simple iTunes-like Slider

限られたスペースに必要なイメージ情報を掲載する時に便利なiTunes風なイメージギャラリーです。

Apple-style Slideshow Gallery With CSS

Apple製品サイトで使用されているようなApple Likeな人にピッタリのjQueryギャラリーです

Create a Slick and Accessible Slideshow

コンテンツに画像ほか詳細なテキスト情報を表示できるスライドショー