サンプル画像はPixabayからダウンロードさせていただきました。

サムネイル画像をクリックすると全画面表示に切り替わります。左上には各種操作用のアイコンが表示されます。ここから「戻るアイコン」をクリックすると全画面表示を終了します。「ルーペアイコン」をクリックすると拡大表示(ルーペモード)になります。「前アイコン」と「次アイコン」のクリックで表示中の画像が切り替わります。ルーペモードでは画像をドラッグしてスクールさせることができます。「戻るアイコン」でルーペモードを抜けます。

CSSとJSを読込。

1. <link rel="stylesheet" href="image-viewer.css">
2. <script src="image-viewer.js"></script>

imgタグにimage-scopeクラス指定する。 data-good属性に画像のURL、data-fine属性に詳細画像のURLを指定する。 Lazy Loading中のサムネイル画像はdata-mini属性で指定するが省略できる。 data-mini属性が省略された場合は汎用のロード中画像が表示される。 src属性は無視されるが、JavaScriptが動作しない環境用に記述しておいても良い。 data-sizes属性とdata-srcset属性が存在すれば、 Lazy Loading後にsizes属性とsrcset属性を上書きする。 data-group属性が存在すれば、「前アイコン」と「次アイコン」が同グループに限定される。全画面表示用の領域としてimage-screenクラスが必要であるが、存在しなければjavascriptが自動で作成する。

1. <img class="image-scope" data-group="group1"
2. data-good="image1.jpeg" data-fine="fine-quality1.jpeg">
3. <img class="image-scope" data-group="group1"
4. data-mini="thumb2.jpeg"
5. data-good="image2.jpeg" data-fine="fine-quality2.jpeg">
6. <img class="image-scope" data-group="group1"
7. src="defalt3.jpeg"
8. data-mini="thumb3.jpeg"
9. data-good="image3.jpeg" data-fine="fine-quality3.jpeg"
10. data-sizes="(max-width: 640px) 640px, 1280px"
11. data-srcset="small3.jpeg 640w, large3.jpeg 1280w">
12. <div class="image-screen"></div>

画像はdivタグの背景画像として表示することも可能。この場合、表示領域のサイズをスタイルシートで確保しておく。

1. <div class="image-scope"
2. data-good="image1.jpeg" data-fine="fine-quality1.jpeg"
3. style="width:320px;height:320px;background-size: cover;">

画像ファイルは画像ページの'attachment'として登録しておく必要がある。画像ページのページIDは'image-yyyymmddSsss'である。ページIDの後半部'yyyymmddSsss'を画像IDと呼ぶ。 'yyyymmdd'は画像ページが作成された年月日であり、 'sss'はその日に作成された順を表す1から始まる連番である。 1日に作成できる画像ページは999個（3桁）までである。画像ページの最初の登録ファイル(attachment)が元画像であり、ファイル名は「画像ID+'F'(スケール識別子)+拡張子」の形式である。元画像に続けて以下の形式でサイズごとの画像を用意しておくと、スコープ表示(後述)でクライアントごとに適切なサイズの画像が表示される。

画像表示はレイアウト形式(背景画像形式)も可能。画像表示領域のサイズをscaleで指定しておく必要がある。 (divタグは内容が空だと高さがゼロになるため。) 画像は表示領域を覆うように拡大縮小されるため、表示領域より大きめの画像を用意しておいた方がよい。