Ekko灯箱旋转图像

Question

我试图使ekko灯箱内的旋转图像，但到目前为止还没有成功。这里是jsfiddle为你修补。提前致谢。

$(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)');  
     }); 
     }, 
    }); 
}); 

Answer 1

添加这个CSS

.rotate-button { 
    position: absolute; 
    right: 0; 
} 

.modal-body .ekko-lightbox-item { 
    overflow: hidden; 
} 

工作拨弄

https://jsfiddle.net/rhhs018p/10/