Pocket

今回はレスポンシブに対応している画像ギャラリー系の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の命令文を記述

 


 

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。