使用ekko-lightbox旋转图像

Question

我正在使用ekko-lightbox。我正在尝试在模态内添加旋转按钮来旋转图像。我的代码如下所示：

<div id="ekkoLightbox-302" class="ekko-lightbox modal fade in show" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;">
<div class="modal-dialog" role="document" style="display: block; width: auto; max-width: 280px;">
<div class="modal-content">
  <div class="modal-header" style="display:none">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    <h4 class="modal-title">&nbsp;</h4>
  </div>
  <div class="modal-body">
    <div class="ekko-lightbox-container" style="height: 200px;">
      <div class="ekko-lightbox-item fade"></div>
      <div class="ekko-lightbox-item fade in show">
        <img src="https://sparkler-dev.s3.amazonaws.com/fake_data/scrap_1.jpg" class="img-fluid" style="width: 100%;">
      </div>
      <div class="rotate-button"><a href="#" class="pull-right rotate" style="font-size: 18px;padding: 3px 0;"><i class="fa fa-repeat" aria-hidden="true"></i> Rotate</a></div>
    </div>
  </div>
  <div class="modal-footer" style="display:none">&nbsp;</div>
</div>

模态代码：

{{1}}

问题是当我点击旋转按钮时，旋转整个模态。像这样：

当我尝试在选择器中选择ligthbox内的图像进行旋转时。我得到这样的东西：

如何修复“旋转”按钮。

谢谢！

Answer 1

试用此代码

JS

$(document).on('click', '[data-toggle="lightbox"]', function(event) {
 event.preventDefault();
 $(this).ekkoLightbox({
 onShow: function() {
  $('.ekko-lightbox-container').append('<div class="rotate-button"><a href="#" class="pull-right rotate" style="font-size: 18px;padding: 3px 0;"><i class="fa fa-repeat" aria-hidden="true"></i> Rotate</a></div>')

  var degrees = 0;
  $('.rotate').bind('click', function(event) {
    event.preventDefault();
    var $lightboxphoto = $('.ekko-lightbox').children().find('img');
    degrees += 90;
    $lightboxphoto.css('-ms-transform', 'rotate(' + degrees + 'deg)');
    $lightboxphoto.css('-webkit-transform', 'rotate(' + degrees + 'deg)');
  });
},
});
});

旋转图像时由于其固定宽度而熄灭，因此请使用 vmin单位。 但IE8（caniuse）不支持它们。

对于IE9支持，您需要指定vm而不是vmin

CSS

  .ekko-lightbox-container img.img-responsive {
    width:90vm; 
    width: 90vmin;
    height:90vm;
    height: 90vmin;
    max-width: 500px;
    max-height: 500px;
    margin: 0 auto;
   }

DEMO