画像関連

http://excolo.github.io/Excolo-Slider/

【Excolo Slider】タッチにも対応しているシンプルなjQueryプラグイン

Lisence: MITライセンス
Tag: スライダー画像
http://owlgraphic.com/owlcarousel/#customizing

【Owl Carousel】タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン

Lisence: MITライセンス
Tag: ギャラリーレスポンシブ
http://360slider.com/default_control.html

【Threesixty Slider】360度回転表示できるjQueryプラグイン

Lisence: GPLライセンスMITライセンス
Tag: jQuery回転画像
http://fat.github.io/zoom.js/

【zoom.js】画像を拡大表示するシンプルなjQueryプラグイン

Lisence: MITライセンス
Tag: レスポンシブ画像拡大
http://riccardoscalco.github.io/textures/

【Textures.js】かわいいパターンのテクスチャがSVGで作成できるjQueryプラグイン

ラインやサークルや八角形や波線などのさまざまなパターンのテクスチャを、画像を使用せずに、SVGで描けるスクリプトです。

Lisence: MITライセンス
Tag: 地図画像背景
http://www.serie3.info/s3slider/demonstration

【s3slider】テキストと画像をスタイリッシュにスライドさせるjQueryプラグイン

画像とテキストをタイミングをずらして、スタイリッシュにスライドさせることができます。 ライセンスはCreative Commons Attribution 2.5.です。

Lisence: クリエイティブコモンズ
Tag: スライダーテキスト
http://xoxco.com/projects/code/breakpoints/

【Breakpoints.js】ブレイクポイントを指定しブレイクポイント毎に画像を差し替えるjQueryプラグイン

Lisence: MITライセンス
Tag: ブレイクポイントレスポンシブ
http://codepen.io/bamf/full/jEpxOX/

【before-after.js】レスポンシブに対応したビフォーアフター画像を実装することができるスクリプト

Lisence: MITライセンス
Tag: ビフォーアフターレスポンシブ
http://joeyvandijk.github.io/rimg/

【Rimg】表示サイズに最適な画像・背景画像を表示するレスポンシブ対応の軽量スクリプト

単独で動くスクリプトです。

Lisence: MITライセンス
Tag: レスポンシブ
OKZoom

【OKZoom】虫眼鏡みたい!マウスオーバーで画像をズームできるjQueryプラグイン

Lisence: MITライセンス
Tag: エフェクトズーム
http://emn178.github.io/jquery-animations-spotlight/samples/spotlight/

【spotlight】画像上にスポットライトのような効果を作れるjQueryプラグイン

オプションでスポットライトのサイズや動き方を指定できます。

Lisence: MITライセンス
Tag: アニメーション
http://tympanus.net/Development/Slicebox/

【slicebox】立体的に画像をスライスするアニメーションjQueryプラグイン

Lisence: MITライセンス
Tag: アニメーションスライダー回転
http://script.macanow.com/animation/animation03/

【jrumble】要素を振動させるjQueryプラグイン

Lisence: MITライセンス
Tag: アニメーションエフェクト
http://4coder.info/en/code/jquery-plugins/smart3d/

【Smart3D】複数の画像を使ったパララックスエフェクトを作成するjQueryプラグイン

Lisence: BSDライセンスGPLライセンスMITライセンス
Tag: アニメーションエフェクト位置固定
http://practiceweb.ciao.jp/jquery/index.html

【ParallaxSlider】サムネイル画像がおしゃれなjQueryプラグイン

Lisence: MITライセンス
Tag: エフェクトギャラリースライダー
http://photoswipe.com/

【PhotoSwipe】シンプルなフォトギャラリーjQueryプラグイン

レスポンシブでスワイプなどのタッチデバイスにも対応。

Lisence: MITライセンス
Tag: ギャラリーレスポンシブ
jQuery.Coverflow

【jQuery Coverflow】 iTunesのようにスクロールするギャラリーを実装できるjQueryプラグイン

※IE6~9では動作は正常に動くようですが、見た目が崩れてしまうので調整する必要がありそうです。

Lisence: MITライセンス
Tag: カバーフロースライダー
http://joshbuddy.github.io/spoiler-alert/

【SPOILER ALERT!】画像やテキストにモザイクをかける

クリックするとモザイク解除、再びクリックするとモザイクがかかります。

Lisence: MITライセンス
Tag: モザイク
Leanorama

【leanorama】フルスクリーンのパノラマ画像サイトが作れるjQueryプラグイン

Lisence: MITライセンス
Tag: フルスクリーン回転
http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html#blossom

