晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

影付き枠+ビネット効果付き写真サムネイルアルバムのポップアップ拡大画像にビネット効果。

↑ で、影付き枠+ビネット効果を使った写真のWebサムネイルアルバムに、ポップアップ拡大画像を追加した。

しかし、この方法では、ポップアップ拡大画像にビネット効果はつかない。

ビネット効果付きの拡大画像1枚を表示するHTMLページを別途用意し、サムネイルアルバムの各画像から<a>タグでリンクし、リンク先のHTMLでは<a href="javascript:history.back()">で、元のページに戻るようにした。更に、キーボードの[Esc]キーでも、元のページに戻るようにした。

厳密にはポップアップウィンドウとは言えないが、拡大画像を表示したページでマウスクリックするか[Esc]キーを押せば、元のサムネイルページに戻る。

サムネイルと拡大画像では写真サイズが違うが、同じCSSを使っているのでビネット効果の写真全体に対しての効果の度合いは違う。

<body>
<a href="javascript:history.back()">
<div class="box-frame">
	<div class="vignette">
		<img src="xxx.jpg">
	</div>
</div>
</a>
<script>
document.onkeydown = keyPress;
function keyPress( e ) {
	e = e || window.event;
	if (e.keyCode == 27) {	// ESC :Exit, Return
		history.back();
		return false;
	}
	return true;	// その他 (ファンクションキーなどを有効にするため)
}
</script>
</body>

拡大画像1枚を表示するHTMLを1つずつ作成するのは面倒なので、PHPを使って、ファイル名を引数で渡すようにしている。

<a href="photo.php?photo=ファイル名" data-lightbox="group" class="thickbox">

---【photo.php】--- <body> <a href="javascript:history.back()"> <div class="box-frame"> <div class="vignette"> <img src="<?= $_GET['photo']; ?>"> </div> </div> </a> </body>

Lightbox版によるポップアップウィンドウ 版の画面イメージ】

f:id:art2nd:20190217181032j:plain

【<a>タグ+javascript:history.back() 版の画面イメージ】

f:id:art2nd:20190217181044j:plain

作成したWebページが以下。

https://ok2nd.sakura.ne.jp/album/kobe1-3.html

ここまでやってきた事のまとめ。以下、ブログ記事リンク。

CSS「box-shadow」で、写真にビネット効果をつけてみた。

https://ok2nd.sakura.ne.jp/css-filter/box-shadow.html

↓↓↓

CSSで写真に影付きのシンプルな枠(フレーム)を付ける。

↓↓↓

CSS)写真に影付きのシンプルな枠+ビネット効果

https://ok2nd.sakura.ne.jp/css-filter/box-frame.html

↓↓↓

CSS)影付き枠+ビネット効果を使った写真のサムネイルアルバムをつくってみた。

https://ok2nd.sakura.ne.jp/album/kobe1.html

↓↓↓

Google 日本語WEBフォント「さわらび明朝」を使ってみた。

↓↓↓

スマホでページ全体を縮小表示したい時は、viewportのinitial-scaleで縮小値を指定する。

↓↓↓

影付き枠+ビネット効果付き写真サムネイルアルバムにポップアップ拡大画像を追加。

https://ok2nd.sakura.ne.jp/album/kobe1-2.html

↓↓↓

【このブログ】影付き枠+ビネット効果を使った写真のサムネイルアルバムのポップアップ拡大画像にビネット効果。

https://ok2nd.sakura.ne.jp/album/kobe1-3.html

https://ok2nd.sakura.ne.jp/album/kobe1-v.html (CSS別ファイル化版)