Question

我正在尝试在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)');    
        });
        },
   });
});

Answer 1

添加此CSS

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

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

工作小提琴

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

Ekko灯箱旋转图像

1 个答案: