影付き枠＋ビネット効果付き写真サムネイルアルバム(神戸散歩)にポップアップ拡大画像を追加。

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

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

以下のLightbox2を使用。

使い方は簡単。CSSとJavaScriptを以下のように読み込んで、<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

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

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

---