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

最近自分のブログをスマホで見て画像をタップ…で、ええっ?ナニコレ画像デカ!とビックリしてしまいました。
スワイプで全て見ようとすると全体像が掴めなくてかなり大変。スマホで綺麗に丁度良く表示できないかと思った訳です。

今更な話なのですが、お世話になっているぼっちん様の所に記事になっておりますのでご紹介。これで安心です。

  1. スマホ用サイズ調整。
  2. 画像をマウスオーバー時に拡大可能のカーソルを表示。

1 ) スマホ用サイズ調整。

デフォルトではスマホで画像をポップアップさせると原寸大で表示されてしまいます。また、高解像度ディスプレイで画像がぼやけてしまう難点も。
その場合は下記のような設定をすると解消されるとの事。(スタイルシート内に追加)

@media screen and (max-width: 480px) {
  .lum-lightbox-inner img {
    max-width: 180vw !important;/* スワイプ範囲含む横幅調整 */
    max-height: 100vh !important;/* 上下余白調整 */
  }
}

(コメントにて値の変更を連絡頂きました。)詳しくはぼっちん様の記事をどうぞ。

2 ) 画像をマウスオーバー時に拡大可能のカーソルを表示。

画像が拡大出来る事を、カーソルの変化で分かるようにする方法です。簡単なスタイルを追加するだけで表示の拡大案内をする事が出来ます。

CSSの属性セレクターは、指定された属性の有無や値で要素を選択するので、下記のように記述するとスタイルを適用できます。(スタイルシート内に追加)

a.luminous,a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"]{
  cursor:zoom-in;
}
うちのにゃんこ

上記であれば、class名 luminous と href が ".jpg" ".jpeg" ".png" で終わる<a>要素 に、拡大可能のカーソルが表示されます。 (アニメーションGIFなどデータ量が大きく表示に負荷が掛かる場合も有るので、拡張子 .gif を外しています。含める場合はカンマ(,)で区切って a[href$=".gif"] を加えて下さい。)
見本画像がとんでもなくはしたない格好で寝ている左ちまき♀・右はなお♂、でスミマセン。^^;
この方法はcursorに画像を使う事も出来ます。その場合は下記のように記述して下さい。

a.luminous,a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"]{
  cursor:url(画像のパス),zoom-in;
}
うちのにゃんこ2

カーソルに使用している画像が表示できない場合に備え、カンマ(,)の後にキーワード値(pointer や zoom-in など他のカーソル)を指定する必要があります。
上の画像見本に使用している『+虫眼鏡(Base64)画像』を使いたい場合は、一番下の【 Read More 】をクリックしてコピーし使用して下さい。

マウスオーバー時にオーバーレイを表示する場合は下記の記事もどうぞ。

属性セレクターについては下記をご覧下さい。

カーソルの種類については下記をご覧下さい。

軽くて使い易い 画像拡大スクリプト「Luminous」、おススメです。(^_^)

『+虫眼鏡(Base64)画像』を使用したい場合は、下記のCSSをご利用下さい。
画像はBase64文字列にエンコード済みですので、そのままコピペでお使い頂けます。(画像をBase64で変換する事でテキストデータとして扱え、HTTPリクエストがなくなり表示の高速化が出来ます。但しデータサイズは3割超ほど増えます。…元画像は 1.10 KB 程です。)

