［複数画像対応］画像拡大スクリプト「Luminous」を使う

最近メールでご質問を頂いたというのも有り、また他にも知りたい方がいらっしゃるようなので、下記で紹介されている画像拡大スクリプト「Luminous」を当方制作のテンプレートで利用する方法をご説明致します。
（因みに当ブログも最近導入致しました。）

画像クリックで画面遷移せずにフワッと表示させて、更にクリックでサッと消せる「Luminous」を、画像にclassを付与する事無く使う方法を説明されています。

画像拡大スクリプトLuminousでクラス付与していない画像もLuminous拡大させる－機能改良

今般、弊ブログで利用しております画像拡大スクリプトの Luminous（ルミナス）のバージョンアップを 2.0.1 → 2.3.2 のように行ったんですが、この機会に、ずっと以前の記事で

oops0011.blog.fc2.com

↑ こちらの記事を参考にしております。
ただ注意点として、FC2ブログで画像クリックした時に「アルバム」表示の機能を利用している場合「Luminous」表示は出来ません。また、当然ながらアンカータグ（a href）で括っていない imgタグにも効きません。

FC2ブログのアルバムを利用している場合は、↓こんな感じの別タブ表示になります。

① ご利用テンプレートのHTML編集枠内に有る </head> の上に下記を追加

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.2/luminous-basic.min.css">
</head>

② 同じくHTML編集枠内最下位置に有る </body> の上に下記を追加

<script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.2/luminous.min.js"></script>
<script>
new LuminousGallery(document.querySelectorAll('.luminous,a[href$=jpg],a[href$=jpeg],a[href$=png]'));
</script>
</body>

アニメーションGIFなどデータ量が大きく表示に負荷が掛かる場合も有るので、拡張子 .gif を外しています。含める場合はカンマ( , )で区切って a[href$=gif] を加えて下さい。

③ この状態だと拡大した画像の左右に送りボタン ＜ ＞ が表示されます。不要な場合はスタイルシート編集枠内最下に下記CSSを追加します。

.lum-gallery-button{
  display:none !important;
}

↓するとこんな感じになります。（画像をクリック）

ポップアップした画像が他のコンテンツの下に潜り込んでしまう場合は、下記のCSSを追加して下さい。

.lum-lightbox{
  z-index:10000;
}

④ 後は更新ボタンを押して頂けば完了です。
お試し頂く場合は、不具合が有った時のためにテンプレートの複製を作っておくと安心です。

この記事の続きはこちら↓

画像拡大スクリプト「Luminous」を使う…の続き

最近自分のブログをスマホで見て画像をタップ…で、ええっ？ナニコレ画像デカ！とビックリしてしまいました。スワイプで全て見ようとすると全体像が掴めなくてかなり大変。

sorauta1.blog.fc2.com