JavaScriptライブラリのjQueryのプラグインを利用して出来るサンプルです。
jQueryは、John Resig によって開発されたJavascriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。
ここでは、画像関連のjQueryプラグインを紹介しています。

スクロールした際に画像をぼかすことができるjQueryプラグイン「crossfade.js」

スクロールした際に画像をぼかすことができるjQueryプラグイン「crossfade.js」

スクロールした際になんらかのエフェクトがあると注目を浴びさせることができると思います。
jQueryプラグインのcrossfade.jsを利用すると画像をぼかして、印象的にすることが可能です。

via:crossfade.js

レスポンシブウェブデザイン時代のLightbox!jQueryプラグイン「Strip」

レスポンシブウェブデザイン時代のLightbox!jQueryプラグイン「Strip」

PC、スマホにワンソースで対応するレスポンシブウェブデザインが流行るとともに画像拡大の定番だったLightboxを見かけなくなりました。 理由の一つとして操作性がモバイル端末でよくなかったことでしたが、jQueryプラグインのStripがそれを解消してくれるかもしれません。 これは画面の一部のみを覆い、操作性を向上させることで離脱を下げられることができます。

via:Strip

写真を綺麗に見せられる!書籍風にページめくりをさせるjQueryプラグイン「OneBook3D」

写真を綺麗に見せられる!書籍風にページめくりをさせるjQueryプラグイン「OneBook3D」

サイトでよく使用する写真。これを綺麗に表示させたいですよね。jQueryプラグインの「OneBook3D」を利用すると書籍風のページめくりができるなどハイセンスなギャラリーを作成できます。

via:OneBook3D

写真の360度ビューを実現するjQueryプラグイン「rollerblade.js」

写真の360度ビューを実現するjQueryプラグイン「rollerblade.js」

ECサイトなどで商品を360度のアングルで見せることがあるかと思います。 jQueryプラグインのRollerblade.jsを使用すると、360度ビューの実現が簡単にできます。

via:Rollerblade.js

マウス位置に応じて写真のぼかしを変化させるjQueryプラグイン「jquery-opacity-by-mouse-location」

マウス位置に応じて写真のぼかしを変化させるjQueryプラグイン「jquery-opacity-by-mouse-location」

マウスの場所に応じて写真をちらっと見せたいというような欲求が稀に生じるかもしれません。 そんな時はjQueryプラグインの「jquery-opacity-by-mouse-location」はいかがでしょうか。

via:jquery-opacity-by-mouse-location

画像を3D風に切り替えながらスクロールさせるJavaScript「jQuery Tilted Page Scroll」

画像を3D風に切り替えながらスクロールさせるJavaScript「jQuery Tilted Page Scroll」

画像の切り替え方に飽きがきた方には、jQueryプラグインjQuery Tilted Page Scrollが良いかもしれません。
スクロールしていくと、3D風に折りたたんで、画像が切り替わっていきます。

via:jQuery Tilted Page Scroll

画像にさくっとモザイクをかけるJavaScript「pixelate.js」

画像にさくっとモザイクをかけるJavaScript「pixelate.js」

わりとくだらない系ですが、画像にモザイクをかけ、マウスオーバーで元画像を表示するjQueryプラグイン「pixelate.js」です。
ちょっと隠しておきしたときなどに役立つかもしれません。

via:pixelate.js

コンテンツを一風変わったスクロールで切り替えられるJavaScript「multiScroll.js」

コンテンツを一風変わったスクロールで切り替えられるJavaScript「multiScroll.js」

スライドするコンテンツはかなり出回っているかと思いますが、jqueryプラグインのmultiscroll.js - split multi-scrolling pages pluginを利用すると左右に分割されたスライドが上下に印象的に表示されてきます。

via:multiscroll.js

画像などの要素説明をオーバーレイ表示で印象深く見せられるjQueryプラグイン「Chardin.js」

画像などの要素説明をオーバーレイ表示で印象深く見せられるjQueryプラグイン「Chardin.js」

WEBの表示領域は膨大にあるといってもごちゃごちゃしすぎると見ている側には鬱陶しいものです。 そこで、説明をオーバーレイで見せ、すっきりかつ印象的にしちゃいましょう。 jQueryプラグインのChardin.jsであれば簡単なことこの上なしです。

via:Chardin.js

jQueryプラグインを利用したレスポンシブでクールな画像ギャラリー「least.js」

jQueryプラグインを利用したレスポンシブでクールな画像ギャラリー「least.js」

レスポンシブなサイトが増えている昨今、画像ギャラリーの見せ方に悩む人は多いのではないでしょうか。 least.jsはそんな悩みを一掃してくれるかもしれません。 サムネイルをグリッド配置し、タップ時に同じページ内で拡大画像を表示してくれるため、ユーザーにもストレスがなくなりそうです。

via:least.js

テキストや画像にぼかしを入れて興味をそそれるjQueryプラグイン「SPOILER ALERT!」サンプル

テキストや画像にぼかしを入れて興味をそそれるjQueryプラグイン「SPOILER ALERT!」

人間、隠されているものって気になりますよね。 jQueryプラグインのSPOILER ALERT!は、テキストや画像に簡単にぼかしを入れられ、クリックで表示させられます。

via:SPOILER ALERT!

画像に歪んだ形のマスクをかけられるJavaScript「MASKEW」サンプル

画像に歪んだ形のマスクをかけられるJavaScript「MASKEW」

画像にマスクをかける際にはPhotoshopなどで加工をしなければなりません。
JavaScriptライブラリのMaskewを利用すれば、簡単に歪んだ感じのマスクを掛けられるようになり、画像を一風変わった形で表示できます。

via:Maskew

意外に便利!?画像をグリッドに綺麗に散りばめてくれるjQueryプラグイン「Photoset Grid」サンプル

意外に便利!?画像をグリッドに綺麗に散りばめてくれるjQueryプラグイン「Photoset Grid」

画像を配置する際に大きさ同じでグリッド形式にしてもつまらなくなりますよね。 jQueryプラグインのjQuery Photoset Grid - Style Hatchを利用すると大きさをバラバラにして綺麗に散りばめて配置してくれます。 これで一味違った画像の見せ方が簡単にできますね。

via:jQuery Photoset Grid

画像のスワイプにも対応したスマホ時代のjQueryプラグイン「Swipebox」サンプル

スマホでスワイプ形式の画像ギャラリーを利用できるjQueryプラグイン「TouchSlider」

スマホでも画像ギャラリー的なことやりたいですよね。 jQueryプラグインのTouchSlider ? JavaScript slide contentを利用するとスマホでスワイプ形式のスライドギャラリーを導入することができます。 もちろんPCでも動作しますので、レスポンシブ・ウェブデザインにも良いかもしれません。

via:TouchSlider ? JavaScript slide content

画像のスワイプにも対応したスマホ時代のjQueryプラグイン「Swipebox」サンプル

画像のスワイプにも対応したスマホ時代のjQueryプラグイン「Swipebox」

