晴歩雨描

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

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

↑ で、影付き枠+ビネット効果を使った写真のWebサムネイルアルバムをつくった。

このWebページのサムネイル画像をクリックした時に画像が拡大されたモーダルウィンドウがポップアップするようにした。

以下のLightbox2を使用。

使い方は簡単。CSSJavaScriptを以下のように読み込んで、<div>を<a>タグで囲い、data-lightbox="group"を追加するだけ。

<link rel="stylesheet" href="lightbox/css/lightbox.min.css">
<script src="lightbox/js/lightbox-plus-jquery.min.js"></script>
<a href="拡大画像.jpg" data-lightbox="group" data-title="神戸散歩">
	<div class="box-frame"><div class="vignette"><img src="縮小画像.jpg"></div></div>
</a>

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

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

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

f:id:art2nd:20190217175405j:plain

モーダルウィンドウにビネット効果がつくようにしたものが以下。