javascript - Image Rotation with Fancybox - Stack Overflow

admin管理员组

文章数量:1343311

I'm creating an interface that allows users to rotate images 90 degrees counter clockwise. I rotate the image on the page using jquery and -webkit-transform, but I also want to update the preview of image in the Fancybox slideshow.

I tried rotating the image by doing the following:

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

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

But that ended up rotating the controls as well (and also placed the close button on the top left instead of the top right):

If I just apply the rotation to the image, the white border around it has the wrong orientation:

Anyone have experience applying transformations to a fancybox image?

I'm creating an interface that allows users to rotate images 90 degrees counter clockwise. I rotate the image on the page using jquery and -webkit-transform, but I also want to update the preview of image in the Fancybox slideshow.

I tried rotating the image by doing the following:

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

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

But that ended up rotating the controls as well (and also placed the close button on the top left instead of the top right):

If I just apply the rotation to the image, the white border around it has the wrong orientation:

Anyone have experience applying transformations to a fancybox image?

• javascript
• jquery
• html
• css
• fancybox

Share Improve this question Follow edited Jul 15, 2014 at 15:20 scientiffic asked Jul 15, 2014 at 0:04 scientifficscientiffic 9,4151919 gold badges7979 silver badges155155 bronze badges

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 3

For fancybox 3 here is what I came up with. It uses font awesome icons, you can replace with glyphicons or whatever else you choose.

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

You can rotate the outer most div in the fancy box content, In my case it's 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)');
        });
};

With help from @Ashik I finally got this working and did not have to give up showing the title since I instead rotate .fancybox-inner and overwrite some CSS so I can keep the white border. I also initialize the fancybox from the $(document).ready() function so I had to bind the button a little different.

Finally, this is kind of a long answer so let me know if I left something out since it is entirely possible! Also, we do not need to support IE (thank the lord), so it may or may not work correctly there.

I went ahead and removed the regular arrow and close buttons so they would stay put at the top. This requires that you add the fancy box button helper CSS and JS files:

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

Then initializing fancy box is being done from $(document).ready(), as I said, like below (notice I remove the arrows and close buttons and add them back in using the button helper's tpl property). In that tpl property I also create a custom rotation button with an onclick and a custom data-rotation property which will hold the current 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
    });

Here is the custom rotation button's onclick function:

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());
}

Last but not least we need to fix the white border and then I also change the size of the custom button ul and set my custom rotation button's picture. There is probably better ways to do this (if you know of one let me know!) but I simply removed .fancybox-skin's background and box shadow and added it to .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);
}

Hope it helps someone!

You can rotate your image by applying the css style -webkit-transform: rotate(-90deg); only to the '.fancybox-inner' class element instead of the '.fancybox-wrap' so that it will rotate only the image and not the whole container that includes the controls and descriptions.

My solution was to remove the arrows and close button from the fancybox and fade in the fancybox slideshow after the rotation was applied to the entire fancybox-wrap. To do this, I set the display of the fancybox-wrap to none in the "beforeShow", and then on "AfterShow", I fade in the image. Here's my code:

    $(".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();
        }
      }
    });

I wanted to keep the close button and the caption so I did a little magic trick with CSS3 transform:

afterShow: function() {
    var click = 0, deg;
    $('.fancybox-inner')
        .append('<img id="rotate_button" src="https://cdn0.iconfinder./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)');
            }
        });
}

Thanks, @Paul for a great snippet, I have added some class changes (current slide) and CSS property that worked for my version of fancybox3. Might help someone.

Note: you can replace the "Rotate" text with an icon.

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

See this issue on Github: https://github./fancyapps/fancybox/issues/1100

Code of user seltix5 is working in fancybox v3. I tested it myself.

You just need to append his/her code to your fancybox.js file. It simply extends fancybox object with rotate functionality after event "onInit.fb". It also adds rotate buttons to top menu and smooth rotate animation.

本文标签： javascriptImage Rotation with FancyboxStack Overflow