使用燈箱的鏈接rel屬性將圖像添加到div

我需要一些jQuery幫助。我爲我的燈箱使用https://github.com/jbutz/bootstrap-lightbox，基本上我想要做的是使用rel元素內部添加的內容和燈箱div。使用燈箱的鏈接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文件，我說在引導下面的代碼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類中添加圖像標籤，但不幸的是，當我點擊它加載的圖像時，圖像和lightbox div框架不居中。我假設它不接受圖像的寬度和高度值。

任何見解都非常感謝。非常感謝。

來源

2012-06-23 Wasabi Developer

你對抗轉變爲不同的收藏夾，如果它是解決您遇到的問題？ –

嗨，亞當，不，如果您有任何建議，我肯定會嘗試不同的燈箱。謝謝：） –