【jQuery RWD Image Maps】クリッカブルマップをレスポンシブにする

クリッカブルマップをレスポンシブ対応にします。

Lisence: MITライセンス
Tag: クリッカブルマップレスポンシブ
http://lokeshdhakar.com/projects/lightbox2/

【lightbox2】定番LightboxのjQueryプラグイン

定番のlightbox。

Lisence: クリエイティブコモンズ
Tag: Lightboxモーダルウィンドウ
http://goldinteractive.github.io/jQuery.GI.TheWall.js/

【jQuery.GI.TheWall.js】Google画像検索のようなイメージギャラリー

Google画像検索のようなイメージギャラリーを実装できるjQueryプラグイン。

Lisence: MITライセンス
Tag: ギャラリー
http://blog.makitasako.com/jquery.morphing.js/test/

【jquery.morphing.js】マウスの動きに合わせて輪郭をゆらゆらさせるjQueryプラグイン

切り抜いた画像の輪郭をマウスの動きに合わせてゆらゆらさせます。

Lisence: MITライセンス
Tag: マウスオーバー
http://mikefowler.me/crossfade.js/

【crossfade.js】スクロールで画像をクロスフェードで切り替えるjQueryプラグイン

Lisence: MITライセンス
Tag: スクロール
http://seuratjs.com/

【SeuratJS】画像をドット絵に変換するjQueryプラグイン

Lisence: GPLライセンスMITライセンス
Tag: モザイク
http://satoh-d.github.io/jquery-hovercap/

【hovercap】画像をhoverした時にキャプションをアニメーションで表示するjQueryプラグイン

Lisence: MITライセンス
Tag: アニメーションキャプションマウスオーバー
http://www.iamapioneer.com/plugins/rollerblade/

【rollerblade.js】 画像をドラッグで360度回転させられるjQueryプラグイン

Lisence: MITライセンス
Tag: 回転
http://jonom.github.io/jquery-focuspoint/demos/grid/lizard.html

【jquery-focuspoint】フォーカスポイントを決めて、ポイントを中心に切り抜くjQueryプラグイン

画像全体を縮小してレスポンシブ対応させるのではなく、重要な部分を予め定義しておき、その部分はかならず表示するというような処理をおこなうプラグインです。

Lisence: MITライセンス
Tag: レスポンシブ
http://osvaldas.info/examples/image-lightbox-responsive-touch-friendly/

【Image Lightbox】レスポンシブ、タッチフレンドリーなLightBox jQueryプラグイン

レスポンシブ対応、タッチフレンドリーなLightBoxを実装するjQueryプラグイン。

Lisence: MITライセンス
Tag: Lightbox
http://mschmidt.github.io/jquery-fullsizable/

【jquery-fullsizable】画像をフルスクリーンに拡大するjQueryプラグイン

画像をクリックするとフルスクリーンのギャラリーのような見せ方ができます。

Lisence: MITライセンス
Tag: Lightboxギャラリーフルスクリーン
http://potomak.github.io/jquery-instagram/

【jquery-instagram】Instagram API を jQuery で表示させるjQueryプラグイン

Instagram API を簡単に利用できるjQueryプラグイン

Lisence: MITライセンス
Tag: Instagram
http://lab.adrianquevedo.com/jquery-spectragram/

【SpectragramJS】Instagramの写真を簡単に表示するjQueryプラグイン

Instagramの写真を簡単にサイトに表示できるjQueryプラグイン。ユーザの最新の写真、人気の写真、タグ付けされた写真などを取得できます。

Lisence: MITライセンス
Tag: Instagram
http://tholman.com/intense-images/

【Intense Images】クリックすると画像を全画面表示するスクリプト

単独jsで動きます

Lisence: MITライセンス
Tag: Lightbox
http://photopile-js.com/demo/

【PhotopileJS】写真を卓上にばらまけた風のUIに実装できるjQueryプラグイン

写真をクリックするとLightboxのようなポップアップで拡大写真が表示されます。

Lisence: MITライセンス
Tag: Lightboxギャラリー
http://takemaru-hirai.github.io/japan-map/example/index2.html

【Japan Map】日本の都道府県地図をクリッカブルマップで表示するjQueryプラグイン

Lisence: MITライセンス
Tag: mapクリッカブル
http://www.jacklmoore.com/zoom/

【Zoom】画像をズームするjQueryプラグイン

画像をタッチ、クリック、マウスオーバーでズームしてみせるjQueryプラグイン

Lisence: MITライセンス
Tag: ズーム
http://www.mind-projects.it/projects/jqzoom/demos.php

