我正在尝试在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/

10-05 23:05
查看更多