使用灯箱的链接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

你对抗转变为不同的收藏夹，如果它是解决您遇到的问题？ –

嗨，亚当，不，如果您有任何建议，我肯定会尝试不同的灯箱。谢谢：） –