0

我需要一些 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 框架没有居中。我假设它不接受图像中的宽度和高度值。

非常感谢任何见解。非常感谢。

4

1 回答 1

0

我最终选择了 Jack Moore 的 Colorobox，http://www.jacklmoore.com/colorbox/guide

很好很简单:)

于 2012-06-23T18:35:03.090 回答