Question

我正在我的图片库页面上显示一些图片。

在这个页面上，我使用jquery灯箱来显示图像。

灯箱工作正常，但它没有下一个和上一个按钮。如何在这些页面上添加下一个和上一个按钮。

有多个页面有灯箱，所以我不想做出重大改变。任何人都可以建议我如何添加下一个和上一个按钮几乎没有变化？

这是我的aspx页面代码：

 <div class="row">
 <div class="col-xs-12  col-md-3">
        <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
              <img src="9.jpg" alt="..." class="styleforimg"/>
        </a>
    </div>
    <div class="col-xs-12 col-md-3">
        <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
              <img src="10.jpg" alt="..." class="styleforimg"/>
        </a>
    </div>
    <div class="col-xs-12  col-md-3">
        <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
         <img src="11.jpg" alt="..." class="styleforimg"/>
        </a>
    </div>
      </div>

<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
        <div class="modal-content">
            <div class="modal-body">
                <img src="<%= ResolveUrl("~") %>Images/logo.png"  alt="" />
            </div>
        </div>
    </div>
</div>

这是javascript文件代码：

  $(document).ready(function () {
      var $lightbox = $('#lightbox');

      $('[data-target="#lightbox"]').on('click', function (event) {
          var $img = $(this).find('img'),
              src = $img.attr('src'),
              alt = $img.attr('alt'),
              css = {
                  'maxWidth': $(window).width() - 100,
                  'maxHeight': $(window).height() - 100
              };

          $lightbox.find('.close').addClass('hidden');
          $lightbox.find('img').attr('src', src);
          $lightbox.find('img').attr('alt', alt);
          $lightbox.find('img').css(css);
      });

      $lightbox.on('shown.bs.modal', function (e) {
          var $img = $lightbox.find('img');

          $lightbox.find('.modal-dialog').css({ 'width': $img.width() });
          $lightbox.find('.close').removeClass('hidden');
      });
  });

将下一个和上一个按钮添加到灯箱

0 个答案: