fancybox
fancybox copied to clipboard
fancyapps
Rotate Images
I would very much appreciate if fancyBox was able to rotate the image being overlayed. I can image it as being an option such as:
<script>
$(el).fancybox({
'enableRotation': true,
})
</script>
The option would place two buttons, to rotate the image +90º and -90º. It could also be made available in the buttons helper.
Your thoughts?
Add this code to js file (fancybox 3) Remmeber set "instance.opts.rotate" is true in variable defaults
`// ========================================================================== // // Rotate image // Adds rotate functionality // // ========================================================================== ;(function (document, $) { 'use strict';
var RotateImage = function( instance ) {
this.instance = instance;
this.init();
};
$.extend( RotateImage.prototype, {
$button : null,
angle : 0,
init : function() {
var self = this;
self.$button = $('<button data-rotate-left class="fancybox-button fancybox-button--rotate" title="Xoay ảnh sang trái"><i class="fa fa-undo" aria-hidden="true"></i></button>')
.appendTo( this.instance.$refs.buttons )
.on('touchend click', function(e) {
self.rotate('left');
});
self.$button = $('<button data-rotate-right class="fancybox-button fancybox-button--rotate" title="Xoay ảnh sang phải"><i class="fa fa-repeat" aria-hidden="true"></i></button>')
.appendTo( this.instance.$refs.buttons )
.on('touchend click', function(e) {
self.rotate('right');
});
},
rotate : function (direct) {
var self = this;
var image = self.instance.current.$image[0];
var sign = (direct == 'right') ? "" : "-";
self.angle += 90;
$(image).css('webkitTransform', 'rotate(' + sign + self.angle + 'deg)');
$(image).css('mozTransform', 'rotate(' + sign + self.angle + 'deg)');
},
});
$(document).on('onInit.fb', function(e, instance) {
if ( !!instance.opts.rotate) {
instance.Rotate = new RotateImage( instance );
}
});
}(document, window.jQuery));`
@hiidemo Didn't work. If I add your code to the Fancybox file and set "instance.opts.rotate: true," in defaults, the image doesn't open in Fancybox anymore.
I think part of the problem may lie in the fact that the code was not posted correctly. Notice how
}(document, window.jQuery));
is not even in the code window?
@JamesAndersonJr Yes, i did notice that and fixed it from the beginning. The code doesn't show any errors. I don't think that it's just a copy paste fail.
@hiidemo That's exactly what i'm trying to achieve. Can you help me out here? Is it possible to show the complete final script?
Update:
When i'm adding instance.opts.rotate : true to the defaults, the console is showing the error SyntaxError: Unexpected token .. I guess i'm doing something wrong here.
For fancybox 3 I did this....
/*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)');
});
});
@paulhonnoll Great Job! I have just 1 recommendation: change your preceding comment to 'block' style, for error-free copy-and-pasting. i.e.:
/* adding custom item to fancybox menu to rotate image */...
So is the code above working? I am looking for something like this because some uploaded files are rotated by 90°, so it would be nice to add a button :)
I tested it with Firefox, IE 10+ and Chrome and it was working. It does assume you are using fancybox 3 and font awesome for the fa-rotate.
Wij don't rotate you your images in a photo editor before you upload the images to a web sertver?
@Eldenroot i still use it, works perfect.
@acwolff Because in some cases you have to deal with website users that are uploading the images
@Wndworks in that case, the up-loaders should rotate the images in a photo editor before they upload! I think it is not worthwhile to add code to FancyBox for this purpose!
Unfortunately not all users do that :( so I would really welcome this featurr in FancyBox
@fancyapps
@Wndworks - unfortunately not working for me, can you post your working code on codepen? thank you!
hello all, i updated @hiidemo code and its working with the current fancybox version (3.5.6) :
var RotateImage = function (instance) {
this.instance = instance;
this.init();
};
$.extend(RotateImage.prototype, {
$button_left: null,
$button_right: null,
transitionanimation: true,
init: function () {
var self = this;
self.$button_left = $('<button data-rotate-left class="fancybox-button fancybox-button--rotate" title="Rotate to left"><i class="fas fa-undo" aria-hidden="true"></i></button>')
.prependTo(this.instance.$refs.toolbar)
.on('click', function (e) {
self.rotate('left');
});
self.$button_right = $('<button data-rotate-right class="fancybox-button fancybox-button--rotate" title="Rotate to right"><i class="fas fa-redo" aria-hidden="true"></i></button>')
.prependTo(this.instance.$refs.toolbar)
.on('click', function (e) {
self.rotate('right');
});
},
rotate: function (direction) {
var self = this;
var image = self.instance.current.$image[0];
var angle = parseInt(self.instance.current.$image.attr('data-angle')) || 0;
if (direction == 'right') {
angle += 90;
} else {
angle -= 90;
}
if (!self.transitionanimation) {
angle = angle % 360;
} else {
$(image).css('transition', 'transform .3s ease-in-out');
}
self.instance.current.$image.attr('data-angle', angle);
$(image).css('webkitTransform', 'rotate(' + angle + 'deg)');
$(image).css('mozTransform', 'rotate(' + angle + 'deg)');
}
});
$(document).on('onInit.fb', function (e, instance) {
if (!!instance.opts.rotate) {
instance.Rotate = new RotateImage(instance);
}
});
The code can be added at the end of the "jquery.fancybox.js" file or just loaded after the file.
The icons are using last version of font awesome (v5).
Updates:
- the current version of fancybox uses "this.instance.$refs.toolbar" instead of "this.instance.$refs.buttons"
- changed the "appendTo" to "prependTo" to add the icons at left of the existent ones
- updated the rotate counter since las one was not working correctly
- added transition css
- remove "touchend" event catcher because it was causing double rotation in mobiles
@Eldenroot Hello, yes, I supose. You probably will need the FA API for that since the svg is generated from JS and replace the <i> icons with the var with the generated icon :
var igloo = window.FontAwesome.icon({ prefix: 'fas', iconName: 'igloo' })
https://fontawesome.com/how-to-use/with-the-api/setup/getting-started
let me know if it works!
Yes, you need to generate the svg code you want and put it there instead of the <i>
I do not since I use FA icons. I will need to seach online for a vector icon or create one and export it as SVG or use online converter with a vector image
even more simple, you could just go to the FA icons page and copy the svg code from them =)