Skip to content

Commit

Permalink
add image rotation option (#96)
Browse files Browse the repository at this point in the history 
* PHP 8.1 Compatibility

* PHP 8.1 Compatibility

* Full language support

* #33 add image rotation option

* Update mybbfancybox.js
  • Loading branch information
@SvePu
SvePu authored Nov 19, 2022
1 parent 87239e7 commit 676af1b
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 44 deletions.
3 changes: 3 additions & 0 deletions UPLOAD/inc/languages/english/admin/mybbfancybox.lang.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,9 @@
$l['setting_mybbfancybox_arrows'] = 'Display arrows for navigation?';
$l['setting_mybbfancybox_arrows_desc'] = 'YES (default) to display arrows at the edges of the screen for simple navigation between images, NO to hide';

$l['setting_mybbfancybox_rotate'] = 'Enable image rotation?';
$l['setting_mybbfancybox_rotate_desc'] = 'YES (default) to enable the rotation option, NO to disable';

$l['setting_mybbfancybox_thumbs'] = 'Display thumbnails sidebox?';
$l['setting_mybbfancybox_thumbs_desc'] = 'YES to automatically display thumbnails sidebox, NO (default) to hide';

Expand Down
6 changes: 6 additions & 0 deletions UPLOAD/inc/plugins/mybbfancybox.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,10 @@ function mybbfancybox_install()
'optionscode' => 'yesno',
'value' => 1
),
'rotate' => array(
'optionscode' => 'yesno',
'value' => 1
),
'thumbs' => array(
'optionscode' => 'yesno',
'value' => 0
Expand Down Expand Up @@ -372,6 +376,7 @@ function mybbfancybox_start()
'mybbfancybox_loop' => 'loop',
'mybbfancybox_infobar' => 'infobar',
'mybbfancybox_arrows' => 'arrows',
'mybbfancybox_rotate' => 'rotate',
'mybbfancybox_thumbs' => 'thumbs',
'mybbfancybox_per_post_gallery' => 'perpostgallery',
) as $key => $var) {
Expand Down Expand Up @@ -465,6 +470,7 @@ function mybbfancybox_start()
loop: {$loop},
infobar: {$infobar},
arrows: {$arrows},
rotate: {$rotate},
thumbs: {
autoStart: {$thumbs},
hideOnClose: true
Expand Down
154 changes: 110 additions & 44 deletions UPLOAD/jscripts/mybbfancybox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,59 +5,60 @@
* @param Object MyBBFancyBox
* @return Object MyBBFancyBox
*/
var MyBBFancyBox = (function($, m) {
var MyBBFancyBox = (function ($, m) {
"use strict";

var lang = {
clickToEnlarge: "Click to enlarge",
CLOSE: 'Close',
NEXT: 'Next',
PREV: 'Previous',
ERROR: 'The requested content cannot be loaded.<br/>Please try again later.',
PLAY_START: 'Start slideshow',
PLAY_STOP: 'Pause slideshow',
FULL_SCREEN: 'Full screen',
THUMBS: 'Thumbnails',
DOWNLOAD: 'Download',
SHARE: 'Share',
ZOOM: 'Zoom',
MINIMIZE: 'Minimize',
},
options = {
perpostgallery: true,
slideClass: '',
closeExisting: true,
loop: true,
protect: false,
keyboard: true,
arrows: true,
infobar: true,
thumbs: {
autoStart: false,
hideOnClose: true,
clickToEnlarge: "Click to enlarge",
CLOSE: 'Close',
NEXT: 'Next',
PREV: 'Previous',
ERROR: 'The requested content cannot be loaded.<br/>Please try again later.',
PLAY_START: 'Start slideshow',
PLAY_STOP: 'Pause slideshow',
FULL_SCREEN: 'Full screen',
THUMBS: 'Thumbnails',
DOWNLOAD: 'Download',
SHARE: 'Share',
ZOOM: 'Zoom',
MINIMIZE: 'Minimize',
},
buttons: [
'slideShow',
'fullScreen',
'thumbs',
'share',
'download',
'zoom',
'minimize',
'close',
],
};
options = {
perpostgallery: true,
slideClass: '',
closeExisting: true,
loop: true,
protect: false,
keyboard: true,
arrows: true,
rotate: true,
infobar: true,
thumbs: {
autoStart: false,
hideOnClose: true,
},
buttons: [
'slideShow',
'fullScreen',
'thumbs',
'share',
'download',
'zoom',
'minimize',
'close',
],
};

/**
* initialize FancyBox
*
* @return void
*/
function init() {

if (options.buttons && options.buttons.indexOf("minimize") !== -1) {
// Add click event for minimize button
$(document).on('click', '[data-fancybox-minimize]', function() {
$(document).on('click', '[data-fancybox-minimize]', function () {
var fb = $.fancybox.getInstance();

if (fb) {
Expand All @@ -66,12 +67,12 @@ var MyBBFancyBox = (function($, m) {
});
}

$('.post_body img').each(function() {
$('.post_body img').each(function () {
var currentImage = $(this);
if (currentImage.hasClass('smilie') == false && currentImage.parent().is('a') == false) {
var pid = currentImage.parents('.post_body.scaleimages').attr('id').split('_')[1];
var gallerystr = options.perpostgallery ? ('data-' + pid) : 'gallery';
currentImage.wrap("<a title='" + lang.clickToEnlarge + "' target='_blank' data-fancybox='" + gallerystr + "' data-type='image' href='" + currentImage.attr("src") + "'>");
currentImage.wrap("<a title='" + lang.clickToEnlarge + "' target='_blank' data-fancybox='" + gallerystr + "' data-type='image' href='" + currentImage.attr("src") + "'>");
}
});

Expand All @@ -80,7 +81,7 @@ var MyBBFancyBox = (function($, m) {
$.fancybox.defaults.i18n.en = lang;

// FancyBox default settings

$('[data-fancybox]').fancybox(options);
}

Expand All @@ -95,7 +96,72 @@ var MyBBFancyBox = (function($, m) {
}

m.setup = setup;

$(init);
return m;
})(jQuery, MyBBFancyBox || {});

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_right = $('<button data-rotate-right class="fancybox-button fancybox-button--rotate" title="Rotate to right">' +
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">' +
' <path d="M11.074,9.967a4.43,4.43,0,1,1-4.43-4.43V8.859l5.537-4.43L6.644,0V3.322a6.644,6.644,0,1,0,6.644,6.644Z" transform="translate(10.305 1) rotate(30)"/>' +
'</svg>' +
'</button>')
.prependTo(this.instance.$refs.toolbar)
.on('click', function (e) {
self.rotate('right');
});

self.$button_left = $('<button data-rotate-left class="fancybox-button fancybox-button--rotate" title="Rotate to left">' +
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">' +
' <path d="M11.074,6.644a4.43,4.43,0,1,0-4.43,4.43V7.752l5.537,4.43-5.537,4.43V13.289a6.644,6.644,0,1,1,6.644-6.644Z" transform="translate(21.814 15.386) rotate(150)"/>' +
'</svg>' +
'</button>')
.prependTo(this.instance.$refs.toolbar)
.on('click', function (e) {
self.rotate('left');
});
},

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

0 comments on commit 676af1b

Please sign in to comment.