PCでの画像拡大と言えばLightBox系が席巻していましたが、スマホだとなんだか使いにくいものでした。 Swipeboxはスワイプ動作による画像間の切り替えも可能で、新時代の到来を予感させます。 なおPCでもキーボードによる遷移ができたりします。

via:Swipebox

画像を徐々に読み込みながら、タイル状に並べていくjQueryプラグイン「stalactite」サンプル

画像を徐々に読み込みながら、タイル状に並べていくjQueryプラグイン「stalactite」

Pinterestが流行ってからタイル状に配置するデザインが増えました。 新はてブのように目線がばらつくという指摘もありますが、画像だけを見せるのであれば有効な手段なのではないでしょうか。 今回紹介する「stalactite : A jQuery plugin」では、画像だけでなく、iframeなども徐々に読み込んでいくというエフェクトもかけてくれます。

via:stalactite : A jQuery plugin

IE6もOK!jQueryプラグインでぐりんぐりんする画像切り替えを作るサンプル

IE6もOK!jQueryプラグインでぐりんぐりんする画像切り替えを作る

最近のサイトではメインビジュアルにもよく画像の切り替えが利用されています。 これをjQueryプラグインbox-sliderでぐりんぐりん切り替えてしまいましょう。 頭を悩ませるIE6も3Dエフェクト以外は対応しています。

via:box-slider

エフェクト満載!画像をタイル状に切り替えるjQueryプラグイン「jq-tiles」サンプル

エフェクト満載!画像をタイル状に切り替えるjQueryプラグイン「jq-tiles」

画像の切り替えに飽きてきた方には今回紹介するjq-tilesは良いかもしれません。 画像をタイル状に多彩なエフェクトで切り替えてくれ、インパクトが出てきます。

via:jq-tiles

画像をヴィンテージ加工してしまうjQueryプラグイン「vintageJS」サンプル

画像をヴィンテージ加工してしまうjQueryプラグイン「vintageJS」

画像を格好良く見せたいというのはサイト運営者の常です。 rendro/vintageJSを利用すれば、画像をヴィンテージ風に加工してくれます。

via:rendro/vintageJS

写真をミニチュア模型風にするjQueryプラグイン「tiltShift.js」サンプル

写真をミニチュア模型風にするjQueryプラグイン「tiltShift.js」

instagramなどの写真加工アプリでも多い効果で写真をミニチュア模型みたいにするチルトシフトをjQueryプラグインでも簡単にできます。 加工するのが面倒なものでもtiltShift.jsなら一瞬で実現できます。

via:SeuratJS

あっという間に画像をドット絵に!jQueryプラグイン「SeuratJS」サンプル

あっという間に画像をドット絵に!jQueryプラグイン「SeuratJS」

画像をドットっぽく加工するとひと味違った見た目になり、印象的です。 それをjQueryでやってしまうプラグイン「SeuratJS」を紹介します。

via:SeuratJS

画像に波状のエフェクトをかけられるJavaScript「lake.js」サンプル

画像に波状のエフェクトをかけられるJavaScript「lake.js」

タイトルそのまま、ゆらゆらと波状のエフェクトを画像にかけることができるjQueryプラグインlake.jsです。 なんかゆらゆらしたい時にどうぞ。

via:lake.js

画像を背景いっぱいに敷くjQueryプラグイン「Fullscreen Background for jQuery」サンプル

画像を背景いっぱいに敷くjQueryプラグイン「Fullscreen Background for jQuery」

画像を背景に敷き詰めることでインパクトのあるデザインになります。 これを実現するのがjQuery plugin: Fullscreen Background - Gaya Designです。
ウィンドウサイズにあわせて自動でフルスクリーンで表示してくれます。。

via:jQuery plugin: Fullscreen Background - Gaya Design

要素をランダムにフェードインさせていくjQueryプラグイン「champagne.js」サンプル

要素をランダムにフェードインさせていくjQueryプラグイン「champagne.js」

画像などの要素をただ並べていくだけだとなんだか寂しい。 そんな時は徐々にフェードインさせてみてはいかがでしょうか? champagne.jsはランダムに要素をフェードインさせてくれます。

via:champagne.js

要素を小刻みに動かすjQueryプラグイン「jQuery Wiggle plugin」サンプル

要素を小刻みに動かすjQueryプラグイン「jQuery Wiggle plugin」

たまに要素を動かしたくなることありますよね? iPhoneでアプリをロングタップしたような動きを実現するjQuery Wiggle pluginです。

via:jQuery Wiggle plugin

jQueryプラグインで背景画像をスライドショー「Backstrech」」サンプル

jQueryプラグインで背景画像をスライドショー「Backstrech」

背景画像全面に画像を置いて、切り替えるとインパクトがあります。 また写真さえよければ、その上にテキストを載せるだけでも良いデザインにすることができちゃいます。 jQueryプラグインのBackstretchはもともと画像をウィンドウ幅にあわせて背景ぴっちりに表示してくれるスクリプトですが、これをスライドショーにも活用できます。

via:Backstretch

画像の一部をズームさせられるJavaScript「ImageLens」サンプル

画像の一部をズームさせられるJavaScript「ImageLens」

画像の細かい部分まで見せたいという時にjQuery Topbar message Plugin Demoを利用すると便利です。 ECなどのサイトで有効そうです。

via:jQuery Topbar message Plugin

簡単・軽量!画像ズームjQueryプラグイン「Zoom」サンプル

簡単・軽量!画像ズームjQueryプラグイン「Zoom」

ECなど表示スペースは限られているものの商品の細かい部分は見せたいという要望があると思います。 これを簡単・軽量なjQuery image zooming pluginが解決してくれます。

via:jQuery image zooming plugin

記述がシンプルなラウンド型ギャラリーJavaScript「Rondell」サンプル

記述がシンプルなラウンド型ギャラリーJavaScript「Rondell」

奥行き感を出しながら画像を回して表示させたい。 そんな時にはシンプルな記述で簡単導入できる「jQuery Rondell」を採用しましょう。

via:jQuery Rondell

画像に手軽にマウスオーバー効果を付けられるJavaScript「Hoverizr」サンプル

YouTubeの動画を背景にフルスクリーンで表示するJavaScript「jquery.mb.YTPlayer」

画像のマウスオーバーをひとつひとつ作るのは面倒に思う時があります。 そんな時はjQUeryプラグインのHoverizrを利用するのも手段のひとつでしょう。

via:Hoverizr

YouTubeの動画を背景にフルスクリーンで表示するJavaScript「jquery.mb.YTPlayer」サンプル

YouTubeの動画を背景にフルスクリーンで表示するJavaScript「jquery.mb.YTPlayer」

動画を背景全面で再生し、テキストを乗せるとそれだけでかっこ良く見えそうです。 jquery.mb.YTPlayerはこれを簡単に実現できるJavaScriptです。

via:jquery.mb.YTPlayer

シンプルでも最低限な機能がついた画像スライダーJavaScript「Rhinofader」サンプル

シンプルでも最低限な機能がついた画像スライダーJavaScript「Rhinofader」

過剰な画像スライダーまたは画像ギャラリーはいらない。 再生して、コントローラーを表示して、時間を指定できればいい。 そんな人にお勧めRhinofader: A simple jQuery fade sliderです。

