Image Rotation with Fancybox

Question

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?

Answer 1

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

Answer 2

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