[JS]画像を拡大表示するLightboxの進化形、デバイスごとに異なる設定も可能な高性能な軽量スクリプト -Chocolat

Post on:2015年7月30日

デスクトップ、タブレット、スマホのそれぞれに合わせた方法で、指定したエリアやウインドウいっぱいに画像を拡大表示したり、そのまま複数の画像を表示するスライダーにすることもできる、軽量で高性能な画像を拡大表示するスクリプトを紹介します。

スクリプトだけでなく、ページ全体やデモなども非常に面白いデザインです。

サイトのキャプチャ

Chocolat
Chocolat -GitHub

Chocolatの特徴

サイトのキャプチャ

Chocolatの特徴

個人ユーザーからプロのWeb制作者まで
専門的な知識がなくても簡単に実装でき、APIを使うと更に高性能な機能を提供します。
クロスブラウザ対応
全ての主要ブラウザで動作します。
テストブラウザ: IE7+, Firefox, Chrome, Opera, Safari
軽量
スクリプトはたった23KB、ミニファイ版は10KBです。
レスポンシブ対応
デスクトップ、タブレット、スマホをサポート。
デバイスごとに異なる画像を表示したり、自身のブレイクポイントを定義することもできます。

Chocolatのデモ

デモページはデザインも面白く、いろいろ楽しめます。

デモのキャプチャ

Demo

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を外部ファイルとして記述します。

<head>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquery.chocolat.js"></script>
  <link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8">
</head>

Step 2: HTML

サムネイル画像（mini）を配置し、a要素のhref属性に拡大画像を指定します。
ラッパーのに「data-chocolat-title」を指定することで、a要素のtitle属性がキャプションとしてセットされます。a要素の「.chocolat-image」は必須です。

<div class="chocolat-parent" data-chocolat-title="set title">
    <a class="chocolat-image" href="series/1.jpg" title="caption image 1">
        <img width="100" src="series/mini/1.jpg" />
    </a>
    <a class="chocolat-image" href="series/2.jpg" title="caption image 2">
        <img width="100" src="series/mini/2.jpg" />
    </a>
    <a class="chocolat-image" href="series/3.jpg" title="caption image 3">
        <img width="100" src="series/mini/3.jpg"/>
    </a>
</div>

Step 3: JavaScript

jqueryのセレクタでラッパーを指定し、スクリプトを実行します。

$(document).ready(function(){
    $('.chocolat-parent').Chocolat();
});

スクリプトのオプションでは、「.chocolat-image」を変更したり、画像のサイズ、フルスクリーンの対応、アニメーション、スライダーのループなどが設定できます。

sponsors

top of page

©2024 coliss