コーディング/jQueryのアイデア /

すべてレスポンシブ対応!!画像系jQueryプラグイン4選

今回はレスポンシブに対応している画像ギャラリー系のjQueryプラグインをいくつか紹介したいと思います。  

Image Lightbox Responsive and Touch‑friendly

デモ:公式(英語) まずひとつ目は、画像をモーダルウィンドウで表示するプラグインです。 モーダル関係は、星の数ほどあるのですがこちらのプラグインはレスポンシブやタッチデバイスにも対応しており、またモーダルが開く等のエフェクトは、CSS3を使っており、対応ブラウザでみると、よりリッチにみえる感じが良いと思います。設置もとても簡単なので、画像をモーダルで表示したい時にいかがでしょうか。 ダウンロード:http://osvaldas.info/image-lightbox-responsive-touch-friendly

使い方

CSSの設定が必要です。下記のCSSを追記してください。 JSファイル  

OWL Carousel

次はよく使うカルーセルプラグインを一つ紹介したいと思います。
カルーセルとは・・・「画像やコンテンツを横にスライドさせて表示する手法で、カルーセルは英語で”回転木馬”という意味で、この手法も左右の端に達すると逆側に戻るように設計されているので、回転木馬(メリーゴーランド)のようにみえることから、カルーセルと呼ばれています。」
そのカルーセルプラグインで紹介したいのがこちらのOWL Carouselです。 レスポンシブにも対応しているので、レスポンシブも含めた案件にも重宝できそうです。オプションも沢山用意されているので、色々と試してみる価値はあるかと思います。 公式のデモも充実していますので、眺めてみるのもいいかもしれません。 ダウンロード:http://www.owlgraphic.com/owlcarousel/

 使い方

1.ダウンロードしたファイルHTMLに読み込む ※jQueryは1.7以上でないと動きません。 2.HTMLマークアップ #carousel(任意に変更できます)を指定した要素で、スライドさせたい要素を包む。 3.Javascriptの命令文を記述  

SUPER BOX

Google画像検索のような事が簡単に実現できる面白いプラグインを紹介します。 レスポンシブにも対応し、IE7/8といった古いブラウザにも対応しているので クライアントワークでも直ぐに使うことも・・・モーダルではなくてもう少し独自性のある表現してみたい!という要望に応えてくれるかも・・・ デモ:http://toddmotto.com/labs/superbox/ ダウンロード:https://github.com/toddmotto/superbox

 使い方

1.ファイルを読み込む  2.HTMLマークアップ ギャラリーページの様に横並び等にしたい場合は、Divで囲み、拡大表示したい画像に関しては.superbox-imgというクラスを設定します。 またHTML5で追加された独自data要素を使って拡大表示する画像パスを設定します。 3.Javascriptの命令文を記述  

JQuery Panorama Viewer

最後に、なかなか使う事はなさそうですが面白いプラグインとして360度パノラマを実現するプラグインを簡単に紹介します。 デモ:http://www.thepetedesign.com/demos/panorama_viewer_demo.html ダウンロード:https://github.com/peachananr/panorama_viewer

使い方

1.HTMLマークアップ  2.Javascriptの命令文を記述  
 

この記事を書いた人

solecolor-design

PAGE TOP