Top Page › Template › カスタマイズ › [複数画像対応]画像拡大スクリプト「Luminous」を使う
2021-04-28 (Wed) 02:41

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

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

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

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

① ご利用テンプレートの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を追加します。

にゃんこ2
.lum-gallery-button{
  display:none !important;
}

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

にゃんこ
わんこ
うさこ

④ 後は更新ボタンを押して頂けば完了です。

お試し頂く場合は、不具合が有った時のためにテンプレートの複製を作っておくと安心です。

[Tag] * カスタマイズ * Luminous

Comments

No Subject

仕事が早いですね~
早速利用させていただきました。
https://nono634.blog.fc2.com/blog-entry-5087.html
https://nono634.blog.fc2.com/blog-entry-5065.html
まことにもって良い具合です。
ありがとうございました
2021-04-28-16:12 呑兵衛あな
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-04-28-20:55 -
[ 返信 ]
aki

Re: 呑兵衛あな 様へ

こんばんは。コメント有難うございます。m(__)m

私も最近導入したばかりですが、何もしなくても(過去の分まで)拡大表示されるのは有難いです。
ホバーエフェクトは無いですが私には十分です。
焦らず待ってみると、より良いものが出て来るものですね。(^_^)
2021-04-29-00:02 aki
[ 返信 * 編集 ]
aki

Re: - 様へ

こんばんは。コメント有難うございます。(^_^)
そちらでお返事致しますね。
2021-04-29-00:03 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-04-29-20:22 -
[ 返信 ]
aki

Re: - 様へ

こんばんは。コメント有難うございます。(^-^)
検証して何か分かりましたら、またお返事下さいね♪
2021-04-29-21:53 aki
[ 返信 * 編集 ]






非公開コメント