Skip to content

Added rotation buttons to rotate the preview image #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
amunim wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added rotation buttons to rotate the preview image #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
24f5c97
Added rotation feature
amunim Aug 20, 2024
c20ad7c
Update README.md for rotation demo screenshot
amunim Aug 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@

[![Join the chat at https://gitter.im/indrimuska/zoomify](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/indrimuska/zoomify?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

Zoomify is a jQuery plugin for simple lightboxes with zoom effect.
Zoomify is a jQuery plugin for simple lightboxes with zoom effect and rotation options.

Check out the examples page: [http://indrimuska.github.io/zoomify](http://indrimuska.github.io/zoomify).

![Zoomify: jQuery Plugin for lightboxes](http://indrimuska.github.io/zoomify/img/zoomify-preview.png)
![Rotation](https://github.com/user-attachments/assets/b395c8ed-a9d7-4187-835b-5b0a36d99180)

## Installation

Expand Down Expand Up @@ -57,6 +58,10 @@ zoom-in.zoomify | Fired before each zoom-in transformation.
zoom-in-complete.zoomify | Fired after each zoom-in transformation.
zoom-out.zoomify | Fired before each zoom-out transformation.
zoom-out-complete.zoomify | Fired after each zoom-out transformation.
rotate-left.zoomify | Fired before each rotate-left transformation.
rotate-left-complete.zoomify | Fired after each rotate-left transformation.
rotate-right.zoomify | Fired before each rotate-right transformation.
rotate-right-complete.zoomify | Fired after each rotate-right transformation.

```javascript
$('#myImage').on('zoom-in.zoomify', function () {
Expand All @@ -66,4 +71,4 @@ $('#myImage').on('zoom-in.zoomify', function () {

## License

Copyright (c) 2015 Indri Muska. Licensed under the MIT license.
Copyright (c) 2015 Indri Muska. Licensed under the MIT license.
5 changes: 4 additions & 1 deletion dist/zoomify.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

121 changes: 74 additions & 47 deletions dist/zoomify.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,35 @@
*
* (c) 2015 Indri Muska - MIT
*/
;(function($){
; (function ($) {

// initialization
Zoomify = function (element, options) {
var that = this;

this._zooming = false;
this._zoomed = false;
this._zoomed = false;
this._timeout = null;
this.$shadow = null;
this.$image = $(element).addClass('zoomify');
this.options = $.extend({}, Zoomify.DEFAULTS, this.$image.data(), options);

this.$shadow = null;
this._rotation = 0;
this._lastTransformScale = null;
this.$image = $(element).addClass('zoomify');
this.options = $.extend({}, Zoomify.DEFAULTS, this.$image.data(), options);

this.$image.on('click', function () { that.zoom(); });
$(window).on('resize', function () { that.reposition(); });
$(document).on('scroll', function () { that.reposition(); });
$(window).on('keyup', function (e) {
if (that._zoomed && e.keyCode == 27)
that.zoomOut();
});
// $(window).on('keyup', function (e) {
// if (that._zoomed && e.keyCode == 27)
// that.zoomOut();
// });
};
Zoomify.DEFAULTS = {
duration: 200,
easing: 'linear',
scale: 0.9
easing: 'linear',
scale: 0.9
};

// css utilities
Zoomify.prototype.transition = function ($element, value) {
$element.css({
Expand All @@ -47,7 +49,7 @@
};
Zoomify.prototype.removeTransition = function ($element, callback) {
var that = this;

clearTimeout(this._timeout);
this._timeout = setTimeout(function () {
that.transition($element, '');
Expand All @@ -63,55 +65,72 @@
'transform': value
});
};
Zoomify.prototype.transformScaleAndTranslate = function (scale, translateX, translateY, callback) {
Zoomify.prototype.transformScaleAndTranslate = function (scale, translateX, translateY, callback, rotate) {
this.addTransition(this.$image);
this.transform('scale(' + scale + ') translate(' + translateX + 'px, ' + translateY + 'px)');
this._lastTransformScale = 'scale(' + scale + ') translate(' + translateX + 'px, ' + translateY + 'px)';
this.transform(this._lastTransformScale);
this.removeTransition(this.$image, callback);
};

// rotate functions
Zoomify.prototype.rotate = function () {
this.transform(this._lastTransformScale + ' rotate(' + this._rotation + 'deg)');
}

Zoomify.prototype.rotateLeft = function () {
this.$image.trigger('rotate-left.zoomify');
this._rotation -= 90;
this.rotate();
this.$image.trigger('rotate-left-complete.zoomify');
}
Zoomify.prototype.rotateRight = function () {
this.$image.trigger('rotate-left.zoomify');
this._rotation += 90;
this.rotate();
this.$image.trigger('rotate-left-complete.zoomify');
}

// zooming functions
Zoomify.prototype.zoom = function () {
if (this._zooming) return;

if (this._zoomed) this.zoomOut();
else this.zoomIn();
};
Zoomify.prototype.zoomIn = function () {
var that = this,
var that = this,
transform = this.$image.css('transform');

this.transition(this.$image, 'none');
this.transform('none');
var offset = this.$image.offset(),
width = this.$image.outerWidth(),
height = this.$image.outerHeight(),
nWidth = this.$image[0].naturalWidth || +Infinity,
nHeight = this.$image[0].naturalHeight || +Infinity,
wWidth = $(window).width(),
wHeight = $(window).height(),
scaleX = Math.min(nWidth, wWidth * this.options.scale) / width,
scaleY = Math.min(nHeight, wHeight * this.options.scale) / height,
scale = Math.min(scaleX, scaleY),

var offset = this.$image.offset(),
width = this.$image.outerWidth(),
height = this.$image.outerHeight(),
nWidth = this.$image[0].naturalWidth || +Infinity,
nHeight = this.$image[0].naturalHeight || +Infinity,
wWidth = $(window).width(),
wHeight = $(window).height(),
scaleX = Math.min(nWidth, wWidth * this.options.scale) / width,
scaleY = Math.min(nHeight, wHeight * this.options.scale) / height,
scale = Math.min(scaleX, scaleY),
translateX = (-offset.left + (wWidth - width) / 2) / scale,
translateY = (-offset.top + (wHeight - height) / 2 + $(document).scrollTop()) / scale;

this.transform(transform);

this._zooming = true;
this.$image.addClass('zoomed').trigger('zoom-in.zoomify');
setTimeout(function () {
that.addShadow();
that.transformScaleAndTranslate(scale, translateX, translateY, function () {
that._zooming = false;
that.$image.trigger('zoom-in-complete.zoomify');
});
}, that._rotation);
that._zoomed = true;
});
};
Zoomify.prototype.zoomOut = function () {
var that = this;

this._zooming = true;
this.$image.trigger('zoom-out.zoomify');
this.transformScaleAndTranslate(1, 0, 0, function () {
Expand All @@ -121,49 +140,57 @@
this.removeShadow();
this._zoomed = false;
};

// page listener callbacks
Zoomify.prototype.reposition = function () {
if (this._zoomed) {
this.transition(this.$image, 'none');
this.zoomIn();
}
};

// shadow background
Zoomify.prototype.addShadow = function () {
var that = this;
if (this._zoomed) return;

if (that.$shadow) that.$shadow.remove();
this.$shadow = $('<div class="zoomify-shadow"></div>');
this.$shadow = $(
'<div class="zoomify-shadow">' +
'<div class="zoomify-options">' +
' <span id="zoomify-rotate-left"><svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24" fill="none"><path d="M12.0769 19C13.5389 19 14.9634 18.532 16.1462 17.6631C17.329 16.7942 18.2094 15.569 18.6612 14.1631C19.1129 12.7572 19.1129 11.2428 18.6612 9.83688C18.2094 8.43098 17.329 7.20578 16.1462 6.33688C14.9634 5.46798 13.5389 5 12.0769 5C10.6149 5 9.19043 5.46799 8.00764 6.33688C6.82485 7.20578 5.94447 8.43098 5.49268 9.83688C5.0409 11.2428 5.0409 12.7572 5.49269 14.1631M6.5 12.7778L5.53846 14.3333L4 13.1667" stroke="#464455" stroke-linecap="round" stroke-linejoin="round"/></svg></span>' +
' <span id="zoomify-rotate-right"><svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24" fill="none"><path d="M11.9231 19C10.4611 19 9.03659 18.532 7.85379 17.6631C6.671 16.7942 5.79063 15.569 5.33884 14.1631C4.88705 12.7572 4.88705 11.2428 5.33884 9.83688C5.79063 8.43098 6.671 7.20578 7.8538 6.33688C9.03659 5.46798 10.4611 5 11.9231 5C13.3851 5 14.8096 5.46799 15.9924 6.33688C17.1752 7.20578 18.0555 8.43098 18.5073 9.83688C18.9591 11.2428 18.9591 12.7572 18.5073 14.1631M17.5 12.7778L18.4615 14.3333L20 13.1667" stroke="#464455" stroke-linecap="round" stroke-linejoin="round"/></svg></span>' +
'</div>' +
'</div>');
$('body').append(this.$shadow);
this.addTransition(this.$shadow);
this.$shadow.on('click', function () { that.zoomOut(); })

$("#zoomify-rotate-left").on('click', function () { that.rotateLeft(); return false; })
$("#zoomify-rotate-right").on('click', function () { that.rotateRight(); return false; })

setTimeout(function () { that.$shadow.addClass('zoomed'); }, 10);
};
Zoomify.prototype.removeShadow = function () {
var that = this;
if (!this.$shadow) return;

this.addTransition(this.$shadow);
this.$shadow.removeClass('zoomed');
this.$image.one('zoom-out-complete.zoomify', function () {
if (that.$shadow) that.$shadow.remove();
that.$shadow = null;
});
};

// plugin definition
$.fn.zoomify = function (option) {
return this.each(function () {
var $this = $(this),
var $this = $(this),
zoomify = $this.data('zoomify');

if (!zoomify) $this.data('zoomify', (zoomify = new Zoomify(this, typeof option == 'object' && option)));
if (typeof option == 'string' && ['zoom', 'zoomIn', 'zoomOut', 'reposition'].indexOf(option) >= 0) zoomify[option]();
});
};

})(jQuery);
2 changes: 1 addition & 1 deletion dist/zoomify.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/zoomify.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading