javascript - 使用 Fancybox 进行图像旋转

Question

我正在创建一个界面，允许用户将图像逆时针旋转 90 度。我使用 jquery 和 -webkit-transform 在页面上旋转图像，但我还想更新 Fancybox 中的图像预览。幻灯片。

我尝试通过执行以下操作来旋转图像:

 $(".fancybox").fancybox({           
      afterShow: function(){
        fancyboxRotation();
      }
    });

function fancyboxRotation(){
    $('.fancybox-wrap').css('webkitTransform', rotate(-90deg));
    $('.fancybox-wrap').css('mozTransform', rotate(-90deg));
}

但这最终也会旋转控件(并且还将关闭按钮放在左上角而不是右上角):

如果我只是对图像应用旋转，它周围的白色边框的方向是错误的:

有人对 fancybox 图像应用变换有经验吗？

Answer 1

对于 fancybox 3，这是我想出的。它使用字体很棒的图标，您可以用字形图标或您选择的任何其他内容替换。

//adding custom item to fancybox menu to rotate image
    $(document).on('onInit.fb', function (e, instance) {
        if ($('.fancybox-toolbar').find('#rotate_button').length === 0) {
            $('.fancybox-toolbar').prepend('<button id="rotate_button" class="fancybox-button" title="Rotate Image"><i class="fa fa-repeat"></i></button>');
        }
        var click = 1;
        $('.fancybox-toolbar').on('click', '#rotate_button', function () {
                var n = 90 * ++click;
                $('.fancybox-image-wrap img').css('webkitTransform', 'rotate(-' + n + 'deg)');
                $('.fancybox-image-wrap img').css('mozTransform', 'rotate(-' + n + 'deg)');
            });
    });