画像を使ったいろいろなjQueryプラグイン224個まとめ( 200+ collection of jQuery for images )

画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。

という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。

日本語
English

結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。

リンクにマウス乗せればキャプチャが出ます。

Lightbox

Lightbox風に画像を表現できるjQueryいろいろ

Lightbox2 / ベーシックなタイプ。グループ化可能
colorbox / 多数のエフェクトが実装可能でグループ化も出来る
FancyBox / ロードとオーバーレイが素敵なLightbox
prettyPhoto / 太枠と角丸のLightboxでタイトルは枠外に付ける
ThickBox / 画像以外にテキストでも出来る。グループ化可能
jQuery lightBox plugin / アニメーションが可愛い。グループ可能
Slimbox / これもアニメーションとオーバーレイが素敵
Facebox / Facebookライクなやつ。テキストとかも対応
NyroModal / シンプルで多機能。アニメーションが素敵
Pirobox / インターフェースが素敵。グループにするとより素敵です
FancyZoom meet-jquery / スムーズに拡大縮小します。オーバーレイは無し
imgBox / オーバーレイの有無を選択できる
IMAGEBOX / アニメーションかわいいです
PICBOX / ダイナミックに表示。画像もドラッグで移動できます
CeeBox / フレームなどにも対応した多機能ライブラリ
TopUp / 動画やFlaにも対応した多機能Lightbox
NotesForLightBox / ベーシックなやつ。オーバーレイにアニメは無い
YoxView / 拡大アニメーションの素敵なLightbox
Fancy Zoom / 人気のLightbox。アニメーションが好みです
Image Zoom / 拡大アニメーションがスピーディー
ZOOMIMAGE / スムーズに拡大します。グループ可
Sexy LightBox / 上からストーンと落ちてくる
Image Magnify / シンプルで軽量なLightbox
SuperBox! / オーバーレイが独特

スライド / ギャラリー

スライド、ギャラリーやカルーセルなどなど

1. ベーシック

slideViewer / ツールチップも実装するスライダー
jFlow / ベーシックなスライダー。キャプション付
jQuery.flickrGallery / ベーシックにクリックで画像を表示させるギャラリー
Photo Slider / サムネイルが可愛いギャラリー
s3Slider / 自動で変わっていくギャラリー。キャプションが素敵
jqGalScroll / エフェクトの無い、シンプルなギャラリー
Dynamic Image Gallery / サムネイル付きのシンプルギャラリー
GalleryView / サムネの大きさも選べるギャラリー
AD Gallery / スピード感のあるスライドのギャラリー
Moving Boxes / 画像とキャプションが拡大しながら切り替え
slideViewerPro / キャプション、サムネ付きのベーシックスライダー
Pikachoose / フェードエフェクトのギャラリー、サムネ付
CrossSlide / フェードのみのシンプルギャラリー
Apple-style Slideshow Gallery / Appleライクなクールスライダー
jqFancyTransitions / ブラインドエフェクトがクールなギャラリー
Nivo Slider / いくつかのエフェクトが使えるスライド
A Simple jQuery Slideshow / フェードのみのシンプルなスライド
Image Strip / ベーシックなコンパクトギャラリー
jQuery Blinds / スピーディーなブライドエフェクトのシンプルなギャラリー
BBC Radio 1 Zoom Tabs / オンマウスでメニューが出てくるベーシックスライダー
jquery.showcase / フェードするギャラリー。マウスを乗せるとキャプション
jQuery slideView / 縦にスライドするシンプルスライダー

2. ユニーク

