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

今般、弊ブログで利用しております画像拡大スクリプトの Luminous(ルミナス)のバージョンアップを 2.0.1 → 2.3.2 のように行ったんですが、この機会に、ずっと以前の記事でまだ画像拡大スクリプトを利用していないaリンク画像、そしてjQueryライブラリーである「Lightbox」や「Lity」で利用していた画像拡大が、jQueryを排除したことで使えなくなってしまっていた画像等を、一挙に解決出来ないものかと試行錯誤して、なんとか形になりましたので、その「機能改良」のメリットを公開致します。

注意)2021/03/31 09:10
Luminousの新旧バージョンの共存は出来ませんので、新バージョン設置の際は、旧バージョンのJSやCSSは排除してから設置することが必要です。


画像拡大スクリプト Luminous のバージョンアップ

筆者がLuminousを知る前には、jQueryのライブラリーである「Lightbox」や「Lity」を使って、画面遷移せず記事欄にそのまま拡大画像を表示する方法を利用しておりました、それ以前は、ごく普通にaタグリンク拡大していて、何もスクリプト類は利用しておりませんでした。

せっかく Luminous 2.3.2 にバージョンアップするのに「何か旨みを作らないと意味ないよね」と、劣化傾向にある脳みそをこねくり回して「おっ これ出来るじゃん(笑)」と、面白いことを実現出来ました。

クラス class="luminous" 付与していない画像もついでにLuminous拡大させてしまえ

面白いタイトルでしょ ↑ これ とても興味津々かと思います(爆)

Luminousで画像拡大するには、必ずそのaタグリンク画像に <a class="luminous" href="画像URL" のように、クラス付与して機能させる訳ですが、何方でもLuminousを利用開始する前までの過去画像にはそのクラス付与は当然してありませんから、せっかくのLuminousが利用出来ない訳ですが、今回そんな画像でも、Luminous拡大を実現出来てしまう方法のヒントがJavaScriptに存在していることを確認出来ましたので、早速便利に使ってみました。

クラス class="luminous" 付与していない画像も拡大させた実際のサンプル

先ずは、その方法でクリック拡大するサンプルを表示してみますので、画像クリックしてその表示具合を確認してみてください。

クラスを付与していないUFO画像

この画像の貼り付け用HTMLは下記の通りです。

<a href="https://blog-imgs-137.fc2.com/o/o/p/oops0011/2021-03-28-ufo-1000-11t.jpeg"><img class="lazyload shadow-attachment2" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://blog-imgs-137.fc2.com/o/o/p/oops0011/2021-03-28-ufo-1000-11t.jpeg" width="800" height="450" alt="クラスを付与していないUFO画像"></a>

画像の遅延読み込みである lazyload や 画像の影である shadow-attachment2 のクラスは付与してありますが、class="luminous" は行ってありません。 従って、画像にマウスを載せた時の「クリックするとポップアップ拡大表示出来る」を意味するオーバーレイ表示はしませんが、キチンとLuminousで拡大表示が実現しております。

※ 注意) lazyload や shadow-attachment2 のクラスを付与していない一般的なHTMLですと、下記のようになるかと思います。

<a href="https://blog-imgs-137.fc2.com/o/o/p/oops0011/2021-03-28-ufo-1000-11t.jpeg" target="_blank"><img src="https://blog-imgs-137.fc2.com/o/o/p/oops0011/2021-03-28-ufo-1000-11t.jpeg" width="800" height="450" alt="クラスを付与していないUFO画像"></a>

このことは、Luminousを利用開始する以前の、何も画像拡大スクリプトを利用していなかった、一般的なaタグリンク画像までもLuminous拡大出来てしまうということなんです。そして、更に楽しいことは、jQueryを排除した為に利用出来なくなってしまっていた「Lightbox」や「Lity」の画像までも、何も修正を加えることなくそのままLuminous拡大が実現出来てしまうという楽しさです(笑)

クラス class="luminous" 付与した通常のLuminous拡大させたサンプル

画像にマウスホバーすると「クリックするとポップアップ拡大表示出来る」を意味する円形オーバーレイ(それ用のCSS設定は別途個人での用意が必要)も普通に表示出来ます。

※ 追記 2022/06/19 08:45 :この画像表示のHTML(サンプル)

<div class="p_plus">
<figure class="cli-photo">
<a class="luminous" href="https://blog-imgs-137.fc2.com/o/o/p/oops0011/2021-03-28-ufo-2-1000.jpeg">
  <img loading="lazy" src="https://blog-imgs-137.fc2.com/o/o/p/oops0011/2021-03-28-ufo-2-1000.jpeg" width="1000" height="459" style="width: 800px; height: auto;" alt="クラスを付与したUFO画像"></a>
<div class="rp_plus48">
      <img loading="lazy" src="https://blog-imgs-113.fc2.com/o/o/p/oops0011/rp_plus48.png" width="36" height="36" alt="ルーペアイコン" style="object-fit: contain;">
