jQuery 2014-12-14

レスポンシブにも対応したjQueryライトボックス系プラグイン【Chocolat】使い方

chocolat

今回は、レスポンシブにも対応したjQueryライトボックス系プラグイン【Chocolat】の実装方法のご紹介です。

よく、ライトボックスなんかはブログ記事本文に出てくる画像なんかに利用されていたり、スペース確保のためや画像ギャラリー系サイトなんかで利用されたりと利用用途は様々でとても利用頻度が多いプラグインの一つではないでしょうか。
こちらのプラグインは、ライトボックス系のプラグインの中でも、実装は簡単なほうだと思います。
また面白い機能もあり、指定した要素内に画像を表示させることも出来、通常ライトボックスと言えば画像をクリックするとサイト全体がオーバーレイされて画像の本来のサイズで表示されると思いますが、こちらの機能を利用すれば、指定した要素内に画像を表示させて表示させるとことが可能です。

少し言葉足らずになりますので、一応実際に【Chocolat】を利用したデモサイトを作ってみましたので、そちらもご確認頂ければと思います。
また、こちらのプラグインは【レスポンシブ】にも対応していますので、そちらもご確認下さい。

デモサイト

実装するのであれば、下記リンク先より必要ファイルのダウンロードして下さい

Chocolat

Chocolat 実装方法

それでは、jQueryライトボックスプラグイン【Chocolat】を実装方法をご説明していきたいと思います。
実装するにあたりこちらより必要なファイル等は事前にダウンロードしておいて下さい。

必要ファイルの読み込み

まずは、jQuery本体と上記でダウンロードした【chocolat.css】【jquery.chocolat.js】をhead内に読み込みます。
ファイルの階層は、ご自身の環境に合わせて変更して下さい。

<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script src="js/jquery.chocolat.js"></script>

HTMLの準備

今回は、画像を3枚用意して単純に全ての画像をグループ化するとします。
a要素のtiti属性に記載した文字が、キャプション文字として表示されるようになっています。

    <ul id="demo">
    	<li><a href="img/01.jpg" title="a要素のtitleがキャプションとして表示されます。"><img src="img/01.jpg" width="300" height="185"></a></li>
    	<li><a href="img/02.jpg" title="a要素のtitleがキャプションとして表示されます。"><img src="img/02.jpg" width="300" height="185"></a></li>
    	<li><a href="img/03.jpg" title="a要素のtitleがキャプションとして表示されます。"><img src="img/03.jpg" width="300" height="185"></a></li>
    </ul>

Scriptの挿入

上記のid:demo内のa要素を指定します。
今回は、デフォルトの状態で表示させます。

<script type="text/javascript">
	$(function() {
	    $('#demo a').Chocolat();
	});
</script>

上記まで記載して、画像をクリックするとしっかりと表示されると思います。
また、ダウンロードしたフォルダに入っているimagesフォルダも階層内に設置して下さい。
出ないとNEXTナビなどの画像が表示されません。

デモサイト

こちらのjQueryライトボックスプラグイン【Chocolat】では様々なオプションが用意されていますので、下記にオプションを利用したコードもご参考下さい。

オーバーレイの背景色を任意に変更してグループも解除

デフォルトの背景色は、白となっておりますがこちらの背景色を任意に変更します。
また、表示後のグループも解除もしたり、透過度やNEXTナビなども任意にオプションで変更が出来ます。

コード

<script type="text/javascript">
		$(function() {
	    $('#demo-3 a').Chocolat({
		linkImages:false, //グループ化を解除
		overlayColor   : '#24ccd7', //オーバーレイ背景色
		overlayOpacity : 0.5, // 透過度
        leftImg        : 'images/leftw.gif', //PREVIOUS画像
        rightImg       : 'images/rightw.gif', //NEXT画像
        closeImg       : 'images/closew.gif' //閉じる画像
		});
	});
</script>

特定の要素内に表示させる

通常ライトボックスと言えば、ページ全体を利用して画像を表示させますが、オプションで設定すれば特定の要素内に表示させることが出来ます。

HTML

今回は、#container要素内に表示させてみます。

    <ul id="demo-4">
    	<li><a href="img/04.jpg" title="a要素のtitleがキャプションとして表示されます。" rel="ライトボックス"></a></li>
    	<li><a href="img/05.jpg" title="a要素のtitleがキャプションとして表示されます。"></a></li>
    	<li><a href="img/06.jpg" title="a要素のtitleがキャプションとして表示されます。"></a></li>
    </ul>
    <div style="border:1px dotted silver;width:960px; height:400px;" id="container"></div>

コード

containerというオプションで表示させる要素を指定します。

<script type="text/javascript">
	$(function() {
	    $('#demo-4 a').Chocolat({
	    displayAsALink : true,
            container      : $('#container'),
            overlayOpacity : 0.5
			});
	});
</script>

上記の他にも、様々なオプションも用意してありますので、下記ページをご参考下さい。
また、実際にChocolatを利用したデモサイトもありますので、ご参考頂ければと思います。

Chocolatオプション

デモサイト

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS background-glitter

【利用無料】キラキラやぼかし効果の背景素材 10+

NEXT simple-breadcrumb

CSSだけでシンプルなデザインのパンくずリストのコード