使用Fancybox进行图像旋转

问题描述 投票：3回答：6

我正在创建一个界面，允许用户逆时针旋转图像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图像的经验？

javascript jquery html css fancybox
6个回答
2
投票

您可以在花式框内容中旋转最外层的div，在我的情况下，它是fancybox-skin（fancybox v2）

afterShow: function(){
    var click = 1;
    $('.fancybox-wrap').append('<div id="rotate_button"></div>')
        .on('click', '#rotate_button', function(){
            var n = 90 * ++click;
            $('.fancybox-skin').css('webkitTransform', 'rotate(-' + n + 'deg)');
            $('.fancybox-skin').css('mozTransform', 'rotate(-' + n + 'deg)');
        });
};
1
投票

对于fancybox 3，这是我想出的。它使用字体真棒图标，你可以用glyphicons或你选择的任何其他替换。

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

在@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>

然后正如我所说的那样从$(document).ready()初始化奇特的盒子，如下所示（注意我删除箭头并关闭按钮并使用按钮帮助器的tpl属性将它们添加回来）。在那个tpl属性中，我还创建了一个自定义旋转按钮，其中包含onclick和自定义data-rotation属性，该属性将保存当前旋转：

$(document).ready(function() {

    $(".fancybox").fancybox({
        loop   : true,
        helpers: {
            buttons: {
                position: 'top',
                tpl     : '<div id="fancybox-buttons"><ul><li><a class="btnPrev" title="Previous" href="javascript:;"></a></li><li><a id="fancybox-rotate-button" title="Rotate" data-rotation="0" onclick="FancyBoxRotateButton()"></a></li><li><a class="btnNext" title="Next" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:jQuery.fancybox.close();"></a></li></ul></div>'
            }
        },
        closeBtn: false, // you will use the tpl buttons now
        arrows  : false  // you will use the tpl buttons now
    });

这是自定义旋转按钮的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);
}

希望它可以帮到某人！

0
投票

您可以通过将css样式-webkit-transform: rotate(-90deg);仅应用于'.fancybox-inner'类元素而不是'.fancybox-wrap'来旋转图像，以便它只旋转图像而不是包含控件和描述的整个容器。

0
投票

我的解决方案是从旋转框中删除箭头和关闭按钮，并在将旋转应用于整个fancybox-wrap后淡入幻灯片幻灯片。为此，我在“beforeShow”中将fancybox-wrap的显示设置为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();
        }
      }
    });
0
投票

我想保留关闭按钮和标题，所以我用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)');
            }
        });
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.