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