</div></figure>
</div>

※ 追記 2022/04/23 09:00
弊ブログでのオーバーレイのサンプル記事は、下記ブログカードをクリックしてご参照戴けます。

どうしたら実現出来るか

先ずは、Luminous 2.3.2 を利用するスクリプトコード記述は下記のようになります

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

スタイルシート luminous-basic.min.css の設置も今まで通りに必要ですが、ファイル容量が小さいですから、上記のような外部読み込みよりも、テンプレートの</head>上に直接インラインで記述した方がレンダリングブロックを防げて良いと思いますが、その辺りは適時対応してください。

① 上記HTMLコードの1行目のみを、ブログテンプレートのHTML欄の</head>の直上にコピペします。

② 上記HTMLコードの2~5行目までを、ブログテンプレートのHTML欄の</body>の直上にコピペします。

LuminousGallery がみそ

上記スクリプトコードにあります黄緑色部分の 「LuminousGallery」 部分は、Luminous拡大した画像をギャラリー表示するのに必要なんですが、この記述がないと今回の便利機能を利用出来ませんので Gallery を追記します。
ただ、ギャラリー化すると、拡大した画像の左右に送りボタン < > 表示されますが、それが不必要な場合には、CSS後部に下記を追記することでその送りボタンを非表示にすることが出来ます。(ギャラリー表示機能を利用しない場合)

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

これが一番のキモ

上記スクリプトコード中の 4行目 の下記コードが一番重要です。

new LuminousGallery(document.querySelectorAll('.luminous,a[href$=jpg],a[href$=jpeg],a[href$=png]'));

黄緑色で表示してある部分で、class="luminous" が付与されているか否かを判定して、されていない場合には各aタグリンク画像ファイル拡張子に対して、Luminousによりポップアップ拡大表示を行うようになっております。

※ 注意)2021/03/30
FC2ブログで、画像クリックした時に「アルバム」表示機能を利用している場合には、本件のクリック拡大は機能しません。

まとめ

弊ブログでは、jQueryを排除したことで利用出来なくなっていた「Lightbox」や「Lity」でのクリック拡大機能が、このバージョンのLuminousで復活出来たことと、ずっと過去のaタグリンク画像までLuminous拡大を応用出来るようになって、もうウハウハ気分です(笑)




Luminousを宣伝するアナウンサー嬢

aタグリンク画像は
ぜ~んぶLuminous拡大
しちゃいましょうね~

関連する記事
よつば
2021/03/31 (Wed) 11:01

出来ました~ヽ(^◇^*)/ ワーイ