【jqZoom】画像の一部を拡大表示するjQueryプラグイン

画像の一部をズームアップするjQueryプラグイン。拡大用の画像を別途用意できるため、素材の質感などのディテールを伝えたい時に。

Lisence: BSDライセンス
Tag: ズーム
http://buildinternet.com/project/mosaic/1.0/

【Mosaic】マウスオーバーで画像にキャプションをつけるjQueryプラグイン

マウスオーバーで画像に説明文を表示できるjQueryプラグイン。キャプションが表示される方向やエフェクトを指定できます。

Lisence: GPLライセンスMITライセンス
Tag: キャプションマウスオーバー
http://dev.twoblok.es/data-img/

【data-Img】レスポンシブ対応した画像表示を実装できるjQueryプラグイン

幅に応じて画像を切り替えたい場合に使えます。

Lisence: MITライセンス
Tag: レスポンシブ
http://demo.tn34.de/jquery-plugins/facets/demo2.html

【Facets】マウスオーバーでアコーディオンのように画像が横に広がるナビゲーションjQueryプラグイン

画像またはグローバルメニューをクリックすると画像がアコーディオンのように開きます。

Lisence: GPLライセンス
Tag: アコーディオンアニメーションスライダー
http://www.elevateweb.co.uk/image-zoom/examples

【elevatezoom】画像の一部を拡大するjQueryプラグイン

画像にカーソルを合わせるとその部分を拡大して表示するjQueryプラグイン。大きさや表示位置などのオプションが用意されていて、ギャラリーのような見せ方も可能。

Lisence: GPLライセンスMITライセンス
Tag: ズーム
http://www.kfsoft.info/home/MyThumbnail/

【MyThumbnail.js】画像のサイズをそろえるjQueryプラグイン

方向やサイズの違う画像をトリミングしてサムネイルを作成し、サイズをそろえて並べるjQueryプラグイン。アスペクト比を維持してサイズをそろえることができます。

Lisence: MITライセンス
Tag: サイズを揃える
http://www.kfsoft.info/MyFadeOverImage/demo.php

【MyFadeOverImage】画像はそのままで、カラートーンや不透明度のアニメーションを加えるスクリプト

画像自体をPhotoshopなどでレタッチする必要なく、カラートーンや不透明度の変更をフェードのアニメーションで加えるjQueryのプラグインです。

Lisence:
Tag: アニメーション
http://tympanus.net/Development/GridNavigationEffects/example5.html

【Grid Navigation Effects】多彩なエフェクトが用意されたグリッドベースのナビゲーションjQueryプラグイン

多彩なエフェクトのナビゲーションでで魅了しましょう。

Lisence: クリエイティブコモンズ
Tag: ギャラリー
http://flexslider.woothemes.com/

【FLEXSLIDER】レスポンシブなコンテンツスライダーのjQueryプラグイン

このjQueryプラグインの特徴はただ単にイメージをスライド、フリック出来るだけでなく様々な要素をスライドすることができます。

Lisence: MITライセンス
Tag: スライダー
http://stylehatch.github.io/photoset-grid/

【Photoset Grid】画像を柔軟なグリッドに配置するjQueryプラグイン

画像を並べるだけで、大きい写真と小さい写真に組み合わせてレイアウトします。Lightboxを追加することも可能。

Lisence: MITライセンス
Tag: Lightboxレイアウト
http://www.thepetedesign.com/demos/interactive_3d.html

【jQuery Interactive 3D】3Dのように画像を回転させるjQueryプラグイン

複数の画像を使用して3Dのように画像を回転させます。Web上で製品を紹介するのに最適です。

Lisence: GPLライセンス
Tag: 3D回転
http://43081j.github.io/pixelate/

【pixelate.js】画像にモザイク処理をかけるjQueryプラグイン

画像にモザイクをかけることができるjQueryプラグインです。オンマウスやクリックで元の画像を表示させたりできます。

Lisence: MITライセンス
Tag: モザイク
Fluidbox

【Fluidbox】軽快な動きで画面いっぱいに表示されるLightBox風なjQueryプラグイン

使い方はとてもシンプルで、aタグでリンクされている画像を拡大版として表示します。レスポンシブにも対応しています。

Lisence: GPLライセンス
Tag: Lightboxレスポンシブ
http://filamentgroup.com/examples/responsive-images/

【Responsive Images】画面サイズによって読み込むイメージを切り替えてくれるjQueryプラグイン

スクリーンサイズによって読み込む画像を切替えてくれます。

Lisence: GPLライセンスMITライセンス
Tag: レスポンシブ
1 / 212

Page Top