SPACEGALLERY / 奥から順に表示されるユニークなギャラリー
jQuery Cycle Plugin / 省スペースで複数エフェクトのあるミニギャラリー
Slider Gallery / ドラッグで移動するスライダー
jQuery.popeye / 省スペースのギャラリー
supersized / 画面いっぱいに画像を使うギャラリー。リンクも貼れる
Beautiful jQuery slide / キャプション表示がクールなスライドギャラリー
morphing gallery / 画像の大きさに合わせられたユニークなギャラリー
ImageFlow / ドラッグで動かし、画像に反射や拡大も加えてある
Sliding Image Gallery / 次の画像をクリックするとその次のが出てくる
Animate Panning Slideshow / 斜めにも移動するギャラリー
Looped Slider / 戻らずにループするスライドギャラリー
Mosaic Slideshow / 升目で切り替わるユニークなスライド
Zoomer Gallery / オンマウスで拡大、キャプションがアニメーションするギャラリー
Smooth Div Scroll / マウスを乗せるor自動で動くスライド
Simple Controls Gallery / オンマウスでナビが出てくるコンパクトギャラリー
z-index gallery / 1枚1枚後ろに行くユニークなギャラリー
Image Cube / ボックスで表現したユニークなギャラリー
Micro Image Gallery / コンパクトながらサムネ表示にも切り替えられるギャラリー
background image slideshow / 背景と同時にキャプションも変えるダイナミックスライダー
Flip! / 画像がひっくり返るスライド
Switch Display / グリッドと縦並びに変更可能なギャラリー
jFancyTile / タイル状に切り替わるギャラリー
Gallery Slider Plugin / 全画面を使ったダイナミックギャラリー

3. コンテンツごとスライド

Easy Image or Content Slider / 縦にも出来るしテキストも出来るコンテンツスライダー
horinaja / ベーシックなコンテンツスライダー
loopedSlider / テキストにも対応したコンテンツスライダー
Slick and Accessible Slideshow / テキストも対応のベーシックなコンテンツスライダー
Making a Content Slider with jQuery UI / ドラッグで動かすコンテンツスライダー
Content Slider with jQuery / アニメーションが独特なコンテンツスライダー
EOGallery / アニメーションが面白いコンテンツスライダー
dualSlider / 動画にも対応したコンテンツスライダー
simplesli.de / 見た目の素敵なコンテンツスライダー

4. 多機能

Galleria / 超多機能なスライドギャラリー。おすすめ
Galleriffic / 様々な形を選べる高性能ギャラリー
JQUERY MULTIMEDIA PORTFOLIO / ドラッグで動かすタイプ。動画にも対応
FeaturedContentSlider / サムネ、キャプションも付いたコンパクトギャラリー
Start/Stop Slider / テキストと画像がクロススライド。ストップ機能付
AnythingSlider / 高機能で人気のスライダー
COIN SLIDER / エフェクトが多数あるギャラリー、キャプション付
jQuery.slideShow({}); / 色々なタイプのある多機能ギャラリー
aviaslider / エフェクトが豊富なシンプルギャラリー

カルーセル

prettyGallery / テキストにも対応したカルーセル
jQuery Image Scroller / 自動で流れ、オアウスオーバーで止まり、キャプションを出す
Infinite Carousel / シンプルで汎用的なカルーセル
Step Carousel Viewer / ナビゲーション付きのカルーセル
jCarousel / 人気の高機能カルーセルプラグイン
jCarousel Lite / 　ベーシックなカルーセル
jQuery.ScrollShow / アニメーションがユニークなカルーセル
Agile Carousel / コンテンツごとスライドするカルーセル
infinite JQuery carousel / ベーシックで使いやすそうなカルーセル
Feature Carousel / サークル状に移動するカルーセル
Tiny Carousel / 縦にもスライド可能なカルーセル
bxCarousel / スッキリしてシンプルなカルーセル

ツールチップ

ツールチップ内に画像を含められる、または画像で表示可能なもの

jtip / 画像とテキストを一緒に出せるツールチップ
clueTip / こちらも画像とテキストを出せる。エフェクト無し
Digg-style post sharing tool / ソーシャルメディアアイコンをツールチップで表示
jQuery Popup Bubble / フェードインしながら画像が降りてくるツールチップ
Easiest Tooltip / この記事で使ってるやつです
Simple CSS + Javascript Tooltip with jQuery / マウス追従ツールチップ。テキストでも画像でも
Coda Bubble / ふわっと浮き上がるエフェクトが可愛いツールチップ
Sticky Tooltip / ベーシックな画像ツールチップ。マウス追従
BeautyTips / 様々なタイプに対応した多機能ツールチップ
Thumbnail Hover Popup / こちらも画像をツールチップで出す
qTip / 柔軟性の高い高機能ツールチップ
tinyTips / 軽量のツールチップ
MopTip / divなども使える国産高機能ツールチップ

マウスオーバーエフェクト

マウスを乗せた時のエフェクトを実装するもの

Sliding Boxes / 画像がスライドして別jコンテンツを出したりキャプション出したり
Creating an Image Slider / ガレージ式に画像が降りて別の画像を表示
Image Overlay / キャプションがアニメーションで表示
Photo Zoom Out Effect / マウスを乗せると縮小される珍しいタイプ
Thumbnail with Zooming Image / キャプションとちょいズームを実装
Hover Zoom / オーバーレイと縮小するエフェクト
captify / シンプルなキャプション表示
hover-block-jquery / スムーズに画像がスライドする
Greyscale Hover Effect / モノクロになる珍しいエフェクトを実装
Hover fading transition / フェードしながら切り替わるボタン
Fade Method / フェードしながら切り替え
Stunning Sliding Door Effect / 4方向に分かれる面白いエフェクト
Using Opacity to Show Focus / 画像を載せると別の画像にエフェクトをかける
Thumbnail with Fading Caption / クールなエフェクトで切り替える
jSquares / マウスを乗せるとハイライト化、コンテンツが浮き上がる
hoverFade / フェード効果を与えるライブラリ
Fade In-Fade Out / 画像にオンマウスで画面全体をフェードインアウト

拡大

拡大鏡的なもの

JQZoom / マウスの動きに合わせて脇に拡大鏡を表示
Featured Image Zoomer / 拡大したままマウスホイールで調整も可能
Cloud Zoom / エフェクトがクールなズーマー
Image Power Zoomer v1.1 / こちらもマウスで拡大調整可能です
AnythingZoomer / シンプルな拡大鏡
Loupe and Lightbox / Lightbox効果をプラスした拡大鏡
Apple-like Retina Effect / 丸い拡大鏡のズーマー
Zoomple / ツールチップで画像の一部を拡大表示

メニューっぽいやつ

ギャラリーとどう違うのか分からないけどメニューになりそうなもの

Image Rotator with Description / サイドのメニューをクリックすると画像が変わる&キャプション
Fancy Thumbnail Hover Effect / サムネイルをクリックすると大きな画像が切り替わる
Feature List / 見た目もクールなイメージタイプのナビゲーション
slidedeck / マウスだけで全てを閲覧できるスライドメニュー
Content Slider Using jQuery UI / ベーシックな画像ナビゲーション
bxGallery / シンプルな画像ナビゲーション
Background Image Navigation / 背景がマウスオーバーでスライドするメニュー
IconDock / アイコンが滑らかに拡大していくドックメニュー
Horizontal Tooltips Menu / アイコンメニューにツールチップがスムーズに追従
Realistic Hover Effect / 影や反射のあるアイコンがふわっと浮くエフェクト
Rolling Rounded Menu / アイコンが回転しながら開くユニークなメニュー
Garage Door Style Menu / ガレージのドアのように開く画像メニュー
Animated Menus / ゆっくり切り替わるクールなメニュー
Outside the Box / アイコンが滑らかに拡大するドックメニュー
BubbleUp / ユニークなアニメーションで拡大するアイコン
AutoSprites / cssスプライトとjQueryをあわせたメニュー
jQuery Dashboard / ダッシュボードパネルに隠されたアイコンメニュー
Smooth Animated Menu / すとんとアイコン付きの画像が降りてくるメニュー
Elastic Thumbnail Menu / スムーズに拡大するサムネイルを使ったメニュー
megamenu / 画像がドロップダウンするメガメニュー
Spy Effect / 縦にどんどん下がっていくアイコン付き可変メニュー
quicksand / アニメーション付きでソートできるアイコンメニュー
Simple Image Viewer / クールなアニメーションで切り替わるシンプルイメージメニュー
Horizontal Accordion / 画像チラ見せアコーディオン

CSS3

css3を使ってるプラグイン