ぼっちん先生~♪ 先生が親切に教えてくれたから、頭の悪い私でも出来ました~♪
昨夜下のほうのjs部分とその下の部分、一気に削除したら上手く表示されなかったの
それで、残したんだけど・・・LuminousGalleryの部分を削除した位置に持って行ったらバッチリ!v(*'-^*)-☆ ok!!
本当にぼっちん先生ってスゴイよね~先生のサンプル画像のように試してみたら今回は同じように表示されたよ♪

ぼっちん先生~♪いつも温かく見守ってくれてありがとうございます💕

ぼっちん
ぼっちん
2021/03/31 (Wed) 13:37

To よつばちゃん

よつばちゃん、こんにちは~ ^^

皆さんが「こんなん、面倒くさそうなことやってられないよね~」(笑)って感じの記事に、果敢にチャレンジしてくれてありがとです~(笑)
紆余曲折(笑)はあっても、キチンと新バージョンの「Luminous」を設置完了しちゃって、さすがですね~ (^-^)//""パチパチパチ

まぁ、私が機能改良とした部分って、オリジナルのLuminousの使い方からしたら「ちょっとやり過ぎなんじゃ?」って思うLuminousファン(笑)もいることでしょうけど「こんな使い方だって出来るんですよ~♪」ってサンプルみたいなものです(笑)

新バージョンのLuminous、お互いに楽しんじゃいましょうね~ (•‾⌣‾•)にこ♪

aki
2021/04/01 (Thu) 22:11

やってみました!

こんばんは♪私もやってみました。(^_^)
そもそも「Luminous」や「Lightbox」等を利用しておらず、画像は別タブ表示だったのです。使いたくても過去に遡るのが面倒臭くって。^^;

cssのCDNはhead内の一番下、javascriptはbody内の一番下に入れて試してみた所、無事に「Luminous」使えました!
とっても嬉しいです♪有益な記事、有難うございました♪

ぼっちん
ぼっちん
2021/04/01 (Thu) 22:31

To akiさん

akiさん、こんばんは~ ^^

おおっ、akiさんも採用してくださったなんて、とっても嬉しいですよ~ ありがとうございます (•‾⌣‾•)にこ♪
なるほどなるほど、クリックした時の画像は「別タブ表示」にしてあったって、そりゃ好都合でしたね~(笑)
まさに、今回の機能改良部分が存分に活かされます。

是非、使い倒してお楽しみください~い (•‾⌣‾•)にこ♪
何か、不都合でも見つかったら言ってくださいね。

ポップアップした画像が、もし、他のコンテンツの下に潜り込むようなことがあれば、CSS末尾に
.lum-lightbox{z-index:10000}
を追加してくださったらそれは回避出来ますからね~ 値はakiさんのお好みでいいと思います。

徳川たぬこ
2021/04/03 (Sat) 16:06

やっと、、

半分ぐらい理解できた気がしますが、まだ混乱しております…😅💦
よつばさんのところで拝見して以来ずっと気になっていたこちらの素晴らしい記事…笑


自分のところではスクリプトを貼り換えても
(ルミナスでない画像が)大きくならなかったので
「あれ?????よつばさんの記事の画像はちゃんと大きくなっているのに????」
と混乱しておりました



足りない頭でよく考えてみた結果、

<a href="画像url"><img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="画像url" alt=""></a>

↑この貼り方をした画像に対応するシステムということで………、、合っておりますでしょうか…


すみません…
飲み込みが悪く…お手数おかけします…(T▿T)

ぼっちん
ぼっちん
2021/04/03 (Sat) 16:19

To 徳川たぬこちゃん

たぬこちゃん

あのですね、LuminousのCSSがテンプレートで読み込まれていないみたいですよ~ (^_^; アハハ…
だって、CSS書いてないみたい (^^ゞポリポリ

> ↑この貼り方をした画像に対応するシステムということで………、、合っておりますでしょうか…

はい、そうですよ~ ^^
ああ、たぬこちゃんのず~~~っと過去記事で使っている「アルバム表示」のものは、拡大は無理ですからね~(笑)

ところでね、たぬこちゃんのLuminousって、以前から バージョン 2.3.2 になっていたんじゃなかったですか?
だったら記事中の「これが一番のキモ」のコードだけ差し替えたらキチンと動く筈なんですよ ^^

-
2021/04/03 (Sat) 16:35

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

徳川たぬこ
2021/04/03 (Sat) 16:41

もし!

それで合っているなら
万福日記さんのテンプレートにコードを足してあげたらものすごく喜ばれるのではないかと思います!˖✧
°˖✧◝(⁰▿⁰)◜✧˖°

(まだよくわかっていないのですが←)
ぼっちん先生、素晴らしい情報をありがとうございます!

ぼっちん
ぼっちん
2021/04/03 (Sat) 16:52

To 鍵コメさん

鍵コメさん、こんにちは~(笑)

なるほどなるほど、CSSの在処の件はOK 確認しました~(笑)ちゃんとLuminous動いてますね ^^

class="luminous" を付与していない過去画像で、あくまでも、ごく単純にFC2ブログの記事編集で画像を貼り付けた aリンク画像である
<a href="画像URL" target="_blank"><img src="画像URL" alt=""></a>
の画像をクリックした時に、ポップアップ拡大出来る訳で、そこに class="lazyload" の遅延読み込みがある・ないは全く関係なしですからね ^^

<img src="画像URL" alt="">
これは拡大のしようがないです(笑)

何も難しく考える必要ありません、ごく単純なことです ^^

ぼっちん
ぼっちん
2021/04/03 (Sat) 16:57

To 徳川たぬこちゃん

> それで合っているなら
> 万福日記さんのテンプレートにコードを足してあげたらものすごく喜ばれるのではないかと思います!˖✧

(〃^▽^〃)oあはははっ♪
それ、いきなりやっちゃったら、浜ちゃん、びっくりしちゃうでしょうよ~ (≧ω≦。)プププ
うんうん(^-^) 是非に仕掛けてやってあげてくださいな ( ̄ー ̄)ニヤ~

-
2021/04/03 (Sat) 17:17

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

ぼっちん
ぼっちん
2021/04/03 (Sat) 18:59

To 鍵コメさん

鍵コメさん、こんばんは ^^

> <img src="画像URL" alt="">

いくら何でも ↑ この画像の貼り方では拡大は出来ませんですね~ (^_^; アハハ…

そうそう、FC2ブログでは、パソコンは一切使わずにスマホだけでブログ運営していて、それで画像を貼り付けたり装飾したりって、もの凄く器用にあれやこれやってやっている人がけっこう多いんだけど、何とも不思議ですよね(笑)
私なんて自慢じゃないけど、パソコンでしか記事書けないですから(笑)

いろいろお誉め戴いて恐縮です、ありがとうございます (*^o^*)ぽっ

[ コメント投稿に関するご案内 ]

弊ブログでは、コメント主さんがご自身のサイトURLを記入してくださると、コメント一覧にご自身のアイコンが表示されるようになっております。

コメント投稿時には、入力必須項目お名前・ご自身のサイトURL・コメント本文」の三項目を入力すると、送信ボタンが表示されます。

コメントは管理人承認後に表示されます。

更新順
Topics