via:Rhinofader

背景画像をスライドショーさせるJavaScript「Vegas Background jQuery Plugin」サンプル

背景画像をスライドショーさせるJavaScript「Vegas Background jQuery Plugin」

背景画像を動かすことでインパクトのあるサイトが構築できます。 Vegas Background jQuery Pluginはフルスクリーンで背景をスライドさせられます。 さらにドットのオーバーレイをかけられるので、カッコイイ感じになります。

via:Vegas Background jQuery Plugin

なんかもうカッコイイ!フルスクリーン画像ギャラリー「jmFullWall」サンプル

なんかもうカッコイイ!フルスクリーン画像ギャラリー「jmFullWall」

フルスクリーンで画像を並べ、クリックすると拡大画像を表示する。 そんなのを作りたい方多いのではないでしょうか。 jmFullWall | FullZoom Portfolio with jQueryを利用すれば、簡単にこれが導入できてしまいます。

via:jmFullWall

切り替え時のエフェクトが面白い画像ギャラリーJavaScript「Jquery Slider with transition effects」サンプル

切り替え時のエフェクトが面白い画像ギャラリー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」サンプル

スマートフォンの画像ギャラリーにも使える!タッチでスライドさせられる「Roto」

昨今のスマートフォンブームで、対応を迫られることも多い、画像ギャラリーなどのスライド機能。 既存のギャラリー系JavaScriptだとタッチがうまく取れないこともあります。 そんな時は、Rotoを使用してみてはいかがでしょうか。。

via:Roto

スマートフォンも対応!本をめくるような表現ができるJavaScript「FlipPage」サンプル

スマートフォンも対応!本をめくるような表現ができるJavaScript「FlipPage」

本をめくるような表現を付けられるJavaScriptです。 FlipPage: Tournez les pages sur votre iPad !では、iPhoneをはじめ、Androidなどでもタップでめくることが可能です。。

via:FlipPage

思わず“いいね!”したくなる高機能画像ギャラリーJavaScript「Diapo」サンプル

思わず“いいね!”したくなる高機能画像ギャラリーJavaScript「Diapo」

画像ギャラリーは数あれど、ここまで高機能なライブラリはなかったのではないでしょうか。 jQueryプラグインのDiapoは多くのエフェクトやスマートフォン対応、円型メーター、ナビゲーション、ページネーション、サムネイル表示などの機能や各種設定を細かくできます。 困った時はまずこのプラグインを検討してみるのもいいかもしれません。

via:Diapo

機能十分の軽量JavaScriptスライダー「FLEXSLIDER」サンプル

機能十分の軽量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 Fullscreen Slideshow with zoom/slide animation | jQuery Pluginsは、これを可能にし、またズームなどのエフェクトを全自動で付けてくれます。

via:jQuery Fullscreen Slideshow with zoom/slide animation | jQuery Plugins

シンプルに画像をスライドさせるJavaScript「iSlider」サンプル

画像を自動でモノクロに!「$.GreyScale jQuery Plugin」

画像を自動でモノクロにし、マウスを乗せるとカラーに戻る$.GreyScale jQuery Pluginを紹介します。 これを利用すると、画像ギャラリーをうまく見せることができそうです。

via:$.GreyScale jQuery Plugin

シンプルに画像をスライドさせるJavaScript「iSlider」サンプル

シンプルに画像をスライドさせるJavaScript「iSlider」

シンプルな画像スライダーをお探しの方はjQueryプラグインのiSlider - Photo Slider - jQuery Pluginはいかがでしょうか。 設定が簡単なので、選択肢の一つとして検討ください。

via:iSlider

本をめくるようなエフェクトで画像を切り替えるJavaScript「mLivre」サンプル

本をめくるようなエフェクトで画像を切り替えるJavaScript「mLivre」

読み物っぽい画像を切り替えるとき、本をめくるように切り替えられたらイメージがわかりやすくなります。 jQueryライブラリのmLivreを利用すると擬似的に実現可能です。

via:mLivre

3Dな感じで画像を回せるjQueryプラグイン「Professor Cloud」サンプル

3Dな感じで画像を回せるjQueryプラグイン「Professor Cloud」

トップページとかで告知エリアとしてメインビジュアルを大きい画像で回すケースが見受けられます。 多くがFLASHで実現しているかと思いますが、jQueryプラグインのProfessor Cloudでも実現が可能です。

via:Professor Cloud

マス目状の画像ギャラリーを作成できるjQueryプラグイン「Mosaiqy: a nice jQuery plugin」サンプル

マス目状の画像ギャラリーを作成できるjQueryプラグイン「Mosaiqy: a nice jQuery plugin」

画像ギャラリーを使用する際に、多くの画像を一覧で見せたいという希望があるかもしれません。 従来までのものだと、初期時にあまり多くを非表示できませんでした。 そこで、一度に多くの画像を見せられるjQueryプラグインMosaiqy: a nice jQuery pluginを紹介します。

via:Mosaiqy: a nice jQuery plugin

jQueryでシンプルにマウスオーバー時に画像をスライドさせるサンプル

jQueryでシンプルにマウスオーバー時に画像をスライドさせる

マウスオーバーでちょっとエフェクトをかけたい。 でも、jQueryプラグインを使うほどの機能はいらないということがあるかと思います。 今回はプラグインを使用せず、シンプルにマウスオーバー時に画像をスライドさせたいと思います。

via:Useful image hover slide effect with jQuery

必要最低限でよさげな画像ギャラリーJavaScript「Craftyslide」サンプル

必要最低限でよさげな画像ギャラリーJavaScript「Craftyslide」

最近は機能もファイルサイズももっさりな画像ギャリーJavaScriptが増えていますが、Craftyslide - A tiny jQuery slideshow pluginは2kbかつシンプルな記述で必要最低限な表現が可能です。

via:Craftyslide

マウスオーバーした画像をくっきり見せるJavaScript「Gallery Focus jQuery experiment」サンプル

マウスオーバーした画像をくっきり見せるJavaScript「Gallery Focus jQuery experiment」

マウスを当てたとこの画像だけくっきり見せたいという方にはこちら。 Gallery Focus jQuery experimentを利用するとマウスオーバーした周辺に対して適用されるので、幻想的かつ印象的な画像ギャラリーになりそうです。

via:Gallery Focus jQuery experiment

横スクロールのサイトを作成できるJavaScript「X-Rhyme.js」サンプル

横スクロールのサイトを作成できる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風に見せられるJavaScript「CoverScroll jQuery plugin」

iTunesで曲の表紙を一覧で見せる手法としてカバーフローなるものがあります。 これをjQueryで実現したのがCoverScroll jQuery pluginです。 ※マウスホイールにも対応

via:CoverScroll jQuery plugin

いいね!Android Marketチックな画像スライド「Twilight Slideshow」サンプル

いいね!Android Marketチックな画像スライド「Twilight Slideshow」

Android マーケットのようにメイン画像を大きく、前後の画像は透明にして横に並べるスライドは印象的で、クリック率の向上に役立ちそうです。 今回はこれをjQueryで実現するTwilight Slideshowを紹介します。 スマフォ端末でフルスクリーンで表示させると面白そうです。

via:Twilight Slideshow

画像の好きなとこを拡大させられるjQueryプラグイン「ax-zoomer」サンプル

画像の好きなとこを拡大させられるjQueryプラグイン「ax-zoomer」

jQueryで画像の特定部分を拡大させるプラグインは多々ありますが、今回紹介するax-zoomerはシンプルかつマウスホイール対応となかなか便利なものです。

via:ax-zoomer

appleライクなカバフロー画像ギャラリー「FlowGallery jQuery Plugin」サンプル

appleライクなカバフロー画像ギャラリー「FlowGallery jQuery Plugin」

カバーフローというappleでよく使われるUIがあります。 見ているものを目立たせ、かつほかに何があるかわかりやすいものです。> これを簡単に実現できるjQueryプラグイン「FlowGallery jQuery Plugin」を紹介します。

via:FlowGallery jQuery Plugin

画像にマウスオーバーするとキラーンとさせるjQueryプラグイン「jQuery Gloss」サンプル

画像にマウスオーバーするとキラーンとさせるjQueryプラグイン「jQuery Gloss」

画像にマウスオーバーした際にひと工夫したい。 そんな時にはjQuery Glossです。 キラーンとさせますよ、キラーン★

via:jQuery Gloss

jQueryで、スマートな画像スライダー「MobilySlider」サンプル

jQueryで、スマートな画像スライダー「MobilySlider」

見せ方、UIがスマートな画像スライダーJavaScriptを紹介します。 jQueryプラグインMobilySliderです。

via:MobilySlider

印象に残る画像スライダーを作れるjQueryプラグイン「FancyMoves a new jQuery Product Slider」

印象に残る画像スライダーを作れる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に使えそうな画像切替jQueryプラグイン「Awkward Viewline -- A jQuery Plugin」

昨今VAで画像を切り替えるのが多くなっていますが、Awkward Viewline -- A jQuery Pluginを使用するとウィンドウ幅100%で画像切替が可能になり、印象的なVAが導入できそうです。

via:Awkward Viewline

画像をマトリックス風にしちゃう!jQueryプラグイン「jQuery Matrix」

画像をマトリックス風にしちゃう!jQueryプラグイン「jQuery Matrix」

画像をマトリックスにできます! ・・・いまさら何でって感じですが。 jQuery Matrixを使用すると画像をモザイク化できるので、ひと味違う様に見せるのにはいいのではないでしょうか。

via:jQuery Matrix

ナビゲーションもわかりやすいLightBox系JavaScriptギャラリー「Thumbox」

ナビゲーションもわかりやすいLightBox系JavaScriptギャラリー「Thumbox」

LightBoxが流行り始めていくらかの時が流れ亜種がますます増えています。 今回紹介するThumboxもそんな一つではありますが、読み込まれている画像の数を明示できるなどナビゲーションが分かりやすくなっているのが特長です。

via:Thumbox

3Dで画像をぐるぐる回せるJavaScript「jQuery k3dCarousel plugin」

3Dで画像をぐるぐる回せるJavaScript「jQuery k3dCarousel plugin」

画像を多く表示させると見せ方に悩むかもしれません。 そんな時jQuery k3dCarousel pluginを使用すると一味違った感じの印象を与えられます。 3Dぽくぐるぐると回っていきます。

via:jQuery k3dCarousel plugin

画像にスポットライト風のマスクをかけられるJavaScript「Spotlight jquery plugin」

画像にスポットライト風のマスクをかけられるJavaScript「Spotlight jquery plugin」

画像に光を当てたような効果を与えられるJavaScriptSpotlight jquery pluginを紹介します。 これにより、画像全体をうっすら見せ、マウスを乗せた部分だけチラ見させられるようになります。

via:Spotlight jquery plugin

2.8kbの洒落たjQuery画像ギャラリープラグイン「Orbit」

2.8kbの洒落たjQuery画像ギャラリープラグイン「Orbit」

画像ギャラリー系のプラグインは重い場合がありますが、今回のOrbit: jQuery Image Slider Plugin from ZURBは、わずか2.8kbで使用方法も簡単で、エフェクトもあり良いこと満載です。

via:Orbit

ちょっとシャレた画像ギャラリーのjQueryプラグイン「desSlideshow」

ちょっとシャレた画像ギャラリーのjQueryプラグイン「desSlideshow」

ちょっとオシャレなあなたには、こんな画像の見せ方もいいのではないでしょうか? jQueryプラグイン「desSlideshow」で一味違う画像ギャラリーを作ってみましょう。

via:desSlideshow

多様な切り替えエフェクトがあるjQueryの画像ギャラリープラグイン「jqFancyTransitions」

多様な切り替えエフェクトがあるjQueryの画像ギャラリープラグイン「jqFancyTransitions」

jQueryの画像ギャラリープラグインの中でも、ここまで多様な切り替えフエフェクトがあるものはそう多くはないでしょう。 Image gallery with fancy transitions effectsはjQueryを使用して、短冊状に画像を切り替えてくれます。

via:Image gallery with fancy transitions effects

サムネイルをドラッグさせ大きな画像を省スペースで表示するJavaScript「jQuery Image Scroller Plugin」

サムネイルをドラッグさせ大きな画像を省スペースで表示するJavaScript「jQuery Image Scroller Plugin」

ECで縦長の、特にモデルが着用した画像を見せたい場合はスペースをとりがちです。 一方で、多くの画像を一覧で見せたいという願望もあるかと思います。 そんな悩みを解消するのが、jQuery Image Scroller Pluginです。 大きな画像を指定の大きさで表示させ、隠れた部分はサムネイルのドラッグで表示させられます。

via:jQuery Image Scroller Plugin

2.7kbの軽量画像ギャラリーJavaScript「Easy Gallery for jQuery」

2.7kbの軽量画像ギャラリーJavaScript「Easy Gallery for jQuery」

画像ギャラリーのJavaScriptも豊富に出回り、機能がますますリッチになっています。 でももっとシンプルで軽いものが良いという方もいるかと思います。 Easy Gallery for jQueryは2.7kbの軽量画像ギャラリーです。

via:Easy Gallery for jQuery

背景画像を動かすjQueryプラグイン「bgFlow」

背景画像を動かすjQueryプラグイン「bgFlow」

わりとこだわった背景のデザインの場合、それに一手間加えるとさらに印象的になります。 その手段のひとつしてjQueryプラグインの[jQuery] bgFlow plugin | Le blog d'Hezadを紹介します。 これを利用するとカーソル位置に合わせて画像を動かすことが可能になります。

via:[jQuery] bgFlow plugin

リール式画像ギャラリーJavaScript「jReelGallery -- Cross browser fluid jQuery image gallery」

リール式画像ギャラリーJavaScript「jReelGallery」

画像ギャラリーといえば、画像のサムネイルがずらっとならんで・・・みたいのが多いと思います。 そんな中で、今回紹介するjReelGalleryは一風変わった表現が可能です。

via:jReelGallery

2つ1組の要素を同時にスライドさせられるjQueryプラグイン「dualSlider」

2つ1組の要素を同時にスライドさせられるjQueryプラグイン「dualSlider」

画像などメディア部分と説明するテキスト部分を分割したいという人もいるかと思います。 jQueryプラグインの「dualSlider」では、これを実現してくれます。
これにより画像にテキストを乗せたり、解説テキストを十分に記述することができます。

via:dualSlider

色々なエフェクトがある画像ズームJavaScript「Cloud Zoom」

色々なエフェクトがある画像ズームJavaScript「Cloud Zoom」

画像をズームさせることで、小さなスペースで詳細まで見せることが可能です。 今回紹介するProfessor Cloudは軽量かつ簡単にズームをさせられます。

via:Professor Cloud

jQueryで画像を拡大させるJavaScript「Featured Image Zoomer」

jQueryで画像を拡大させるJavaScript「Featured Image Zoomer」

ECサイトなどで使用される、画像にマウスを乗せると拡大するあれ。 jQueryプラグイン「Featured Image Zoomer」で実現しましょう。

via:Featured Image Zoomer

印象的にサムネイルを魅せられるjQueryチュートリアル via Scrollable Thumbs Menu with jQuery

印象的にサムネイルを魅せられるjQueryチュートリアル via Scrollable Thumbs Menu with jQuery

まずは見ていただいた方がいいかもしれません。(サンプル) このような印象的なサムネイルの魅せ方をJavaScriptライブラリjQueryで実現しています。 上記のようなアパレルだけでなく、ブランド志向の商品・サービスに使えそうです。

via:Scrollable Thumbs Menu with jQuery | Codrops

もうFLASHはいらない!?画像切替えJavaScript「jQuery Feature Carousel plug-in 」

もう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「Slide Scale」

シンプルに画像を見せるためのギャラリーJavaScriptを紹介します。 jQueryプラグインのSlideScaleです。

via:SlideScale

ユニークなエフェクトがある画像ギャラリーJavaScript「COIN SLIDER」

ユニークなエフェクトがある画像ギャラリーJavaScript「COIN SLIDER」

画像ギャラリーのJavaScriptがあふれる中、少しでも特徴感を出したいものです。 Coin Slider: jQuery Image Slider Plugin with Unique Effectsは少し変わった切り替えエフェクトを持つ、プラグインです。 これを利用して、オリジナル感を出してみてはいかがでしょうか。

via:Coin Slider

JavaScriptでスクラッチゲームみたいなことが可能な「jScratchcard plugin」

JavaScriptでスクラッチゲームみたいなことが可能な「jScratchcard plugin」

クーポンや宝くじについていて、コインなどで削るとあたりとか表示されるスクラッチ。 それをJavaScriptで実現したScratchcard (Scratchcard effect on image) pluginです。

via:Scratchcard (Scratchcard effect on image) plugin

必要最低限の機能が揃った画像ギャラリーJavaScript「Nivo Slider」

必要最低限の機能が揃った画像ギャラリー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「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」

要素を切り替えるJavaScriptは多くありますが、自分の好みが見つからないかもしれません。 今回紹介するjShowOff: a jQuery Content Rotator Pluginも選択肢のひとつにしていただければと思います。

via:jShowOff: a jQuery Content Rotator Plugin

画像のキャプションを画像から飛び出るように表示するJavaScript「jQuery Drop Captions Plugin」

画像のキャプションを画像から飛び出るように表示するJavaScript「jQuery Drop Captions Plugin」

画像にキャプションを付けることでユーザーに配慮することが可能です。 JavaScriptライブラリのjQueryプラグインのjQuery Drop Captions Pluginを使用すると、画像から飛び出すようにキャプションを表示できます。

via:jQuery Drop Captions Plugin

jQueryで簡単かつビジュアルに長けたLightBox「Visual LightBox JS」

jQueryで簡単かつビジュアルに長けたLightBox「Visual LightBox JS」

jQueryを使用してFacebook風、Vista風、Mac風のLightBoxを簡単に作れる「Visual Lightbox JS」です。 これ、何がすごいってローカルで動くプログラムで必要なファイルをすべて生成しちゃうってとこ。 手間がかかる画像加工もhtmlの記述もいりません。

via:Visual Lightbox JS

画像を背景に100%で表示させるJavaScript「fullscreenr」

画像を背景に100%で表示させるJavaScript「fullscreenr」

画面いっぱい背景画像を使いたいことはありませんか? JavaScriptライブラリのjQueryプラグイン「fullscreenr」を使用することで、導入することが可能です。

via:fullscreenr

簡単導入!画像をズームさせるJavaScript「loupe | a jQuery image magnifier」

簡単導入!画像をズームさせるJavaScript「loupe | a jQuery image magnifier」

ECサイトなどでよく使用されている画像の一部分を拡大表示する手法。 これを簡単に導入できるloupe | a jQuery image magnifierを紹介します。

via:loupe | a jQuery image magnifier

画像の側にテキストを回り込ませるJavaScript「jQSlickWrap」

画像の側にテキストを回り込ませるJavaScript「jQSlickWrap」

画像にテキストを回り込ませると、通常テキストは四角に区切られたエリア単位となります。 円や変な形状の画像のすぐ側に沿って回り込ませたい・・・そんなあなたに jQueryプラグインのjQSlickWrapです。

via:jQSlickWrap

画像をクロスフェードさせるJavaScript「ImageFadingSlider」

画像をクロスフェードさせるJavaScript「ImageFadingSlider」

画像のシンプルな見せ方としてクロスフェードを使用するケースは多いのではないでしょうか? それを簡単に行えるのが、jQueryプラグインのImage Fader jQuery plugin - wingtechです。

via:Image Fader jQuery plugin - wingtech

マウスオーバーした要素にスポットライトを当てるJavaScript「Making a Cool Spotlight Effect with jQuery」

マウスオーバーした要素にスポットライトを当てる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

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」

ウィンドウサイズに合わせて要素をきれいに配置する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「imBookFlip」

複数の画像を表示する際に、本をめくるような効果を与えると印象的になります。 JavaScriptライブラリjQueryのプラグイン「GrasshopperPebbles.com Demos: imBookFlip」で実現可能です。

via:GrasshopperPebbles.com Demos: imBookFlip

スライドショー風に背景画像を見せるJavaScript「jQuery maxImage plugin」

スライドショー風に背景画像を見せるJavaScript「jQuery maxImage plugin」

背景画像をスライドショー風に見せるとサイトが印象的に見えます。 jQuery maxImage plugin: DemoはJavaScriptによりターゲット内の画像を最大表示してくれます。 これを利用して背景画像をスライドショーにします。

via:jQuery maxImage plugin: Demo

画像とテキストの組合せの見せ方を変えるJavaScript「Switch Display Optionswith CSS & jQuery」

画像とテキストの組合せの見せ方を変えるJavaScript「Switch Display Optionswith CSS & jQuery」

画像とテキストは時と場合により色々な見せ方が必要となります。 表示スペースの都合で、サムネイルしか見せられない時もSwitch Display Optionswith CSS & jQuery - by Soh Tanakaを利用すると、スマートに表示することができます。