polaroid photo viewer with CSS3 / ポラロイドを動かせるcss3のギャラリー
CSS3 Lightbox Gallery / バラバラに散らばった写真をクリックするとLightboxで拡大
Cufonized Fly-out Menu / クールなアニメーションエフェクトのフライアウトメニュー
Slide Down Box Menu / マウスオーバーで画像が降り、テキストが上がるクールなメニュー
Pretty Simple Content Slider / キャプションとタイトルのスライドインが素敵なメニュー
ShineTime / マウスオーバー時のエフェクトがかっこいいギャラリー
css3 transition slide / キャプションがクロススライドするシンプルなスライド
Contextual Slideout Tips / クリックでコンテンツがアニメーションしながら広がる
Bubble Navigation / マウスオーバーでサークルが広がり、子メニューが出現
A Fresh Bottom Slide Out Menu / 遅れて出てくるアイコンがキュートなメニュー
Apple-Style Icon Slide Out Navigation / アイコンが降りて来て、裏に入っていくメニュー
Little Boxes Menu / バラバラになるアニメーションがユニークなボックスタイプのメニュー
Slide Out Navigation / アイコンの出方が可愛いスライドサイドメニュー
Interactive Picture / マウスオーバーでキャプションがスライド、クリックで画像が上がってくる
Thumbnails Navigation Gallery / サムネイルギャラリーを使ったメニュー
Sliding Panel Photo Wall Gallery / 画像を全体に表示、ギャラリー化
Photo Desk / クリックするたびに角度が変わるポラロイドタイプギャラリー
Beautiful Photo Stack Gallery / スライドギャラリーとLightboxをあわせたもの
Image Highlighting and Preview / 少し回りくどいLightbox
Kitchen Table / ギャラリーとLightboxをcss3も使って実装

その他

そのほかいろいろ

PANORAMA VIEWER / 360度ビューアを実現するライブラリ
VIRTUAL TOUR / パノラマビューアにキャプション機能を追加
Create a Resizable Image Grid / バーのドラッグで全ての画像のサイズを変更
imgAreaSelect / 画像の範囲をドラッグで指定、位置やサイズを表示
Jcrop / 画像の範囲を指定して切り取る
gzoom / バーのドラッグで拡大縮小
Image Upload And Crop / PHPを使って、アップロード&切り取り可能なコンテンツに
PhotoShoot / 画像内の一部を撮って写真内に収める
Image Flip / クリックするとフリップする
jQuery Corner / 角丸を作る。画像も角丸に
jQSlickWrap / 画像の形状に合わせてテキストを詰める
Image Reflection / 画像にリフレクション効果を与える
jcoverflip / 画像をスクロールバーで動かす際に拡大アニメーション
ANIMATED INNERFADE / 画像が自動でボックス内で斜めに動いたりする
jThumb / 画像をサムネイル化する
It’s a Rainbow! / 背景の画像の色が七色に変化
Page Peel Effect / 角にめくれをつくる
jQuery-Notes / Flickrのように画像内に説明を加えられる
Filter Image View / 画像をソートする時にアニメーション
Before/After / ビフォーアフターを作れる
maphilight documentation / 細かい範囲でマウスオーバー指定可能
Plupload / ローカルからドラッグすればアップロードできる
puffing-smoke-effect / 煙の出る煙突アニメ。ドラッグで移動も可能
Animated Postcard / 時間差の有るアニメーションを実現
scrolling background effect / 背景をスクロールさせる
funky-parallax-background-effect / 視差の生まれる雲を実現
Mouse Movements With JParallax / マウスに合わせて動き、視差を作る
Shadow Motion Effect / アニメーション時にモーションを残せる
Sponsor Flip Wall / クリックでアニメーションしながらフリップさせる
Spritely / 高度な画像アニメーションエフェクト
jQuery Robot / ロボットアニメーションサンプル
Drag to Share / ドラッグ→オーバーレイし、シェアサイトに投稿
Animate Curtains Opening / スムーズにカーテンが開く
Filling Up Using jQuery / 画像表示時の形状を変える
Full Size Background Image / ブラウザサイズに関係なく画像の大きさを保つ
Lazy loader / スクロール時に画像を読み込む事でページロード時間を短縮
jQuery Canimate / gif以外でも画像をアニメーションさせる
Sudo Slider / リンクをクリックで画像をスライドイン
imgCenter / 画像のセンターをサムネ化
The Sexy Curls / 手動で角の折り目をめくれる
Animated Landscape Header / コンテンツがアニメーションで上がるヘッダ
Flickr-Style Photo Tagging / Flickrっぽくコメントを付けられる
QuickFlip / クリックでフリップするコンテンツ。背景に画像しても可

以上、224個の画像系jQueryプラグインでした。

200+ collection of jQuery for images. Lightbox, image gallery,image slider, carousel, loupe, and more scripts.

I want this to be the most extensive roundup in the internet of jQuery plugins for images. Enjoy 🙂