SQLの窓

2016年06月11日


Lightbox2 で data-title にボタンを埋め込んで、クリックしたら 画像のファイル名を取り出して Lightbox2 を閉じるギャラリーのデモ

デモページ


画像ひとつぶんの記述
<a href='575be6f335da1_artwork_image_8667.jpg' data-lightbox='gallery' data-title='<input type="button" value="選択" onclick="select_img(this)" data-src="575be6f335da1_artwork_image_8667.jpg">'><img src='s/575be6f335da1_artwork_image_8667.jpg'></a>
lightbox2 は、v2.8.2 です。なので、ライブラリの読み込みは ページの最後です。

data-title にボタンの HTML をセットして、onclick イベントで select_img 関数を呼び出し、ボタンのインスタンスを引数で渡します。

ボタンには、data-src 属性を追加して、画像ファイル名をセットしていますので、select_img 関数 でこの値を取り出します。

select_img 関数
function select_img(data) {

	var src = $(data).data("src");

	alert( src );

	$(".lb-close").trigger("click");

}


Lightbox2 をどうやって閉じようかと、普通に試したら $(".lb-close").trigger("click") で閉じる事ができました。jQuery で普通にイベント登録している事が推測されますね。

関連する記事

Lightbox2 ライブラリの今時の使い方

▼ Lightbox2 の必要なファイル


※ .css の中の画像のパスは画像ファイル名のみになっています



【JavaScript ライブラリの最新記事】
posted by lightbox at 2016-06-11 20:06 | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり