JavaScriptライブラリのjQueryのプラグインを利用して出来るサンプルです。
jQueryは、John Resig によって開発されたJavascriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。
ここでは、画像関連のjQueryプラグインを紹介しています。
jQueryプラグインを利用したレスポンシブでクールな画像ギャラリー「least.js」
レスポンシブなサイトが増えている昨今、画像ギャラリーの見せ方に悩む人は多いのではないでしょうか。 least.jsはそんな悩みを一掃してくれるかもしれません。 サムネイルをグリッド配置し、タップ時に同じページ内で拡大画像を表示してくれるため、ユーザーにもストレスがなくなりそうです。via：least.js
テキストや画像にぼかしを入れて興味をそそれるjQueryプラグイン「SPOILER ALERT!」
人間、隠されているものって気になりますよね。 jQueryプラグインのSPOILER ALERT!は、テキストや画像に簡単にぼかしを入れられ、クリックで表示させられます。via：SPOILER ALERT!
画像に歪んだ形のマスクをかけられるJavaScript「MASKEW」
画像にマスクをかける際にはPhotoshopなどで加工をしなければなりません。JavaScriptライブラリのMaskewを利用すれば、簡単に歪んだ感じのマスクを掛けられるようになり、画像を一風変わった形で表示できます。
via：Maskew
意外に便利！？画像をグリッドに綺麗に散りばめてくれるjQueryプラグイン「Photoset Grid」
画像を配置する際に大きさ同じでグリッド形式にしてもつまらなくなりますよね。 jQueryプラグインのjQuery Photoset Grid - Style Hatchを利用すると大きさをバラバラにして綺麗に散りばめて配置してくれます。 これで一味違った画像の見せ方が簡単にできますね。via：jQuery Photoset Grid
スマホでスワイプ形式の画像ギャラリーを利用できるjQueryプラグイン「TouchSlider」
スマホでも画像ギャラリー的なことやりたいですよね。 jQueryプラグインのTouchSlider ? JavaScript slide contentを利用するとスマホでスワイプ形式のスライドギャラリーを導入することができます。 もちろんPCでも動作しますので、レスポンシブ・ウェブデザインにも良いかもしれません。via：TouchSlider ? JavaScript slide content
画像のスワイプにも対応したスマホ時代のjQueryプラグイン「Swipebox」
PCでの画像拡大と言えばLightBox系が席巻していましたが、スマホだとなんだか使いにくいものでした。 Swipeboxはスワイプ動作による画像間の切り替えも可能で、新時代の到来を予感させます。 なおPCでもキーボードによる遷移ができたりします。via：Swipebox
画像を徐々に読み込みながら、タイル状に並べていくjQueryプラグイン「stalactite」
Pinterestが流行ってからタイル状に配置するデザインが増えました。 新はてブのように目線がばらつくという指摘もありますが、画像だけを見せるのであれば有効な手段なのではないでしょうか。 今回紹介する「stalactite : A jQuery plugin」では、画像だけでなく、iframeなども徐々に読み込んでいくというエフェクトもかけてくれます。via：stalactite : A jQuery plugin
IE6もOK！jQueryプラグインでぐりんぐりんする画像切り替えを作る
最近のサイトではメインビジュアルにもよく画像の切り替えが利用されています。 これをjQueryプラグインbox-sliderでぐりんぐりん切り替えてしまいましょう。 頭を悩ませるIE6も3Dエフェクト以外は対応しています。via：box-slider
エフェクト満載！画像をタイル状に切り替えるjQueryプラグイン「jq-tiles」
画像の切り替えに飽きてきた方には今回紹介するjq-tilesは良いかもしれません。 画像をタイル状に多彩なエフェクトで切り替えてくれ、インパクトが出てきます。via：jq-tiles
画像をヴィンテージ加工してしまうjQueryプラグイン「vintageJS」
画像を格好良く見せたいというのはサイト運営者の常です。 rendro/vintageJSを利用すれば、画像をヴィンテージ風に加工してくれます。via：rendro/vintageJS
写真をミニチュア模型風にするjQueryプラグイン「tiltShift.js」
instagramなどの写真加工アプリでも多い効果で写真をミニチュア模型みたいにするチルトシフトをjQueryプラグインでも簡単にできます。 加工するのが面倒なものでもtiltShift.jsなら一瞬で実現できます。via：SeuratJS
あっという間に画像をドット絵に！jQueryプラグイン「SeuratJS」
画像をドットっぽく加工するとひと味違った見た目になり、印象的です。 それをjQueryでやってしまうプラグイン「SeuratJS」を紹介します。via：SeuratJS
画像に波状のエフェクトをかけられるJavaScript「lake.js」
タイトルそのまま、ゆらゆらと波状のエフェクトを画像にかけることができるjQueryプラグインlake.jsです。 なんかゆらゆらしたい時にどうぞ。via：lake.js
画像を背景いっぱいに敷くjQueryプラグイン「Fullscreen Background for jQuery」
画像を背景に敷き詰めることでインパクトのあるデザインになります。 これを実現するのがjQuery plugin: Fullscreen Background - Gaya Designです。ウィンドウサイズにあわせて自動でフルスクリーンで表示してくれます。。
via：jQuery plugin: Fullscreen Background - Gaya Design
要素をランダムにフェードインさせていくjQueryプラグイン「champagne.js」
画像などの要素をただ並べていくだけだとなんだか寂しい。 そんな時は徐々にフェードインさせてみてはいかがでしょうか？ champagne.jsはランダムに要素をフェードインさせてくれます。via：champagne.js
要素を小刻みに動かすjQueryプラグイン「jQuery Wiggle plugin」
たまに要素を動かしたくなることありますよね？ iPhoneでアプリをロングタップしたような動きを実現するjQuery Wiggle pluginです。via：jQuery Wiggle plugin
jQueryプラグインで背景画像をスライドショー「Backstrech」
背景画像全面に画像を置いて、切り替えるとインパクトがあります。 また写真さえよければ、その上にテキストを載せるだけでも良いデザインにすることができちゃいます。 jQueryプラグインのBackstretchはもともと画像をウィンドウ幅にあわせて背景ぴっちりに表示してくれるスクリプトですが、これをスライドショーにも活用できます。via：Backstretch
画像の一部をズームさせられるJavaScript「ImageLens」
画像の細かい部分まで見せたいという時にjQuery Topbar message Plugin Demoを利用すると便利です。 ECなどのサイトで有効そうです。via：jQuery Topbar message Plugin
簡単・軽量！画像ズームjQueryプラグイン「Zoom」
ECなど表示スペースは限られているものの商品の細かい部分は見せたいという要望があると思います。 これを簡単・軽量なjQuery image zooming pluginが解決してくれます。via：jQuery image zooming plugin
記述がシンプルなラウンド型ギャラリーJavaScript「Rondell」
奥行き感を出しながら画像を回して表示させたい。 そんな時にはシンプルな記述で簡単導入できる「jQuery Rondell」を採用しましょう。via：jQuery Rondell
YouTubeの動画を背景にフルスクリーンで表示するJavaScript「jquery.mb.YTPlayer」
画像のマウスオーバーをひとつひとつ作るのは面倒に思う時があります。 そんな時はjQUeryプラグインのHoverizrを利用するのも手段のひとつでしょう。via：Hoverizr
YouTubeの動画を背景にフルスクリーンで表示するJavaScript「jquery.mb.YTPlayer」
動画を背景全面で再生し、テキストを乗せるとそれだけでかっこ良く見えそうです。 jquery.mb.YTPlayerはこれを簡単に実現できるJavaScriptです。via：jquery.mb.YTPlayer
シンプルでも最低限な機能がついた画像スライダーJavaScript「Rhinofader」
過剰な画像スライダーまたは画像ギャラリーはいらない。 再生して、コントローラーを表示して、時間を指定できればいい。 そんな人にお勧めRhinofader: A simple jQuery fade sliderです。via：Rhinofader
背景画像をスライドショーさせるJavaScript「Vegas Background jQuery Plugin」
背景画像を動かすことでインパクトのあるサイトが構築できます。 Vegas Background jQuery Pluginはフルスクリーンで背景をスライドさせられます。 さらにドットのオーバーレイをかけられるので、カッコイイ感じになります。via：Vegas Background jQuery Plugin
なんかもうカッコイイ！フルスクリーン画像ギャラリー「jmFullWall」
フルスクリーンで画像を並べ、クリックすると拡大画像を表示する。 そんなのを作りたい方多いのではないでしょうか。 jmFullWall | FullZoom Portfolio with jQueryを利用すれば、簡単にこれが導入できてしまいます。via：jmFullWall
切り替え時のエフェクトが面白い画像ギャラリーJavaScript「Jquery Slider with transition effects」
画像の切り替えが面白い画像ギャラリーがあったので、ご紹介します。 Jquery Slider with transition effects (bounce and switch effect)はモザイクをランダムに散らしたような感じで画像間の切り替えをさせられます。via：Jquery Slider with transition effects (bounce and switch effect)
スマートフォンの画像ギャラリーにも使える！タッチでスライドさせられる「Roto」
昨今のスマートフォンブームで、対応を迫られることも多い、画像ギャラリーなどのスライド機能。 既存のギャラリー系JavaScriptだとタッチがうまく取れないこともあります。 そんな時は、Rotoを使用してみてはいかがでしょうか。。via：Roto
スマートフォンも対応！本をめくるような表現ができるJavaScript「FlipPage」
本をめくるような表現を付けられるJavaScriptです。 FlipPage: Tournez les pages sur votre iPad !では、iPhoneをはじめ、Androidなどでもタップでめくることが可能です。。via：FlipPage
思わず“いいね！”したくなる高機能画像ギャラリーJavaScript「Diapo」
画像ギャラリーは数あれど、ここまで高機能なライブラリはなかったのではないでしょうか。 jQueryプラグインのDiapoは多くのエフェクトやスマートフォン対応、円型メーター、ナビゲーション、ページネーション、サムネイル表示などの機能や各種設定を細かくできます。 困った時はまずこのプラグインを検討してみるのもいいかもしれません。via：Diapo
機能十分の軽量JavaScriptスライダー「FLEXSLIDER」
軽量、機能性、簡単記述などを兼ね備えたFlexSlider - The Best Responsive jQuery Slider。 スライダー系JavaScriptの定番となるかもしれません。via：FlexSlider - The Best Responsive jQuery Slider
画像を背景にフルスクリーンで表示する「jQuery Fullscreen Slideshow with zoom/slide animation」
フルスクリーンで画像を背景に表示させるとインパクトが出せます。 jQuery Fullscreen Slideshow with zoom/slide animation | jQuery Pluginsは、これを可能にし、またズームなどのエフェクトを全自動で付けてくれます。via：jQuery Fullscreen Slideshow with zoom/slide animation | jQuery Plugins
画像を自動でモノクロに！「$.GreyScale jQuery Plugin」
画像を自動でモノクロにし、マウスを乗せるとカラーに戻る$.GreyScale jQuery Pluginを紹介します。 これを利用すると、画像ギャラリーをうまく見せることができそうです。via：$.GreyScale jQuery Plugin
シンプルに画像をスライドさせるJavaScript「iSlider」
シンプルな画像スライダーをお探しの方はjQueryプラグインのiSlider - Photo Slider - jQuery Pluginはいかがでしょうか。 設定が簡単なので、選択肢の一つとして検討ください。via：iSlider
本をめくるようなエフェクトで画像を切り替えるJavaScript「mLivre」
読み物っぽい画像を切り替えるとき、本をめくるように切り替えられたらイメージがわかりやすくなります。 jQueryライブラリのmLivreを利用すると擬似的に実現可能です。via：mLivre
3Dな感じで画像を回せるjQueryプラグイン「Professor Cloud」
トップページとかで告知エリアとしてメインビジュアルを大きい画像で回すケースが見受けられます。 多くがFLASHで実現しているかと思いますが、jQueryプラグインのProfessor Cloudでも実現が可能です。via：Professor Cloud
マス目状の画像ギャラリーを作成できるjQueryプラグイン「Mosaiqy: a nice jQuery plugin」
画像ギャラリーを使用する際に、多くの画像を一覧で見せたいという希望があるかもしれません。 従来までのものだと、初期時にあまり多くを非表示できませんでした。 そこで、一度に多くの画像を見せられるjQueryプラグインMosaiqy: a nice jQuery pluginを紹介します。via：Mosaiqy: a nice jQuery plugin
jQueryでシンプルにマウスオーバー時に画像をスライドさせる
マウスオーバーでちょっとエフェクトをかけたい。 でも、jQueryプラグインを使うほどの機能はいらないということがあるかと思います。 今回はプラグインを使用せず、シンプルにマウスオーバー時に画像をスライドさせたいと思います。via：Useful image hover slide effect with jQuery
必要最低限でよさげな画像ギャラリーJavaScript「Craftyslide」
最近は機能もファイルサイズももっさりな画像ギャリーJavaScriptが増えていますが、Craftyslide - A tiny jQuery slideshow pluginは2kbかつシンプルな記述で必要最低限な表現が可能です。via：Craftyslide
マウスオーバーした画像をくっきり見せるJavaScript「Gallery Focus jQuery experiment」
マウスを当てたとこの画像だけくっきり見せたいという方にはこちら。 Gallery Focus jQuery experimentを利用するとマウスオーバーした周辺に対して適用されるので、幻想的かつ印象的な画像ギャラリーになりそうです。via：Gallery Focus jQuery experiment
横スクロールのサイトを作成できるJavaScript「X-Rhyme.js」
ギャラリー系やポートフォリオサイトでよく見かける横スクロールのサイト。 これをJavaScriptライブラリのjQueryで実現するプラグイン「X-Rhyme.js for horizontal websites」を紹介します。 ※マウスホイールにも対応via：X-Rhyme.js for horizontal websites
画像をiTunes風に見せられるJavaScript「CoverScroll jQuery plugin」
iTunesで曲の表紙を一覧で見せる手法としてカバーフローなるものがあります。 これをjQueryで実現したのがCoverScroll jQuery pluginです。 ※マウスホイールにも対応via：CoverScroll jQuery plugin
いいね！Android Marketチックな画像スライド「Twilight Slideshow」
Android マーケットのようにメイン画像を大きく、前後の画像は透明にして横に並べるスライドは印象的で、クリック率の向上に役立ちそうです。 今回はこれをjQueryで実現するTwilight Slideshowを紹介します。 スマフォ端末でフルスクリーンで表示させると面白そうです。via：Twilight Slideshow
画像の好きなとこを拡大させられるjQueryプラグイン「ax-zoomer」
jQueryで画像の特定部分を拡大させるプラグインは多々ありますが、今回紹介するax-zoomerはシンプルかつマウスホイール対応となかなか便利なものです。via：ax-zoomer
appleライクなカバフロー画像ギャラリー「FlowGallery jQuery Plugin」
カバーフローというappleでよく使われるUIがあります。 見ているものを目立たせ、かつほかに何があるかわかりやすいものです。> これを簡単に実現できるjQueryプラグイン「FlowGallery jQuery Plugin」を紹介します。via：FlowGallery jQuery Plugin
画像にマウスオーバーするとキラーンとさせるjQueryプラグイン「jQuery Gloss」
画像にマウスオーバーした際にひと工夫したい。 そんな時にはjQuery Glossです。 キラーンとさせますよ、キラーン★via：jQuery Gloss
jQueryで、スマートな画像スライダー「MobilySlider」
見せ方、UIがスマートな画像スライダーJavaScriptを紹介します。 jQueryプラグインMobilySliderです。via：MobilySlider
印象に残る画像スライダーを作れるjQueryプラグイン「FancyMoves a new jQuery Product Slider」
面白い動きで印象に残る画像スライダー「FancyMoves a new jQuery Product Slider」を紹介します。 ECサイトなど商品を見せる時に有効ではないでしょうか。via：FancyMoves a new jQuery Product Slider
VAに使えそうな画像切替jQueryプラグイン「Awkward Viewline -- A jQuery Plugin」
昨今VAで画像を切り替えるのが多くなっていますが、Awkward Viewline -- A jQuery Pluginを使用するとウィンドウ幅100%で画像切替が可能になり、印象的なVAが導入できそうです。via：Awkward Viewline
画像をマトリックス風にしちゃう！jQueryプラグイン「jQuery Matrix」
画像をマトリックスにできます！ ・・・いまさら何でって感じですが。 jQuery Matrixを使用すると画像をモザイク化できるので、ひと味違う様に見せるのにはいいのではないでしょうか。via：jQuery Matrix
ナビゲーションもわかりやすいLightBox系JavaScriptギャラリー「Thumbox」
LightBoxが流行り始めていくらかの時が流れ亜種がますます増えています。 今回紹介するThumboxもそんな一つではありますが、読み込まれている画像の数を明示できるなどナビゲーションが分かりやすくなっているのが特長です。via：Thumbox
3Dで画像をぐるぐる回せるJavaScript「jQuery k3dCarousel plugin」
画像を多く表示させると見せ方に悩むかもしれません。 そんな時jQuery k3dCarousel pluginを使用すると一味違った感じの印象を与えられます。 3Dぽくぐるぐると回っていきます。via：jQuery k3dCarousel plugin
画像にスポットライト風のマスクをかけられるJavaScript「Spotlight jquery plugin」
画像に光を当てたような効果を与えられるJavaScriptSpotlight jquery pluginを紹介します。 これにより、画像全体をうっすら見せ、マウスを乗せた部分だけチラ見させられるようになります。via：Spotlight jquery plugin
2.8kbの洒落たjQuery画像ギャラリープラグイン「Orbit」
画像ギャラリー系のプラグインは重い場合がありますが、今回のOrbit: jQuery Image Slider Plugin from ZURBは、わずか2.8kbで使用方法も簡単で、エフェクトもあり良いこと満載です。via：Orbit
ちょっとシャレた画像ギャラリーのjQueryプラグイン「desSlideshow」
ちょっとオシャレなあなたには、こんな画像の見せ方もいいのではないでしょうか？ jQueryプラグイン「desSlideshow」で一味違う画像ギャラリーを作ってみましょう。via：desSlideshow
多様な切り替えエフェクトがあるjQueryの画像ギャラリープラグイン「jqFancyTransitions」
jQueryの画像ギャラリープラグインの中でも、ここまで多様な切り替えフエフェクトがあるものはそう多くはないでしょう。 Image gallery with fancy transitions effectsはjQueryを使用して、短冊状に画像を切り替えてくれます。via：Image gallery with fancy transitions effects
サムネイルをドラッグさせ大きな画像を省スペースで表示するJavaScript「jQuery Image Scroller Plugin」
ECで縦長の、特にモデルが着用した画像を見せたい場合はスペースをとりがちです。 一方で、多くの画像を一覧で見せたいという願望もあるかと思います。 そんな悩みを解消するのが、jQuery Image Scroller Pluginです。 大きな画像を指定の大きさで表示させ、隠れた部分はサムネイルのドラッグで表示させられます。via：jQuery Image Scroller Plugin
2.7kbの軽量画像ギャラリーJavaScript「Easy Gallery for jQuery」
画像ギャラリーのJavaScriptも豊富に出回り、機能がますますリッチになっています。 でももっとシンプルで軽いものが良いという方もいるかと思います。 Easy Gallery for jQueryは2.7kbの軽量画像ギャラリーです。via：Easy Gallery for jQuery
背景画像を動かすjQueryプラグイン「bgFlow」
わりとこだわった背景のデザインの場合、それに一手間加えるとさらに印象的になります。 その手段のひとつしてjQueryプラグインの[jQuery] bgFlow plugin | Le blog d'Hezadを紹介します。 これを利用するとカーソル位置に合わせて画像を動かすことが可能になります。via：[jQuery] bgFlow plugin
リール式画像ギャラリーJavaScript「jReelGallery」
画像ギャラリーといえば、画像のサムネイルがずらっとならんで・・・みたいのが多いと思います。 そんな中で、今回紹介するjReelGalleryは一風変わった表現が可能です。via：jReelGallery
2つ1組の要素を同時にスライドさせられるjQueryプラグイン「dualSlider」
画像などメディア部分と説明するテキスト部分を分割したいという人もいるかと思います。 jQueryプラグインの「dualSlider」では、これを実現してくれます。これにより画像にテキストを乗せたり、解説テキストを十分に記述することができます。
via：dualSlider
色々なエフェクトがある画像ズームJavaScript「Cloud Zoom」
画像をズームさせることで、小さなスペースで詳細まで見せることが可能です。 今回紹介するProfessor Cloudは軽量かつ簡単にズームをさせられます。via：Professor Cloud
jQueryで画像を拡大させるJavaScript「Featured Image Zoomer」
ECサイトなどで使用される、画像にマウスを乗せると拡大するあれ。 jQueryプラグイン「Featured Image Zoomer」で実現しましょう。via：Featured Image Zoomer
印象的にサムネイルを魅せられるjQueryチュートリアル via Scrollable Thumbs Menu with jQuery
まずは見ていただいた方がいいかもしれません。（サンプル） このような印象的なサムネイルの魅せ方をJavaScriptライブラリjQueryで実現しています。 上記のようなアパレルだけでなく、ブランド志向の商品・サービスに使えそうです。via：Scrollable Thumbs Menu with jQuery | Codrops
もうFLASHはいらない！？画像切替えJavaScript「jQuery "Feature Carousel" plug-in 」
FLASHを使用して画像を印象的に切り替える手法がWEBマガジンなどでは多く見られます。 でもそれFLASHじゃなくてもよくない？ JavaScriptライブラリのjQueryを利用した「jQuery "Feature Carousel" plug-in 」なら、いちいちフラッシャーに直させたり、よくわからないxmlを書き換える必要もありません。via：jQuery "Feature Carousel" plug-in
シンプルな画像ギャラリーJavaScript「Slide Scale」
シンプルに画像を見せるためのギャラリーJavaScriptを紹介します。 jQueryプラグインのSlideScaleです。via：SlideScale
ユニークなエフェクトがある画像ギャラリーJavaScript「COIN SLIDER」
画像ギャラリーのJavaScriptがあふれる中、少しでも特徴感を出したいものです。 Coin Slider: jQuery Image Slider Plugin with Unique Effectsは少し変わった切り替えエフェクトを持つ、プラグインです。 これを利用して、オリジナル感を出してみてはいかがでしょうか。via：Coin Slider
JavaScriptでスクラッチゲームみたいなことが可能な「jScratchcard plugin」
クーポンや宝くじについていて、コインなどで削るとあたりとか表示されるスクラッチ。 それをJavaScriptで実現したScratchcard (Scratchcard effect on image) pluginです。via：Scratchcard (Scratchcard effect on image) plugin
必要最低限の機能が揃った画像ギャラリーJavaScript「Nivo Slider」
画像ギャラリーとして必要な機能が一通り揃っていて使い易いJavaScriptNivo Slider - The Most Awesome jQuery Image Sliderを紹介します。 これを利用すれば、リッチで目をひくなギャラリーが作成可能です。via：Nivo Slider - The Most Awesome jQuery Image Slider
切り替えタイミングがわかる画像ギャラリーJavaScript「Presentation Cycle with a progressbar」
画像ギャラリーのJavaScriptは結構ありますが、画像間の切り替えタイミングがわかりにくかったです。 jQueryプラグインのPresentation Cycle: Cycle with a progressbar - Gaya Designを利用すると、あとどれくらいで切り替わるかが明示されるので、非常にわかりやすいです。via：Presentation Cycle: Cycle with a progressbar
要素を切り替えるJavaScript「jShowOff: a jQuery Content Rotator」
要素を切り替えるJavaScriptは多くありますが、自分の好みが見つからないかもしれません。 今回紹介するjShowOff: a jQuery Content Rotator Pluginも選択肢のひとつにしていただければと思います。via：jShowOff: a jQuery Content Rotator Plugin
画像のキャプションを画像から飛び出るように表示するJavaScript「jQuery Drop Captions Plugin」
画像にキャプションを付けることでユーザーに配慮することが可能です。 JavaScriptライブラリのjQueryプラグインのjQuery Drop Captions Pluginを使用すると、画像から飛び出すようにキャプションを表示できます。via：jQuery Drop Captions Plugin
jQueryで簡単かつビジュアルに長けたLightBox「Visual LightBox JS」
jQueryを使用してFacebook風、Vista風、Mac風のLightBoxを簡単に作れる「Visual Lightbox JS」です。 これ、何がすごいってローカルで動くプログラムで必要なファイルをすべて生成しちゃうってとこ。 手間がかかる画像加工もhtmlの記述もいりません。via：Visual Lightbox JS
画像を背景に100%で表示させるJavaScript「fullscreenr」
画面いっぱい背景画像を使いたいことはありませんか？ JavaScriptライブラリのjQueryプラグイン「fullscreenr」を使用することで、導入することが可能です。via：fullscreenr
簡単導入！画像をズームさせるJavaScript「loupe | a jQuery image magnifier」
ECサイトなどでよく使用されている画像の一部分を拡大表示する手法。 これを簡単に導入できるloupe | a jQuery image magnifierを紹介します。via：loupe | a jQuery image magnifier
画像の側にテキストを回り込ませるJavaScript「jQSlickWrap」
画像にテキストを回り込ませると、通常テキストは四角に区切られたエリア単位となります。 円や変な形状の画像のすぐ側に沿って回り込ませたい・・・そんなあなたに jQueryプラグインのjQSlickWrapです。via：jQSlickWrap
画像をクロスフェードさせるJavaScript「ImageFadingSlider」
画像のシンプルな見せ方としてクロスフェードを使用するケースは多いのではないでしょうか？ それを簡単に行えるのが、jQueryプラグインのImage Fader jQuery plugin - wingtechです。via：Image Fader jQuery plugin - wingtech
マウスオーバーした要素にスポットライトを当てるJavaScript「Making a Cool Spotlight Effect with jQuery」
マウスオーバーした要素に変化を与えるのは多いですが、当該要素以外を透過させてみるとスポットライトがあたったようなエフェクトを与えられます。via：Making a Cool Spotlight Effect with jQuery
jQueryでappleぽい画像ギャラリーを作る via：A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
デザインの美しさと洗練された機能により人気のapple商品。 そんなappleぽいスライド型画像ギャラリーをjQueryで作成します。via：A Beautiful Apple-style Slideshow Gallery With CSS & jQuery -- Tutorialzine
ウィンドウサイズに合わせて要素をきれいに配置するJavaScript「Browser size aware content scaling」
Googleの画像検索はウィンドウサイズによって表示件数を変えているのをご存知でしょうか？ 割り切れない個数の場合、余らせるのではなくあえて隠してしまうそのこだわり、あなたも追求しませんか。 jQueryを使用して同じ方法を実現する「Browser size aware content scaling like Google images」です。via：Browser size aware content scaling like Google images
本をめくるように画像を表示するJavaScript「imBookFlip」
複数の画像を表示する際に、本をめくるような効果を与えると印象的になります。 JavaScriptライブラリjQueryのプラグイン「GrasshopperPebbles.com Demos: imBookFlip」で実現可能です。via：GrasshopperPebbles.com Demos: imBookFlip
スライドショー風に背景画像を見せるJavaScript「jQuery maxImage plugin」
背景画像をスライドショー風に見せるとサイトが印象的に見えます。 jQuery maxImage plugin: DemoはJavaScriptによりターゲット内の画像を最大表示してくれます。 これを利用して背景画像をスライドショーにします。via：jQuery maxImage plugin: Demo
画像とテキストの組合せの見せ方を変えるJavaScript「Switch Display Optionswith CSS & jQuery」
画像とテキストは時と場合により色々な見せ方が必要となります。 表示スペースの都合で、サムネイルしか見せられない時もSwitch Display Optionswith CSS & jQuery - by Soh Tanakaを利用すると、スマートに表示することができます。via：Switch Display Optionswith CSS & jQuery
jQueryで画像・動画などを表示するLightboxクローン「CeeBox」
久しぶりにLightBoxクローンの紹介です。 JavaScriptライブラリのjQueryプラグイン「CeeBox」により、画像・動画をきれいに表示することが可能です。via：CeeBox
スライドの切り替えが印象的なjQueryの画像ギャラリー「Sliced Image Slider」
画像ギャラリーの切り替えはフェードや横からのスライドなどいろいろあります。 JavaScriptライブラリjQueryプラグインの「Sliced Image Slider」を使用すると、スライスされた画像が上下左右から現れるようなエフェクトが可能です。via：Sliced Image Slider
画像を拡大させるJavaScript「JQuery.iviewer」
画像の細部まで拡大させることにより、商品などを魅力的に見せることが可能です。 今回はJaavScriptライブラリのjQueryプラグイン「JQuery.iviewer」を利用して実現します。via：JQuery.iviewer
JavaScriptで画像の一部を拡大表示する「jLoupe」
ECサイトなどで商品のより細かい部分まで見てもらいたい時があります。 そんな時は、JavaScriptを使用し、拡大表示させてみてはいかがでしょうか。 jQueryのプラグイン「jLoupe」を利用します。via：jLoupe
jQueryで自動ドアが開くような表示をさせるJavaScript「Image splitting effect with CSS and JQuery」
画像の見せ方にはいろいろあります。 Image splitting effect with CSS and JQueryでは、マウスオーバーすると画像が中央から左右に分かれて開くようなチュートリアルを紹介しています。 自動ドアが開くように表示することでユーザーに驚きを与えられるかもしれません。via：Image splitting effect with CSS and JQuery
jQueryでループするスライダーを作る「loopedSlider」
画像や要素をスライドさせて見せるサイトが多くなっています。 JavaScriptライブラリのjQueryプラグイン「loopedSlider」を使用し、ループするスライダーを作ってみましょう。via：loopedSlider
画像にJavaScriptで動くマスクをかけられる「Masked Slider」
画像を印象的にするにはこういった手法もいいかもしれません。 jQueryのプラグイン「Masked Slider」を使用すると、画像の上に動くマスクをかけることができます。via：Masked Slider
ユーザビリティに優れた画像ギャラリーJavaScript「jquery.showcase」
画像ギャラリーは、数多くあふれていますが、発端がLightBoxだったからか、あまりユーザビリティに優れているとはいえません。 jQueryプラグインのjquery.showcaseを使用すると、今何を見ていて、後何枚あるのかを明示することができ、わりとユーザビリティに配慮できます。via：jquery.showcase
画像を拡大させるJavaScript「Zoomple」
JavaScriptライブラリ「jQuery」のプラグインZoompleを使用すると画像のある一部をズームさせることができます。 うまく利用すると商品の細かい部分まで閲覧者に見せることができ、コンバージョンが高まるかもしれません。via：Zoomple
スライドする画像ギャラリーJavaScript「Sliding Image Gallery jQuery Plug-in」
リッチな画像ギャラリーを作りたいという方は多いかと思います。 jQueryプラグインのSliding Image Gallery jQuery Plug-inを利用するとスライドする画像ギャラリーをわりとお手軽に作成可能です。via：Sliding Image Gallery jQuery Plug-in
アイデア勝ち！JavaScriptでビフォーアフター「jQuery Before/After Plugin」
これはアイデアがいいですね。 JavaScriptライブラリjQueryで使用前・使用後みたいな表現が可能になります。via：jQuery Before/After Plugin
JavaScriptで画像ギャラリーを作る「jQuery slideShow plugin」
画像ギャラリーはサイト制作の中でも多く利用するのではないでしょうか。 そのため選択肢の幅を広げ、よりサイトにあったJavaScriptを使うことをお勧めします。 今回はjQuery slideShow pluginを紹介します。via ：jQuery slideShow plugin
JavaScriptで画像のダウンロードを禁止する「dwImageProtector Plugin for jQuery」
画像などをダウンロードさせたくない場合があると思います。 bodyにoncontextmenu="return false"とかすると右クリック時のメニューが表示されなくなったりしますが、ユーザーにとっては迷惑です。 dwImageProtector Plugin for jQueryでは、JavaScriptを使用することで、簡易的に画像をダウンロードできないようにしています。via ：dwImageProtector Plugin for jQuery
こいつは凄い！フルスクリーン縦型画像ギャラリー「jQuery Gallery Slider Plugin」
画像ギャラリーと言うとなんとなくLightBoxに代表されるような見せ方が思い浮かびます。 でもそんなものに飽ききった皆さんに朗報です。 jQuery Gallery Slider Pluginを使用すると、フルスクリーンで縦型の画像ギャラリーを作成できます。via ：jQuery Gallery Slider Plugin
jQueryでLightBoxライク画像ギャラリー「piroBox」
食傷気味のLightBoxですが、まだまだ派生JavaScriptは進化を続けています。 jQueryプラグインの「piroBox」を紹介します。via ：piroBox
jQueryベースのLightBox風ギャラリー「jQuery BigPicture」
懲りずにLightBox風画像ギャラリー jQueryのプラグインを使用したjQuery BigPictureです。via ：jQuery BigPicture
画像をポラロイド風にするJavaScript「jPolaroid」
画像を加工し、ポラロイド風に見せるサイトがあります。 手間をかけずにこれを実現できるjPolaroidを紹介します。via ：jPolaroid
マウスオーバーで画像を拡大させるJavaScript「MagicalHover」
画像の拡大と言えばLightBox・・・と言わずに、こんなJavaScriptはいかがでしょう？ インラインで拡大画像を見せられるMagicalHoverです。via ：MagicalHover
画像が吹き出すようなエフェクトを加えるJavaScript「jQuery-puffy」
昨今JavaScriptを利用することで、画像にさまざまなエフェクトがかけられるようになりました。 jQuery-puffyもそのひとつで、吹き出すような処理をかけられます。via ：jQuery-puffy
魅せる画像スライドショーJavaScript「jQuery GalleryView」
スライドショー的なJavaScriptは多いですが、ここまで魅せるものはなかったように思います。 jQuery GalleryViewはどこを見ているのか、次の画像は何かなど細かい点にも配慮しています。via ：jQuery GalleryView
驚きの画像切り替え！jQueryプラグイン「Jquery.ImageSwitch」
画像の切り替えでユーザーに驚かせることができそうです。 jQueryプラグインのJquery.ImageSwitchはフェードインなどのよくあるパターンだけではなく、ダブルドアと名づけられた切り替え方も可能です。via ：Jquery.ImageSwitch
これは面白い！jQueryで紙芝居のように画像をめくるJavaScript
Create a unique Gallery by using z-index and jQueryで紹介されている画像の見せ方が面白いので紹介します。クリックするたび紙芝居のように画像がめくられていきます。
via :Create a unique Gallery by using z-index and jQuery
jQueryでマウスオーバーを印象的にする：jQuery Animated Menu
マウスオーバー時に効果を与えることは当たり前になっていますが、もうちょっと工夫をするとユーザーの興味を喚起できるかもしれません。 jQueryの.hoverという基本的な手法を利用して、マウスオーバーを印象的にしてみます。via：jQuery Animated Menu
ポロライド写真をばら撒いたように表示するギャラリーJavaScript「Polaroid Photo Viewer」
ポラロイド風に画像を見せると、写真自体を引き立てられます。Polaroid Photo ViewerではjQueryを使用し、簡単にポラロイド風の写真をばら撒いたように表示することが可能です。
via :Polaroid Photo Viewer
画像を様々なエフェクトでフローティングさせるJavaScript「FLOATING IMAGES」
画像ギャラリーの見せ方のひとつにこんな手法があってもよいかもしれません。 jQueryプラグインのFLOATING IMAGESは画像を次々にフローティングさせていきます。via :FLOATING IMAGES
jQueryベースで綺麗なLightBox風JavaScript「ColorBox」
巷に溢れかえるLightBox風ギャラリー。 ColorBoxもそんなJavaScriptの一つですが、colorと名乗るだけあり、綺麗な感じです。via :ColorBox
デザインに優れた画像スライドショーJavaScript「JQUERY SLIDESHOW PLUGIN」
画像ギャラリーは多々ありますが、あまりデザイン的にいいものはありませんでした。 今回のJQUERY SLIDESHOW PLUGINはなかなかデザイン性に優れたものと言えるのではないでしょうか。via :JQUERY SLIDESHOW PLUGIN
画像を左右にスクロールさせられるJavaScript「jQuery Smooth Div Scroll」
画像ギャラリーを作る際にLightBoxを使用する人は多いでしょう。 しかし飽き飽きしている人も多いのも確かです。 たまにはjQuery Smooth Div Scrollのように左右にスクロールさせるのはいかがでしょか？via :jQuery Smooth Div Scroll
JavaScriptで画像を簡単にスクロールさせられる「simplyScroll」
スクロールさせるJavaScriptは多いですが、simplyScrollほど簡単なものは、あまりないでしょう。 JvaScriptライブラリ「jQuery」のプラグインです。via :simplyScroll
背景画像にトランジション効果をつけられるJavaScript「BGTransition」」
背景画像にも何らかの効果をつけられると、面白い表現が可能になりそうです。 BGTransitionは、そんな時手軽に導入が可能です。via :BGTransition
ALTでキャプションをふわりと表示：jQueryプラグイン「jCaption」
画像にキャプションをつけることは多いと思います。 でも、みんなと同じような見せ方は嫌だという方には、こんな方法もあります。 jQueryプラグイン「jCaption」はaltに記述したものを画像の上に乗せて表示できます。via :jCaption
画像ギャラリーにマスクをかけるJavaScript「(mb)MaskedGallery」
画像ギャラリーに多く使われるLightBoxは、開かれたとたんに閉じてしまうユーザーが結構いるようです。 今回紹介するjQueryプラグインの(mb)MaskedGalleryは画像ギャラリーの上に透過PNGでマスクをつけられ、印象的な画像の見せ方が可能です。via :(mb)MaskedGallery
jQueryプラグイン「Easy Slider」でスライダーを簡単導入
スライダーを導入したい。 でも導入は難しそうだからと、見送っていませんか。 jQueryプラグイン「Easy Slider」なら、あなたのサイトでもすぐに使用できます。via :Easy Slider
リンク先の画像をプレビューするJavaScript「imgpreview」
かの有名なLightBoxは画像を一回一回大きく表示します。 そんな時間は必要ない、また、まずはちらっと見たいという方にオススメです。 JavaScriptライブラリjQueryのプラグインimgPreviewでは、リンクされている画像をプレビューさせられます。via :imgPreview
JavaScriptで画像を回転させる「Wilq32.RotateImage」
ただ、写真をずらっと掲載しているだけでは、つまらないという方は多いと思います。 jQueryのライブラリ「Wilq32.RotateImage」では、簡単・手軽に画像を傾けることが可能です。via :Wilq32.RotateImage
アップ画像のどこを見ているかを表示するJavaScript「ImgNavigator」
(mb)ImgNavigator 1.0大きな画像を表示したいし、その画像のどこを見ているか表示させたいという、あなたにお勧めです。 地図とか、商品画像に使用すると便利かもしれません。via :(mb)ImgNavigator 1.0
画像を切り替えるJavaScript「jQuery Slinky Slider」
表示している画像をスムーズに切り替えて表示することができればユーザーの興味を喚起することができます。 jQuery Slinky Sliderは、画像を外部ファイルから読み込んで表示することができます。via :jQuery Slinky Slider
インライン型LightBoxを実現するJavaScript「jQuery.popeye」
昨今LightBoxスクリプトが広まり、さまざまな場所でオーバーレイが登場するのに辟易している人も多いでしょう。 jQuery.popeyeはJavaScriptライブラリ「jQuery」を使用し、ユーザーの視線を妨げない表示方法が可能です。via :jQuery.popeye
画像とキャプションをスムーズに表示するギャラリーJavaScript「s3Slider」
LightBoxが巷にあふれる中、画像をより良く見せたい欲求は高まっていることでしょう。 s3Sliderでは、JavaScriptライブラリ「jQuery」を使用し、画像・キャプションにエフェクトをつけ、閲覧者の興味を喚起する仕組みを提供します。via :s3Slider
jQueryプラグイン「pikachoose」で小気味良い動きのスライドショーを作る
スライド風に画像を見せるJavaScriptは多く広まっています。 今回紹介するpikachooseは、jQueryベースで気持ちの良い動きでギャラリーを表示してくれます。via :pikachoose
jQueryで画像に反射効果を！「Reflection.js for jQuery」
水面に反射させたような画像効果をつけるJavaScriptがはやりました。 ついに、というか、ようやくjQueryでもReflection.js for jQueryで、これが実現可能になったようです。via :Reflection.js for jQuery
画像のキャプションをクールに表示するJavaScript「jQuery Captify Plugin」
画像に説明をつけるキャプションは重要ですが、配置場所は大抵決まっています。 しかし、デザイン性を重視すると画像に乗せたいなど出てくるでしょう。 今回紹介するjQuery Captify Pluginはそれを簡単かつクールに表示可能です。via :jQuery Captify Plugin
jQueryでファンシーなLightBoxクローンを作る「Fancy Zoom」
爆発的な大ヒットとなったLightBoxですが、広まりすぎて先進的なイメージが薄れています。そんな状況を打破すべくなのか、LightBoxのクローンは次々と生まれています。
今回紹介する「Fancy Zoom」もその一つで、昨今流行のJavaScriptライブラリjQueryを使用しています。
via :Fancy Zoom
奥から手前にズームするJavaScript「Spacegallery.js」
最近はappleのcoverflowやらamazonのぐるぐるやら画像の見せ方が豊富になってきました。 今回紹介する「Spacegallery.js」はありそうでなかった、手法かもしれません。 奥から手前にずんずんとズームしながら画像を表示していきます。via : Spacegallery.js
レイヤー表示（？）JavaScript「jParallax」
なんと表現したらよいのか、サンプルを見ていただければなんとなくわかるかと。画像を何枚も重ねて表示可能なほか動きます。そんなjQueryベースのJavaScript「jParallax」です。via : jParallax
jQueryで画像をズームさせる「Pan full size images」
ECサイトでもよく見られる、画像の詳細を拡大させて見せる手法です。今回はJavaScriptライブラリjQueryを使用した「Pan full size images」を紹介します。。
via : Pan full size images
クールなズームエフェクトjavascript「jQZoom」
画像を拡大表示するのにLightBoxを使用するのはもう時代遅れ。 LightBoxではできない指定場所の拡大もできます。 jQZoomはズームエフェクトをクールに実現します。via : jQZoom
クールな画像ギャラリーjavascript「jQuery Gallery」
画像ギャラリーのjavascriptは数あれどここまで凝ったものはなかったのではないでしょうか。 Image Gallery using jQuery, Interface & Reflectionsは、メニュー、サムネイル、リフレクションなど実にさまざまな処理を施します。 その分スクリプトが多くなっていますが。。。via : jQuery Gallery
エフェクト満載の画像ギャラリー系javascript「jQuery Cycle Plugin」
画像ギャラリーといえば「LightBox」ですが、周りで使用している人が多く、食傷気味の人も多いと思います。 jQuery Cycle Pluginでは、過剰ともいえるほどのエフェクトが使用できます。 自分だけのオリジナルを簡単に作成したい方にお勧めの画像ギャラリー系Javascriptです。via : jQuery Cycle Plugin
画像にグラデーションをかけるjavascript「Transparent Gradients」
画像を編集するさいにグラデーション加工をする場合があるかもしれません。 Transparent Gradientsなら簡単に透明なグラデーションを付けることができます。via : Transparent Gradients
ページめくり風の画像ギャラリーを作成するjavascript「jqShuffle」
LightBoxの登場にインパクトがあったからか画像の表示方法がワンパターン化している気がします。 今回紹介するjqShuffleでは、画像を1枚1枚めくるようなギャラリーを作成することができます。 Flashではありそうですが、Javascriptでは一風味変わった表示方法です。via : jqShuffle
重い画像を順番に読み込むjavascript「Lazy Load Plugin for jQuery」
ブロードバンドが浸透しているとはいえ、画像を多く使用するとページが重くなり、表示速度が遅くなります。 また解像度を高くしたり、画像サイズを大きくしても重くなります。 Lazy Load Plugin for jQueryはディスプレイ範囲の画像のみを順番に表示するためページの読み込む時間を短縮できます。via : Lazy Load Plugin for jQuery
画像の大きさをウィンドウ幅に合わせて変更するjavascript「autoscale」
リキッドレイアウトではウィンドウによって、エラスティックレイアウトではフォントによってデザインが変更されます。 このようなレイアウトを採用している場合画像の幅が微妙になることがあるかもしれません。 autoscaleはウィンドウ幅に合わせて画像の幅も自動に変更されます。via : autoscale
jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin」
Web2.0を個人レベルで実感させてくれたのが「LightBox」だと思います。 今では画像を表示する多くのブログで使用されています。 今回はこれをjQueryで実現したjQuery lightBox pluginを紹介します。via : jQuery lightBox plugin
超簡単にパズルを作成するjavascript「Creating A Sliding Image Puzzle」
息抜きにパズルを作成しようと思うと従来は、画像をスライスする必要がありました。 Creating A Sliding Image Puzzleは画像1枚から超簡単にパズルを作成できます。via : Creating A Sliding Image Puzzle
1枚の画像から自動でパズルを作成するjavascript「jqPuzzle」
サイト制作において重要なのは、訪問者を飽きさせず滞留させることでしょう。 この観点から言えばゲームなどがあってもいいのかもしれません。 jqPuzzleは1枚の画像からスライディングパズルを自動で作成します。via : jqPuzzle
超簡単な画像ズームエフェクトjavascript「zoomi」
画像を使用することの多いWebでは、見せ方に工夫することが必要になります。 昨今、LightBoxをはじめとするツールが多くなりましたが、導入が面倒でした。 今回紹介するzoomiは、ほとんと手間をかけずに画像をズームさせるエフェクトをjavascriptでつけることができます。via : zoomi
jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin(balupton edition)」
LightBoxをjQueryで実現するJavaScriptは以前jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin」で紹介しましたが、今回紹介する方が高機能で柔軟性があるかもしれません。jQuery Lightbox Plugin (balupton edition)です。
