我正在尝试在ekko-lightbox中旋转图像,但到目前为止还没有成功。这是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)');
});
},
});
});
最佳答案
添加此CSS
.rotate-button {
position: absolute;
right: 0;
}
.modal-body .ekko-lightbox-item {
overflow: hidden;
}
工作提琴
https://jsfiddle.net/rhhs018p/10/