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/