Javascript 使用Fancybox进行图像旋转

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

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

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

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

但这也导致了控件的旋转（并将关闭按钮放置在左上角而不是右上角）：

如果仅对图像应用旋转，则图像周围的白色边框的方向错误：

---

任何人都有对fancybox图像应用转换的经验吗？

您可以通过应用css样式

-webkit转换来旋转图像：旋转（-90度）仅适用于“.fancybox-inner”类元素，而不是“.fancybox-wrap”，这样它将只旋转图像，而不是旋转包含控件和描述的整个容器。
我的解决方案是从fancybox中删除箭头和关闭按钮，并在旋转应用于对象后在fancybox幻灯片中淡出整个fancybox包装。为此，我在“beforeShow”中将fancybox包装的显示设置为“none”，然后在“AfterShow”中，我在图像中淡入淡出。这是我的密码：

    $(".fancybox").fancybox({
      helpers: {
        overlay: {
          locked: false
        }
      },
      arrows: false,
      closeBtn: false,
      beforeShow: function(){
        if($('.fancybox-image').length>0){
           $('.fancybox-wrap').css('display', 'none');
            var imageID = getFancyboxImageID();
            var rotation = getFancyboxRotation(imageID);
            if(rotation!=0){
              fancyboxRotate(rotation);  
            }
        }
      },
      afterShow: function(){
        if($('.fancybox-image').length>0){
          $('.fancybox-wrap').fadeIn();
        }
      }
    });

您可以旋转fancybox内容中最外层的div，在我的例子中，它是
fancybox skin
（fancybox v2）

afterShow:function（）{
var-click=1；
$（'.fancybox wrap'）.append（''）
.on（'单击'，'旋转按钮'，函数（））{
var n=90*++点击；
$（'.fancybox skin'）.css（'webkitttransform'，'rotate（-'+n+'deg'）；
$（'.fancybox skin'）.css（'mozTransform'，'rotate（-'+n+'deg'）；
});
};
在@Ashik的帮助下，我最终完成了这项工作，并且没有放弃显示标题，因为我旋转了
。fancybox inner
并覆盖了一些CSS，这样我就可以保留白色边框。我还通过
$（document）.ready（）
函数初始化了fancybox，因此我不得不将按钮绑定得稍微不同

最后，这是一个很长的答案，所以如果我遗漏了什么，请告诉我，因为这是完全可能的！此外，我们不需要支持IE（感谢上帝），因此它可能在那里正常工作，也可能无法正常工作

我继续前进，并删除了常规的箭头和关闭按钮，使他们留在顶部。这需要添加花式方框按钮帮助器CSS和JS文件：

<link href="/Content/css/jquery.fancybox.css" rel="stylesheet"/>
<link href="/Content/css/jquery.fancybox-buttons.css" rel="stylesheet"/>

<script src="/Content/Scripts/fancybox/jquery.fancybox.js"></script>
<script src="/Content/Scripts/fancybox/jquery.fancybox.pack.js"></script>
<script src="/Content/Scripts/fancybox/jquery.fancybox-buttons.js"></script>

以下是自定义旋转按钮的onclick函数：

window.FancyBoxRotateButton = function() {
    var fancyboxInner        = $('.fancybox-inner');
    var fancyBoxRotateButton = $('#fancybox-rotate-button');
    var currentRotation      = parseInt(fancyBoxRotateButton.data("rotation"));
    var rotation             = 'rotate(-' + (90 * ++currentRotation) + 'deg)';

    fancyboxInner.css({
        '-moz-transform'   : rotation,
        '-webkit-transform': rotation,
        '-o-transform'     : rotation,
        'transform'        : rotation
    });

    fancyBoxRotateButton.data("rotation", currentRotation.toString());
}

最后但并非最不重要的一点是，我们需要修复白色边框，然后我还要更改自定义按钮的大小
ul
，并设置自定义旋转按钮的图片。也许有更好的方法可以做到这一点（如果你知道的话，请告诉我！），但我只是简单地删除了
.fancybox skin
的背景和框阴影，并将其添加到
。fancybox inner
：

#fancybox-buttons ul{
    width: 130px;
}

#fancybox-buttons #fancybox-rotate-button {
    background-image: url('/Content/images/fancybox_rotate.png')
}

.fancybox-skin {
    background: none !important;
}

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: none !important;
    -moz-box-shadow   : none !important;
    box-shadow        : none !important;
}


.fancybox-inner {
    border-radius     : 4px;
    border            : 2px solid white;
    padding           : 10px;
    background        : white none repeat scroll 0 0;
    -webkit-box-shadow: 0 10px 25px #000000;
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    -moz-box-shadow   : 0 10px 25px #000000;
    -moz-box-shadow   : 0 10px 25px rgba(0, 0, 0, 0.5);
    box-shadow        : 0 10px 25px #000000;
    box-shadow        : 0 10px 25px rgba(0, 0, 0, 0.5);
}

希望它能帮助别人
 我想保留关闭按钮和标题，所以我用CSS3转换做了一个小魔术：

afterShow: function() {
    var click = 0, deg;
    $('.fancybox-inner')
        .append('<img id="rotate_button" src="https://cdn0.iconfinder.com/data/icons/super-mono-sticker/icons/button-rotate-cw_sticker.png" title="Rotate 90° CW">')
        .on('click', '#rotate_button', function() {
            click = (++click % 4 === 0) ? 0 : click;
            deg = 90 * click;
            $('.fancybox-wrap').css('transform', 'rotate(' + deg + 'deg)');
            $('#rotate_button').css('transform', 'rotate(-' + deg + 'deg)');
            sessionStorage.setItem('prev_rotated_image', $('.fancybox-image').prop('src'));
            sessionStorage.setItem($('.fancybox-image').prop('src'), deg);

            // move the close button and rotate the label
            switch (deg) {
                case 90:
                    $('.fancybox-close').css('transform', 'translate(-' + $('.fancybox-wrap').width() + 'px, 0px)');
                    $('.fancybox-title').find('span.child').css('transform', 'translate(' + ($('.fancybox-wrap').width() / 2 + $('.fancybox-title').height() / 2 + 8) + 'px, -' + ($('.fancybox-wrap').height() / 2) + 'px) rotate(-' + deg + 'deg)');
                    break;
                case 180:
                    $('.fancybox-close').css('transform', 'translate(-' + $('.fancybox-wrap').width() + 'px, ' + $('.fancybox-wrap').height() + 'px)');
                    $('.fancybox-title').find('span.child').css('transform', 'translate(0px, -'+ ($('.fancybox-wrap').height() + $('.fancybox-title').height() + 16) +'px) rotate(-' + deg + 'deg)');
                    break;
                case 270:
                    $('.fancybox-close').css('transform', 'translate(0px, ' + $('.fancybox-wrap').height() + 'px)');
                    $('.fancybox-title').find('span.child').css('transform', 'translate(-' + ($('.fancybox-wrap').width() / 2 + $('.fancybox-title').height() / 2 + 8) + 'px, -' + ($('.fancybox-wrap').height() / 2) + 'px) rotate(-' + deg + 'deg)');
                    break;
                case 0:
                case 360:
                default:
                    $('.fancybox-close').css('transform', 'translate(0px, 0px)');
                    $('.fancybox-title').find('span.child').css('transform', 'translate(0px, 0px) rotate(0deg)');
            }
        });
}

afterShow:function（）{
var click=0，度；
$（'.fancybox内部'）
.append（“”）
.on（'单击'，'旋转按钮'，函数（））{
单击=（++单击%4===0）？0:单击；
deg=90*点击；
$（'.fancybox wrap'）.css（'transform'，'rotate（'+deg+'deg'））；
$（'rotate_button'）.css（'transform'，'rotate（-'+deg+'deg'）；
sessionStorage.setItem（'prev_rotated_image'，$（'.fancybox image'）.prop（'src'））；
sessionStorage.setItem（$（'.fancybox image'）.prop（'src'），deg）；
//移动“关闭”按钮并旋转标签
开关（度）{
案例90：
$（'.fancybox close'）.css（'transform'，'translate（-'+$（'.fancybox wrap'））.width（）+'px，0px'）；
$（'.fancybox title'）.find（'span.child'）.css（'transform'，'translate（'+（$（'.fancybox wrap'）.width（）/2+$（'.fancybox title'）.height（）/2）+'px）旋转（'+deg+'deg'）；
打破
案例180：
$（'.fancybox-close'）.css（'transform'，'translate（-'+$（'.fancybox-wrap'））.width（）+'px'，+$（'.fancybox-wrap'）.height（）+'px'）；
$（'.fancybox title'）.find（'span.child'）.css（'transform'，'translate（0px，-'+（$（'.fancybox wrap'）.height（）+$（'.fancybox title'）.height（）+16）+'px）旋转（'+deg++'deg'）；
打破
案例270：
$（'.fancybox close'）.css（'transform'，'translate（0px'，+$（'.fancybox wrap'））.height（）+'px'）；
$（'.fancybox title'）.find（'span.child'）.css（'transform'、'translate（-）+（$（'.fancybox wrap'）.width（）/2+$（'.fancybox title'）.height（）/2）+'px）rotate（'+deg+'deg'）；
打破
案例0：
案例360：
违约：
$（'.fancybox close'）.css（'transform'，'translate（0px，0px）'）；
$（'.fancybox title'）.find（'span.child'）.css（'transform'，'translate（0px，0px）rotate（0deg'）；
}
});
}
对于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)');
            });
    });

//将自定义项添加到fancybox菜单以旋转图像
$（document）.on（'onInit.fb'，函数（e，实例）{
如果（$（'.fancybox工具栏'）。查找（'#旋转按钮'）。长度==0{
$（'.fancybox工具栏'）.prepend（''）；
}
var-click=1；
$（'.fancybox工具栏'）。打开（'单击'，'旋转按钮'，函数（）{
var n=90*++点击；
$（'.fancybox image wrap img'）.css（'webkitttransform'，'rotate（-'+n+'deg'）；
$（'.fancybox image wrap img'）.css（'mozTransform'，'rotate（-'+n+'deg'）；
});
});
谢谢，我添加了som，这是一个很棒的片段
afterShow: function() {
    var click = 0, deg;
    $('.fancybox-inner')
        .append('<img id="rotate_button" src="https://cdn0.iconfinder.com/data/icons/super-mono-sticker/icons/button-rotate-cw_sticker.png" title="Rotate 90° CW">')
        .on('click', '#rotate_button', function() {
            click = (++click % 4 === 0) ? 0 : click;
            deg = 90 * click;
            $('.fancybox-wrap').css('transform', 'rotate(' + deg + 'deg)');
            $('#rotate_button').css('transform', 'rotate(-' + deg + 'deg)');
            sessionStorage.setItem('prev_rotated_image', $('.fancybox-image').prop('src'));
            sessionStorage.setItem($('.fancybox-image').prop('src'), deg);

            // move the close button and rotate the label
            switch (deg) {
                case 90:
                    $('.fancybox-close').css('transform', 'translate(-' + $('.fancybox-wrap').width() + 'px, 0px)');
                    $('.fancybox-title').find('span.child').css('transform', 'translate(' + ($('.fancybox-wrap').width() / 2 + $('.fancybox-title').height() / 2 + 8) + 'px, -' + ($('.fancybox-wrap').height() / 2) + 'px) rotate(-' + deg + 'deg)');
                    break;
                case 180:
                    $('.fancybox-close').css('transform', 'translate(-' + $('.fancybox-wrap').width() + 'px, ' + $('.fancybox-wrap').height() + 'px)');
                    $('.fancybox-title').find('span.child').css('transform', 'translate(0px, -'+ ($('.fancybox-wrap').height() + $('.fancybox-title').height() + 16) +'px) rotate(-' + deg + 'deg)');
                    break;
                case 270:
                    $('.fancybox-close').css('transform', 'translate(0px, ' + $('.fancybox-wrap').height() + 'px)');
                    $('.fancybox-title').find('span.child').css('transform', 'translate(-' + ($('.fancybox-wrap').width() / 2 + $('.fancybox-title').height() / 2 + 8) + 'px, -' + ($('.fancybox-wrap').height() / 2) + 'px) rotate(-' + deg + 'deg)');
                    break;
                case 0:
                case 360:
                default:
                    $('.fancybox-close').css('transform', 'translate(0px, 0px)');
                    $('.fancybox-title').find('span.child').css('transform', 'translate(0px, 0px) rotate(0deg)');
            }
        });
}

//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)');
            });
    });

//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">Rotate</button>');
    }
    var click = 1;
    $('.fancybox-toolbar').on('click', '#rotate_button', function () {
            var n = 90 * ++click;
            $('.fancybox-slide--current img').css('webkitTransform', 'rotate(-' + n + 'deg)');
            $('.fancybox-slide--current img').css('mozTransform', 'rotate(-' + n + 'deg)');
            $('.fancybox-slide--current img').css('transform', 'rotate(-' + n + 'deg)');
        });
});