画像拡大スクリプト「Luminous」を使う…の続き
最近自分のブログをスマホで見て画像をタップ…で、ええっ?ナニコレ画像デカ!とビックリしてしまいました。
スワイプで全て見ようとすると全体像が掴めなくてかなり大変。スマホで綺麗に丁度良く表示できないかと思った訳です。
今更な話なのですが、お世話になっているぼっちん様の所に記事になっておりますのでご紹介。これで安心です。
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;
}
カーソルに使用している画像が表示できない場合に備え、カンマ(,)の後にキーワード値(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;
}
Re: ぼっちん 様へ
コメント頂き有難うございます♪早速記事を修正致しました。これってこちらの記事も修正されますか?
https://oops0011.blog.fc2.com/blog-entry-455.html
本当にいつも 助かる記事を有難うございます。m(__)m
[ 返信 * 編集 ]▼ ▲