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

http://codepen.io/bamf/full/jEpxOX/
Demo Page Download Page
Lisence

MITライセンス

※ライセンスが変更される可能性がありますので、使用される際は必ずご自身でご確認ください。

Browser

01.Firefox02.Chrome03.Opera04.Safari09.InternetExplorer10

Tag

ビフォーアフターレスポンシブ

設置方法などの参考ページ

レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」 – bl6.jp

http://bl6.jp/web/javascript/before-after-js-jquery/

before-after.jsはシンプルでレスポンシブに対応したビフォーアフター画像を実装することができます。中央にあるボタンを左右にスライド移動させることでビフォーとアフターを確認できます。

公開日：2015.03.18

Related Posts

http://toddmotto.com/labs/superbox/
【Superbox】レスポンシブ対応、Lightbox風のjQueryギャラリープラグイン
http://joeyvandijk.github.io/rimg/
【Rimg】表示サイズに最適な画像・背景画像を表示するレスポンシブ対応の軽量スクリプト
http://photoswipe.com/
【PhotoSwipe】シンプルなフォトギャラリーjQueryプラグイン
http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html#blossom
【jQuery RWD Image Maps】クリッカブルマップをレスポンシブにする
http://jonom.github.io/jquery-focuspoint/demos/grid/lizard.html
【jquery-focuspoint】フォーカスポイントを決めて、ポイントを中心に切り抜くjQueryプラグイン
Nivo Lightbox
【Nivo Lightbox】レスポンシブ対応のLightbox系jQueryプラグイン
http://johnpolacek.github.io/imagefill.js/responsive.html
【imagefill】画像サイズをレスポンシブ化させるjQueryプラグイン
http://dropthebit.com/demos/photobox/
【Photobox】スマートフォンにも対応したレスポンシブギャラリーjQueryプラグイン
http://alexdunphy.github.io/refineslide/demo.html
【RefineSlide】様々なエフェクトが利用できてレスポンシブデザインにも対応可能なイメージスライドjQueryプラグイン
http://xoxco.com/projects/code/breakpoints/
【Breakpoints.js】ブレイクポイントを指定しブレイクポイント毎に画像を差し替えるjQueryプラグイン

Page Top