a.luminous,a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"]{
cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABC9JREFUeNq0Vk1IXFcUPm9m1PgzOsY4oi5UqjsZIVqpK0nrwgazczMbaboZB9SAdFvIIu5iCDihuKsQakFsumhtnBCLCP4FNaBWuxAX/itRUQd/x5fv3Lz7cufNm9qAOXC497777v3Oz3fOe1pWVhZJcTgcdHl5KUaIB/NvMf8acx/0FvQSugWdwd5r7A1qmnas67o4d3BwQDy3E36u2YA5MbZh2Qotof+WOehjaM//AXNYnhXA0pcYn1iBXC4XG2O9qRz6M/QXqPsKw/i8Q4YtH8phqZObRUVFNDIyQhsbG7S1tUU7Ozva+vo6DQ4OUmZm5qlyjx/nfodmQMlOWbTi4mJh+OHhYTgajd6Rm+Pj41RWVmbetri4SKenp1RRUWGGJRwOH/v9/lQFtCclJeU7u1Bubm6aOXsA757KvC0tLZGay93dXSotLf2QpLk5KigoMPeWl5cPKysrzRCmpaXdzcjI+MsKxsZy/DwA+EE+HB4ejgFiiUQiMcCqlJSUuNva2lalt2dnZz8iAk6OgqpC0tPT/dnZ2TpreXm5bierq6u6fGdhYSFuH0zUc3JyDnjf4/Hobrf7NrwjVQUbwbJvpJV9fX22LEpKSjLnyEncPue4vr5+Q84RqTpOh5UgLkwqlJCIcXt7OyZc09PT5nxsbOxjWCBgpchhZ2dnysDAgKR4lR1JXNCbso6Sk5NpZWWFfD6faY1VWlpa4oqVDQCBbokugXMYvbZg2NTlIRmmRECJJDU1lc9rZj3hTqfTGQ+G5O7A7S9QYyI8Xq+X6UxHR0ekMlR6FAqFqLa2lhSqE4hBINE7XvIz3Ll2cXERDwYLpmDVV7yYmZmhmpoaQX2V/nV1ZlMR+4WFhXEXBYPBc6UtTbBn1lBynb2Si6amJttGen5u3hNDDinsxejoqKz0KID4i0AMKFWA4fIwxn9lwdrRnzu6erFVGhoatnHPDcPQVyiVBSabqgIMqMew4pEkSSAQEO1KFRSpOc/NzY3ZGxoaikxOTnoNYkRw10N4r5+cnJCqAoxDBGufw/pfZVFWV1dTf3+/6RG6As3Pz9Ps7Czl5eWZHra3t581NjamK9j/4MxEItZqTFsjqW64+wJTs6OglXGxCoJI7/b29qi3t5c6OjqiALTym1vXM+PDGyP7+/sfwETfQkIRa7ayC/P7n1BmzJ630C+VHIesgAxm/VJH8OL3sPgeDBi5AoSZ8if/o6D71GAMKdTnovzJNoyKZyJPvGa64lkl3uEfHh7zuMEjp2vQN1j/jfWc8Z5Q5L8LzaFFdhLc1Y2hWXrmusL6KVbjt0GQQnZzaz3yGh62Gl2p2fAwYJAsyK846JoFgEGAdCshDXBIwWjNKb9VbK3aYqQHck8Wt/pcfc/y7A/ckw+tMs7zJ8fzWcASAPq0RD+V1yX4XXgKjEZMf3svwADueDRB3QGAuwAAAABJRU5ErkJggg=="),zoom-in;
}
[Tag] * カスタマイズ * Luminous

Comments

ありがとうございます

akiさん、こんにちは~ ^^
わざわざ、Luminous改良版の追加記事を書いてくださって、ありがとうございます ^^

それで【 スマホ用サイズ調整 】のCSSなんですが、最近ちょっと変更しまして、今は
------------------
@media screen and (max-width: 410px) {
.lum-lightbox-inner img {
max-width: 180vw !important;/* スワイプ範囲含む横幅調整 */
max-height: 100vh !important;/* 上下余白調整 */
}
}
------------------
このように修正致しました (^^ゞポリポリ
この方が、スマホ表示時の縦長画像や横長画像に対しても割とバランスよく表示されるようになっております。
まぁ、好みに応じて「自己調整」して戴ければと思います ^^

Luminous ほんっとに使い勝手が好いですよね~(笑)
2021-05-14-16:28 ぼっちん
[ 返信 * 編集 ]
aki

Re: ぼっちん 様へ

コメント頂き有難うございます♪早速記事を修正致しました。
これってこちらの記事も修正されますか?
https://oops0011.blog.fc2.com/blog-entry-455.html

本当にいつも 助かる記事を有難うございます。m(__)m
2021-05-14-17:19 aki
[ 返信 * 編集 ]

Re: aki 様へ

> これってこちらの記事も修正されますか?

は~い、ただいま弊記事も修正致しました ^^
ご指摘、ありがとうございました m(_ _)m
2021-05-14-17:53 ぼっちん
[ 返信 * 編集 ]

ありがとうございます

akiさん、こんばんは。
私が使っている画像レイアウトの中に、オーバーレイと相性の悪いものがあるようで、ずっと拡大表示を避けてLuminous画像を載せていました。
akiさんがご紹介くださった拡大アイコン、これだとレイアウトが崩れることなく使えるようなので、早速導入させていただきました。

一緒に、ぼっちんさんの改訂版も入れました。

akiさん、ぼっちんさん
いつもありがとうございます。
2021-05-14-18:24 そふぃあ
[ 返信 * 編集 ]
aki

Re: ぼっちん 様へ

記事確認致しました。
不勉強なので1つお伺い致します。
iPhone12ProMaxは6.7インチ 428×926との事ですが、(max-width: 430px)やそれ以上のサイズではいけないのですか?
お教え頂けると幸いです。(一応記事に参考を書いておきました。)m(__)m
2021-05-14-22:22 aki
[ 返信 * 編集 ]
aki

Re: そふぃあ 様へ

こんばんは。コメント有難うございます。(^-^)
今迄私自身の記事内に class="luminous" が無いものですから、過去の画像も含めて「拡大可能」が分かると良いなと思いまして。
そのために新たな枠組みを作ったりCSSで弄るのも大変なので、安易で小さいですがリンクのカーソルだけ変更してみました。^^;
使える所が有って何よりです。

そふぃあさんのブログ、拝見しております。(いつも読み逃げでスミマセン。)
残雪の桜も黄色い桜も素敵ですね。GWに帰省出来なかったので帰りたくなってしまいました。
早く県外ナンバーが後ろ指指されなくなりますように…切に願います。^^;
2021-05-14-22:42 aki
[ 返信 * 編集 ]

Re: aki 様へ

いろいろうっかりしてしまってすみませんです (^^ゞポリポリ
どうやら 430px でも足りないようです。

(max-width: 480px)

と設定してください。
最近の多くのスマホ画面は 480px で設定している皆さんが多い様子ですね。
度々、お手数をお掛け致します m(_ _)m
2021-05-14-22:51 ぼっちん
[ 返信 * 編集 ]
aki

Re: ぼっちん 様へ

お返事有難うございます!早速記事直しました。
流石に480px以上は無い…ですよね?そう望みます。
お助けコメント、有難うございました。m(__)m
2021-05-14-23:16 aki
[ 返信 * 編集 ]

Re: aki 様へ

>今迄私自身の記事内に class="luminous" が無いものですから、過去の画像も含めて「拡大可能」が分かると良いなと思いまして。

画像を拡大できることを知らせる画像は便利かも..とは思っていましたが、過去記事に class="luminous" を加筆しなければならない事を考えるとさっぱり気が乗りませんでした。
そんな私には、この記事の内容はピッタンコです。
2021-05-15-14:07 呑兵衛あな
[ 返信 * 編集 ]
aki

Re: 呑兵衛あな 様へ

こんにちは。コメント有難うございます。
先程記事内「cursorに画像も使える」旨を追加致しました。
ご自身で画像を作るも良し、フリーのものを使うも良し、FC2ブログのサーバーにアップロードして使えますのでご参考まで。

cursorを変えるだけなので簡単に利用出来るのが利点ですね。
呑兵衛あな様にとって この記事が有益なものであれば幸いです。(^-^)
2021-05-15-16:05 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2022-06-28-17:59 -
[ 返信 ]
aki

Re: - 様へ

こんにちは。そちらでお返事致しますね。
2022-06-29-15:07 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2022-06-29-16:15 -
[ 返信 ]





非公開コメント