デモページ画像ひとつぶんの記述
<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 ライブラリの最新記事】
- clipboard.js を使用してテキストをコピーする際に clipboard.js が必要とするパーツと意味
- clipboard.js のコピーさせるテキストを自由にダイナミックに渡す方法は、Advanced Usage の text です。
- JavaScript の内部コード文字列を SHIFT_JIS としてダウンロードさせる方法
- 自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その2 / ソースをクリップボード..
- 自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その1 / ソースの表示 )
- ブラウザ上のテキストデータを名前を付けて保存できる FileSaver.js を使って、テーブルのデータを Excel で開ける事を想定した CSV にして PC に保存
- JavaScript のみで、SHIFT_JIS や EUC-JP を UrlEncode に近い Escapeする Escape Codec Library
- JavaScript でクリップボードに文字列をコピーする Clipboard.js の使用方法と注意事項
- Lightbox2 ライブラリの今時の使い方
- Google Visualization API って apikey いらなくなった? / ライブラリロード方法が変わってました
- EASELJS を使用した画像の分割と分割されたエリア毎のアニメーション / createjs.Ticker の reset と init はうまく動きませんでした
- EASELJS を使用した画像の縮小とトリミングと角丸マスク / 画像は new Image でイベント処理して画像サイズを取得します
- Three.js r73 での Canvas で平面を飛翔させる為の詳細デモ
- クリスマスに備えて、『雪を降らす snowstorm.js』のカスタマイズ / ダウンロードも何も必要ありません。jQuery も必要ありません
- JavaScript : 誰でもすぐ使える Google 円グラフ(2) : データを Google ドキュメントから取得する
- JavaScript : 誰でもすぐ使える Google 円グラフ
- カラーピッカーのライブラリなのですが、ちょっと雑な作りだったので、修正してリリースです。
- google.load で Yahoo UI のメニューを使う
