jQuery の支援が必要です。ライトボックスにhttps://github.com/jbutz/bootstrap-lightboxを使用しています。基本的にやりたいことは、rel 要素の内部にあるものを使用してライトボックス div に追加することです。
<ul class="photo">
<li>
<a href="#demoLightbox" class="image" data-toggle="lightbox" rel="/image/photo1.jpg">
<img src="/image/photo1_thumb.jpg">
</a>
</li>
<li>
<a href="#demoLightbox" class="image" data-toggle="lightbox" rel="/image/photo2.jpg">
<img src="/image//photo2_thumb.jpg">
</a>
</li>
</ul>
<div class="lightbox fade" id="demoLightbox">
<div class='lightbox-content'>
# Javascript will insert image src <img> depending on which link is click
</div>
</div>
Javascript ファイルから、bootstrap lightbox.js データ API に次のコードを追加しました。
$('.lightbox-content').html('<img src="' + $(this).attr("rel") + '"/>');
だからこんな感じ
/* LIGHTBOX DATA-API
* ============== */
$(function () {
$('body').on('click.lightbox.data-api', '[data-toggle="lightbox"]', function ( e ) {
var $this = $(this), href
, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
, option = $target.data('lightbox') ? 'toggle' : $.extend({}, $target.data(), $this.data())
e.preventDefault()
$target.lightbox(option);
$('.lightbox-content').html('<img src="' + $(this).attr("rel") + '"/>');
})
})
これを正しく行っている場合は使用しません。.lightbox-content クラス内に画像タグを追加していますが、残念ながら、画像をクリックすると読み込まれますが、画像とライトボックスの div フレームが中央に配置されません。画像の幅と高さの値を受け入れていないと思います。
どんな洞察も大歓迎です。本当にありがとう。