via:Switch Display Optionswith CSS & jQuery

jQueryで画像・動画などを表示するLightboxクローン「CeeBox」

jQueryで画像・動画などを表示するLightboxクローン「CeeBox」

久しぶりにLightBoxクローンの紹介です。 JavaScriptライブラリのjQueryプラグイン「CeeBox」により、画像・動画をきれいに表示することが可能です。

via:CeeBox

スライドの切り替えが印象的なjQueryの画像ギャラリー「Sliced Image Slider」

スライドの切り替えが印象的なjQueryの画像ギャラリー「Sliced Image Slider」

画像ギャラリーの切り替えはフェードや横からのスライドなどいろいろあります。 JavaScriptライブラリjQueryプラグインの「Sliced Image Slider」を使用すると、スライスされた画像が上下左右から現れるようなエフェクトが可能です。

via:Sliced Image Slider

画像を拡大させるJavaScript「JQuery.iviewer」

画像を拡大させるJavaScript「JQuery.iviewer」

画像の細部まで拡大させることにより、商品などを魅力的に見せることが可能です。 今回はJaavScriptライブラリのjQueryプラグイン「JQuery.iviewer」を利用して実現します。

via:JQuery.iviewer

JavaScriptで画像の一部を拡大表示する「jLoupe」

JavaScriptで画像の一部を拡大表示する「jLoupe」

ECサイトなどで商品のより細かい部分まで見てもらいたい時があります。 そんな時は、JavaScriptを使用し、拡大表示させてみてはいかがでしょうか。 jQueryのプラグイン「jLoupe」を利用します。

via:jLoupe

jQueryで自動ドアが開くような表示をさせるJavaScript「Image splitting effect with CSS and JQuery」

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」

jQueryでループするスライダーを作る「loopedSlider」

画像や要素をスライドさせて見せるサイトが多くなっています。 JavaScriptライブラリのjQueryプラグイン「loopedSlider」を使用し、ループするスライダーを作ってみましょう。

via:loopedSlider

画像にJavaScriptで動くマスクをかけられる「Masked Slider」

画像にJavaScriptで動くマスクをかけられる「Masked Slider」

画像を印象的にするにはこういった手法もいいかもしれません。 jQueryのプラグイン「Masked Slider」を使用すると、画像の上に動くマスクをかけることができます。

via:Masked Slider

ユーザビリティに優れた画像ギャラリーJavaScript「jquery.showcase」

ユーザビリティに優れた画像ギャラリーJavaScript「jquery.showcase」

画像ギャラリーは、数多くあふれていますが、発端がLightBoxだったからか、あまりユーザビリティに優れているとはいえません。 jQueryプラグインのjquery.showcaseを使用すると、今何を見ていて、後何枚あるのかを明示することができ、わりとユーザビリティに配慮できます。

via:jquery.showcase

画像を拡大させるJavaScript「Zoomple」

画像を拡大させるJavaScript「Zoomple」

JavaScriptライブラリ「jQuery」のプラグインZoompleを使用すると画像のある一部をズームさせることができます。 うまく利用すると商品の細かい部分まで閲覧者に見せることができ、コンバージョンが高まるかもしれません。

via:Zoomple

スライドする画像ギャラリーJavaScript「Sliding Image Gallery jQuery Plug-in」

スライドする画像ギャラリー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 Before/After Plugin」

これはアイデアがいいですね。 JavaScriptライブラリjQueryで使用前・使用後みたいな表現が可能になります。

via:jQuery Before/After Plugin

JavaScriptで画像ギャラリーを作る「jQuery slideShow plugin」

JavaScriptで画像ギャラリーを作る「jQuery slideShow plugin」

画像ギャラリーはサイト制作の中でも多く利用するのではないでしょうか。 そのため選択肢の幅を広げ、よりサイトにあったJavaScriptを使うことをお勧めします。 今回はjQuery slideShow pluginを紹介します。

via :jQuery slideShow plugin

JavaScriptで画像のダウンロードを禁止する「dwImageProtector Plugin for jQuery」

JavaScriptで画像のダウンロードを禁止する「dwImageProtector Plugin for jQuery」

画像などをダウンロードさせたくない場合があると思います。 bodyにoncontextmenu="return false"とかすると右クリック時のメニューが表示されなくなったりしますが、ユーザーにとっては迷惑です。 dwImageProtector Plugin for jQueryでは、JavaScriptを使用することで、簡易的に画像をダウンロードできないようにしています。

via :dwImageProtector Plugin for jQuery

こいつは凄い!フルスクリーン縦型画像ギャラリー「jQuery Gallery Slider Plugin」

こいつは凄い!フルスクリーン縦型画像ギャラリー「jQuery Gallery Slider Plugin」

画像ギャラリーと言うとなんとなくLightBoxに代表されるような見せ方が思い浮かびます。 でもそんなものに飽ききった皆さんに朗報です。 jQuery Gallery Slider Pluginを使用すると、フルスクリーンで縦型の画像ギャラリーを作成できます。

via :jQuery Gallery Slider Plugin

jQueryでLightBoxライク画像ギャラリー「piroBox」

jQueryでLightBoxライク画像ギャラリー「piroBox」

食傷気味のLightBoxですが、まだまだ派生JavaScriptは進化を続けています。 jQueryプラグインの「piroBox」を紹介します。

via :piroBox

jQueryベースのLightBox風ギャラリー「jQuery BigPicture」

jQueryベースのLightBox風ギャラリー「jQuery BigPicture」

懲りずにLightBox風画像ギャラリー jQueryのプラグインを使用したjQuery BigPictureです。

via :jQuery BigPicture

画像をポラロイド風にするJavaScript「jPolaroid」

画像をポラロイド風にするJavaScript「jPolaroid」

画像を加工し、ポラロイド風に見せるサイトがあります。 手間をかけずにこれを実現できるjPolaroidを紹介します。

via :jPolaroid

マウスオーバーで画像を拡大させるJavaScript「MagicalHover」

マウスオーバーで画像を拡大させるJavaScript「MagicalHover」

画像の拡大と言えばLightBox・・・と言わずに、こんなJavaScriptはいかがでしょう? インラインで拡大画像を見せられるMagicalHoverです。

via :MagicalHover

画像が吹き出すようなエフェクトを加えるJavaScript「jQuery-puffy」

画像が吹き出すようなエフェクトを加えるJavaScript「jQuery-puffy」

昨今JavaScriptを利用することで、画像にさまざまなエフェクトがかけられるようになりました。 jQuery-puffyもそのひとつで、吹き出すような処理をかけられます。

via :jQuery-puffy

魅せる画像スライドショーJavaScript「jQuery GalleryView」

魅せる画像スライドショーJavaScript「jQuery GalleryView」

スライドショー的なJavaScriptは多いですが、ここまで魅せるものはなかったように思います。 jQuery GalleryViewはどこを見ているのか、次の画像は何かなど細かい点にも配慮しています。

via :jQuery GalleryView

驚きの画像切り替え!jQueryプラグイン「Jquery.ImageSwitch」

驚きの画像切り替え!jQueryプラグイン「Jquery.ImageSwitch」

画像の切り替えでユーザーに驚かせることができそうです。 jQueryプラグインのJquery.ImageSwitchはフェードインなどのよくあるパターンだけではなく、ダブルドアと名づけられた切り替え方も可能です。

via :Jquery.ImageSwitch

これは面白い!jQueryで紙芝居のように画像をめくるJavaScript

これは面白い!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でマウスオーバーを印象的にする:jQuery Animated Menu

マウスオーバー時に効果を与えることは当たり前になっていますが、もうちょっと工夫をするとユーザーの興味を喚起できるかもしれません。 jQueryの.hoverという基本的な手法を利用して、マウスオーバーを印象的にしてみます。

via:jQuery Animated Menu

ポロライド写真をばら撒いたように表示するギャラリーJavaScript「Polaroid Photo Viewer」

ポロライド写真をばら撒いたように表示するギャラリーJavaScript「Polaroid Photo Viewer」

ポラロイド風に画像を見せると、写真自体を引き立てられます。
Polaroid Photo ViewerではjQueryを使用し、簡単にポラロイド風の写真をばら撒いたように表示することが可能です。

via :Polaroid Photo Viewer

画像を様々なエフェクトでフローティングさせるJavaScript「FLOATING IMAGES」

画像を様々なエフェクトでフローティングさせるJavaScript「FLOATING IMAGES」

画像ギャラリーの見せ方のひとつにこんな手法があってもよいかもしれません。 jQueryプラグインのFLOATING IMAGESは画像を次々にフローティングさせていきます。

via :FLOATING IMAGES

jQueryベースで綺麗なLightBox風JavaScript「ColorBox」

jQueryベースで綺麗なLightBox風JavaScript「ColorBox」

巷に溢れかえるLightBox風ギャラリー。 ColorBoxもそんなJavaScriptの一つですが、colorと名乗るだけあり、綺麗な感じです。

via :ColorBox

デザインに優れた画像スライドショーJavaScript「JQUERY SLIDESHOW PLUGIN」

デザインに優れた画像スライドショーJavaScript「JQUERY SLIDESHOW PLUGIN」

画像ギャラリーは多々ありますが、あまりデザイン的にいいものはありませんでした。 今回のJQUERY SLIDESHOW PLUGINはなかなかデザイン性に優れたものと言えるのではないでしょうか。

via :JQUERY SLIDESHOW PLUGIN

画像を左右にスクロールさせられるJavaScript「jQuery Smooth Div Scroll」

画像を左右にスクロールさせられるJavaScript「jQuery Smooth Div Scroll」

画像ギャラリーを作る際にLightBoxを使用する人は多いでしょう。 しかし飽き飽きしている人も多いのも確かです。 たまにはjQuery Smooth Div Scrollのように左右にスクロールさせるのはいかがでしょか?

via :jQuery Smooth Div Scroll

JavaScriptで画像を簡単にスクロールさせられる「simplyScroll」

JavaScriptで画像を簡単にスクロールさせられる「simplyScroll」

スクロールさせるJavaScriptは多いですが、simplyScrollほど簡単なものは、あまりないでしょう。 JvaScriptライブラリ「jQuery」のプラグインです。

via :simplyScroll

背景画像にトランジション効果をつけられるJavaScript「BGTransition」

背景画像にトランジション効果をつけられるJavaScript「BGTransition」」

背景画像にも何らかの効果をつけられると、面白い表現が可能になりそうです。 BGTransitionは、そんな時手軽に導入が可能です。

via :BGTransition

ALTでキャプションをふわりと表示:jQueryプラグイン「jCaption」

ALTでキャプションをふわりと表示:jQueryプラグイン「jCaption」

画像にキャプションをつけることは多いと思います。 でも、みんなと同じような見せ方は嫌だという方には、こんな方法もあります。 jQueryプラグイン「jCaption」はaltに記述したものを画像の上に乗せて表示できます。

via :jCaption

画像ギャラリーにマスクをかけるJavaScript「(mb)MaskedGallery」

画像ギャラリーにマスクをかけるJavaScript「(mb)MaskedGallery」

画像ギャラリーに多く使われるLightBoxは、開かれたとたんに閉じてしまうユーザーが結構いるようです。 今回紹介するjQueryプラグインの(mb)MaskedGalleryは画像ギャラリーの上に透過PNGでマスクをつけられ、印象的な画像の見せ方が可能です。

via :(mb)MaskedGallery

jQueryプラグイン「Easy Slider」でスライダーを簡単導入

jQueryプラグイン「Easy Slider」でスライダーを簡単導入

スライダーを導入したい。 でも導入は難しそうだからと、見送っていませんか。 jQueryプラグイン「Easy Slider」なら、あなたのサイトでもすぐに使用できます。

via :Easy Slider

リンク先の画像をプレビューするJavaScript「imgpreview」

リンク先の画像をプレビューするJavaScript「imgpreview」

かの有名なLightBoxは画像を一回一回大きく表示します。 そんな時間は必要ない、また、まずはちらっと見たいという方にオススメです。 JavaScriptライブラリjQueryのプラグインimgPreviewでは、リンクされている画像をプレビューさせられます。

via :imgPreview

JavaScriptで画像を回転させる「Wilq32.RotateImage」

JavaScriptで画像を回転させる「Wilq32.RotateImage」

ただ、写真をずらっと掲載しているだけでは、つまらないという方は多いと思います。 jQueryのライブラリ「Wilq32.RotateImage」では、簡単・手軽に画像を傾けることが可能です。

via :Wilq32.RotateImage

アップ画像のどこを見ているかを表示するJavaScript「ImgNavigator」

アップ画像のどこを見ているかを表示するJavaScript「ImgNavigator」

(mb)ImgNavigator 1.0大きな画像を表示したいし、その画像のどこを見ているか表示させたいという、あなたにお勧めです。 地図とか、商品画像に使用すると便利かもしれません。

via :(mb)ImgNavigator 1.0

画像を切り替えるJavaScript「jQuery Slinky Slider」

画像を切り替えるJavaScript「jQuery Slinky Slider」

表示している画像をスムーズに切り替えて表示することができればユーザーの興味を喚起することができます。 jQuery Slinky Sliderは、画像を外部ファイルから読み込んで表示することができます。

via :jQuery Slinky Slider

インライン型LightBoxを実現するJavaScript「jQuery.popeye」

インライン型LightBoxを実現するJavaScript「jQuery.popeye」

昨今LightBoxスクリプトが広まり、さまざまな場所でオーバーレイが登場するのに辟易している人も多いでしょう。 jQuery.popeyeはJavaScriptライブラリ「jQuery」を使用し、ユーザーの視線を妨げない表示方法が可能です。

via :jQuery.popeye

画像とキャプションをスムーズに表示するギャラリーJavaScript「s3Slider」

画像とキャプションをスムーズに表示するギャラリーJavaScript「s3Slider」

