[JS]画像を拡大表示するLightboxの進化形、デバイスごとに異なる設定も可能な高性能な軽量スクリプト -Chocolat
Post on:2015年7月30日
sponsorsr
デスクトップ、タブレット、スマホのそれぞれに合わせた方法で、指定したエリアやウインドウいっぱいに画像を拡大表示したり、そのまま複数の画像を表示するスライダーにすることもできる、軽量で高性能な画像を拡大表示するスクリプトを紹介します。
スクリプトだけでなく、ページ全体やデモなども非常に面白いデザインです。
Chocolatの特徴
- 個人ユーザーからプロのWeb制作者まで
- 専門的な知識がなくても簡単に実装でき、APIを使うと更に高性能な機能を提供します。
- クロスブラウザ対応
- 全ての主要ブラウザで動作します。
- テストブラウザ: IE7+, Firefox, Chrome, Opera, Safari
- 軽量
- スクリプトはたった23KB、ミニファイ版は10KBです。
- レスポンシブ対応
- デスクトップ、タブレット、スマホをサポート。
- デバイスごとに異なる画像を表示したり、自身のブレイクポイントを定義することもできます。
Chocolatのデモ
デモページはデザインも面白く、いろいろ楽しめます。
Chocolatで拡大画像を表示する領域は、大きく分けて2種類。
- Full Window（ブラウザいっぱい、もしくはフルスクリーン）
- Container（ページ上のブロック要素）
それぞれに「contain（領域に収まるサイズ）」「cover（領域を覆うサイズ）」を利用できます。
Demo: Container: contain
指定されたブロック要素に収まる最大のサイズで画像を拡大表示します。
Demo: Container: cover
指定されたブロック要素を覆う最小のサイズで画像を拡大表示します。
Demo: Container: cover
スマホで表示すると、こんな感じに。
拡大画像はいいのですが、ボタンが小さいからタップしにくい、、、
Demo: Full Window: contain
フルウインドウはキャプチャだと分かりにくいかもしれませんが、ブラウザいっぱいがその領域となり、画像を拡大表示します。
Demo: Full Window: cover
上部の中央のアイコンは、フルスクリーンモードになります。
Chocolatの使い方
Step 1: 外部ファイル
当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。
[html]
[/html]
Step 2: HTML
サムネイル画像（mini）を配置し、a要素のhref属性に拡大画像を指定します。
ラッパーのに「data-chocolat-title」を指定することで、a要素のtitle属性がキャプションとしてセットされます。a要素の「.chocolat-image」は必須です。
[html]
[/html]
Step 3: JavaScript
jqueryのセレクタでラッパーを指定し、スクリプトを実行します。
[javascript]
$(document).ready(function(){
$('.chocolat-parent').Chocolat();
});
[/javascript]
スクリプトのオプションでは、「.chocolat-image」を変更したり、画像のサイズ、フルスクリーンの対応、アニメーション、スライダーのループなどが設定できます。
sponsors
