jQueryプラグイン「Colorbox」をレスポンシブに対応させる方法!

2015/10/15

こんにちは。
今回はjQueryプラグイン「Colorbox」をレスポンシブに対応させる方法!です。

簡単にライトボックスを実装できる人気のjQueryプラグイン「Colorbox」。
けっこう頻繁に使う事があるので、レスポンシブにする方法を紹介したいと思います。

jQueryプラグイン「Colorbox」をレスポンシブに対応させる方法!

「Colorbox」をダウンロードしてみよう!

下記のサイトの青い「Downloa」のボタンをクリックしダウンロードします。

colorbox

http://www.jacklmoore.com/colorbox/

 

「Colorbox」を設置してみよう。

先ほど、ダウンロードしたファイルを設置していきます。
まずはダウンロードしたファイル(colorbox-master)のexample1〜example5の好きなデザインのcolorbox.cssとimagesを同じ階層に設置します。
colorbox.cssをhead内に読み込みます。

 

jQuery本体とjquery.colorbox-min.jsを/bodyの手前に読み込みます。

 

その下に下記の記述をします。
maxWidthとmaxHeightを90%にすると、デバイスに関係なく、画像が90%以上大きくなる事はありません。

 

html部分を記述します。

 

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

 

いかがでしたか。簡単にレスポンシブに対応させる事ができますね。
以上でjQueryプラグイン「Colorbox」をレスポンシブに対応させる方法!でした。

Related Post

topへ戻る