LightBoxが巷にあふれる中、画像をより良く見せたい欲求は高まっていることでしょう。 s3Sliderでは、JavaScriptライブラリ「jQuery」を使用し、画像・キャプションにエフェクトをつけ、閲覧者の興味を喚起する仕組みを提供します。

via :s3Slider

jQueryプラグイン「pikachoose」で小気味良い動きのスライドショーを作る

jQueryプラグイン「pikachoose」で小気味良い動きのスライドショーを作る

スライド風に画像を見せるJavaScriptは多く広まっています。 今回紹介するpikachooseは、jQueryベースで気持ちの良い動きでギャラリーを表示してくれます。

via :pikachoose

jreflection

jQueryで画像に反射効果を!「Reflection.js for jQuery」

水面に反射させたような画像効果をつけるJavaScriptがはやりました。 ついに、というか、ようやくjQueryでもReflection.js for jQueryで、これが実現可能になったようです。

via :Reflection.js for jQuery

jCaptify

画像のキャプションをクールに表示するJavaScript「jQuery Captify Plugin」

画像に説明をつけるキャプションは重要ですが、配置場所は大抵決まっています。 しかし、デザイン性を重視すると画像に乗せたいなど出てくるでしょう。 今回紹介するjQuery Captify Pluginはそれを簡単かつクールに表示可能です。

via :jQuery Captify Plugin

jFancyzoom

jQueryでファンシーなLightBoxクローンを作る「Fancy Zoom」

爆発的な大ヒットとなったLightBoxですが、広まりすぎて先進的なイメージが薄れています。
そんな状況を打破すべくなのか、LightBoxのクローンは次々と生まれています。
今回紹介する「Fancy Zoom」もその一つで、昨今流行のJavaScriptライブラリjQueryを使用しています。

via :Fancy Zoom

spacegallery

奥から手前にズームするJavaScript「Spacegallery.js」

最近はappleのcoverflowやらamazonのぐるぐるやら画像の見せ方が豊富になってきました。 今回紹介する「Spacegallery.js」はありそうでなかった、手法かもしれません。 奥から手前にずんずんとズームしながら画像を表示していきます。

via : Spacegallery.js

spacegallery

レイヤー表示(?)JavaScript「jParallax」

なんと表現したらよいのか、サンプルを見ていただければなんとなくわかるかと。画像を何枚も重ねて表示可能なほか動きます。そんなjQueryベースのJavaScript「jParallax」です。

via : jParallax

Pan full size images

jQueryで画像をズームさせる「Pan full size images」

ECサイトでもよく見られる、画像の詳細を拡大させて見せる手法です。
今回はJavaScriptライブラリjQueryを使用した「Pan full size images」を紹介します。。

via : Pan full size images

jQZoom

クールなズームエフェクトjavascript「jQZoom」

画像を拡大表示するのにLightBoxを使用するのはもう時代遅れ。 LightBoxではできない指定場所の拡大もできます。 jQZoomはズームエフェクトをクールに実現します。

via : jQZoom

jQueryGallery

クールな画像ギャラリーjavascript「jQuery Gallery」

画像ギャラリーのjavascriptは数あれどここまで凝ったものはなかったのではないでしょうか。 Image Gallery using jQuery, Interface & Reflectionsは、メニュー、サムネイル、リフレクションなど実にさまざまな処理を施します。 その分スクリプトが多くなっていますが。。。

via : jQuery Gallery

jCycle

エフェクト満載の画像ギャラリー系javascript「jQuery Cycle Plugin」

画像ギャラリーといえば「LightBox」ですが、周りで使用している人が多く、食傷気味の人も多いと思います。 jQuery Cycle Pluginでは、過剰ともいえるほどのエフェクトが使用できます。 自分だけのオリジナルを簡単に作成したい方にお勧めの画像ギャラリー系Javascriptです。

via : jQuery Cycle Plugin

jTransGradient

画像にグラデーションをかけるjavascript「Transparent Gradients」

画像を編集するさいにグラデーション加工をする場合があるかもしれません。 Transparent Gradientsなら簡単に透明なグラデーションを付けることができます。

via : Transparent Gradients

jShuffle

ページめくり風の画像ギャラリーを作成するjavascript「jqShuffle」

LightBoxの登場にインパクトがあったからか画像の表示方法がワンパターン化している気がします。 今回紹介するjqShuffleでは、画像を1枚1枚めくるようなギャラリーを作成することができます。 Flashではありそうですが、Javascriptでは一風味変わった表示方法です。

via : jqShuffle

jLazyLoad

重い画像を順番に読み込むjavascript「Lazy Load Plugin for jQuery」

ブロードバンドが浸透しているとはいえ、画像を多く使用するとページが重くなり、表示速度が遅くなります。 また解像度を高くしたり、画像サイズを大きくしても重くなります。 Lazy Load Plugin for jQueryはディスプレイ範囲の画像のみを順番に表示するためページの読み込む時間を短縮できます。

via : Lazy Load Plugin for jQuery

jAutoScale

画像の大きさをウィンドウ幅に合わせて変更するjavascript「autoscale」

リキッドレイアウトではウィンドウによって、エラスティックレイアウトではフォントによってデザインが変更されます。 このようなレイアウトを採用している場合画像の幅が微妙になることがあるかもしれません。 autoscaleはウィンドウ幅に合わせて画像の幅も自動に変更されます。

via : autoscale

jLightBox

jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin」

Web2.0を個人レベルで実感させてくれたのが「LightBox」だと思います。 今では画像を表示する多くのブログで使用されています。 今回はこれをjQueryで実現したjQuery lightBox pluginを紹介します。

via : jQuery lightBox plugin

jPuzzle2

超簡単にパズルを作成するjavascript「Creating A Sliding Image Puzzle」

息抜きにパズルを作成しようと思うと従来は、画像をスライスする必要がありました。 Creating A Sliding Image Puzzleは画像1枚から超簡単にパズルを作成できます。

via : Creating A Sliding Image Puzzle

jPuzzle

1枚の画像から自動でパズルを作成するjavascript「jqPuzzle」

サイト制作において重要なのは、訪問者を飽きさせず滞留させることでしょう。 この観点から言えばゲームなどがあってもいいのかもしれません。 jqPuzzleは1枚の画像からスライディングパズルを自動で作成します。

via : jqPuzzle

jZoomi

超簡単な画像ズームエフェクトjavascript「zoomi」

画像を使用することの多いWebでは、見せ方に工夫することが必要になります。 昨今、LightBoxをはじめとするツールが多くなりましたが、導入が面倒でした。 今回紹介するzoomiは、ほとんと手間をかけずに画像をズームさせるエフェクトをjavascriptでつけることができます。

via : zoomi

jLightBox

jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin(balupton edition)」

LightBoxをjQueryで実現するJavaScriptは以前jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin」で紹介しましたが、今回紹介する方が高機能で柔軟性があるかもしれません。
jQuery Lightbox Plugin (balupton edition)です。

via : jQuery Lightbox Plugin (balupton edition)

このエントリーを含むはてなブックマーク この記事をクリップ! Yahoo!ブックマークに登録 このエントリーをdel.icio.usに追加する