r2550 - photoviewer: options for rotation (rotateIn, rotateOut)
Author: joern.zaefferer
Date: Wed May 13 05:57:58 2009
New Revision: 2550
Modified:
branches/photoviewer/demos/photoviewer/resizing.html
branches/photoviewer/ui/ui.photoviewer.js
Log:
photoviewer: options for rotation (rotateIn, rotateOut)
Modified: branches/photoviewer/demos/photoviewer/resizing.html
==============================================================================
--- branches/photoviewer/demos/photoviewer/resizing.html (original)
+++ branches/photoviewer/demos/photoviewer/resizing.html Wed May 13
05:57:58 2009
@@ -19,9 +19,16 @@
$('#demo-frame div.wrapper').parent().append(html).end().remove();
//You don't need this timeout in your pages - Safari has stupid issues
with our demo system
- window.setTimeout(function() {
+ setTimeout(function() {
+ // resize images, and cross-fade them
$("#photos").photoviewer({
- resize: true
+ resize: true,
+ rotateIn: function(next, direction, finished) {
+ next.fadeIn(finished);
+ },
+ rotateOut: function(current, direction, finished) {
+ setTimeout(finished, 1000);
+ }
});
}, $.browser.safari ? 100 : 0);
});
@@ -55,7 +62,7 @@
<div class="demo-description">
- Non-thumb photos are in 1600x1200, the viewer tries to resize to fit into
the window.
+ Non-thumb photos are in 1600x1200, the viewer tries to resize to fit into
the window. The drop effect is replaced with a cross fade.
</div><!-- End demo-description -->
Modified: branches/photoviewer/ui/ui.photoviewer.js
==============================================================================
--- branches/photoviewer/ui/ui.photoviewer.js (original)
+++ branches/photoviewer/ui/ui.photoviewer.js Wed May 13 05:57:58 2009
@@ -59,8 +59,27 @@
}
},
+ close: function() {
+ if (!this.currentAnchor)
+ return;
+ var self = this;
+ this.currentAnchor = null;
+ this._viewer().add(this._overlay()).fadeOut(function() {
+ $(this).remove();
+ self.overlayElement = self.viewerElement = null;
+ });
+ },
+
+ next: function() {
+ this._rotate(":gt(", ":first", "up");
+ },
+
+ prev: function() {
+ this._rotate(":lt(", ":last", "down");
+ },
+
_anchors: function() {
- // consider caching selection
+ // if deemed necessary, cache selection here
return this.element.find("a[href]:has(img[src])");
},
@@ -76,10 +95,9 @@
}).fadeIn();
if (direction) {
- this._viewer().effect("drop", {
- direction: direction
- }, "normal", function() {
- $(this).remove();
+ var previous = this._viewer();
+ this.options.rotateOut(previous, direction, function() {
+ previous.remove();
});
}
@@ -93,10 +111,7 @@
top: $(window).height() / 2 - $(this).outerHeight() / 2 +
$(window).scrollTop()
});
if (visible) {
- $(this).effect("drop", {
- direction: direction == "up" ? "down" : "up",
- mode: "show"
- });
+ self.options.rotateIn($(this), direction == "up" ? "down" : "up",
function() {});
} else {
$(this).fadeIn();
}
@@ -105,36 +120,17 @@
},
_resize: function(img) {
- var currentWidth = img.outerWidth(),
- currentHeight = img.outerHeight(),
- borderWidth = currentWidth - img.width(),
- borderHeight = currentHeight - img.height(),
- ratio = Math.min(Math.min($(window).width() - 36, currentWidth) /
currentWidth, Math.min($(window).height() - 60, currentHeight) /
currentHeight);
+ var outerWidth = img.outerWidth(),
+ outerHeight = img.outerHeight(),
+ borderWidth = outerWidth - img.width(),
+ borderHeight = outerHeight - img.height(),
+ ratio = Math.min(Math.min($(window).width() - 36, outerWidth) /
outerWidth, Math.min($(window).height() - 60, outerHeight) / outerHeight);
img.css({
- width: Math.round(ratio * currentWidth - borderWidth),
- height: Math.round(ratio * currentHeight, - borderHeight)
+ width: Math.round(ratio * outerWidth - borderWidth),
+ height: Math.round(ratio * outerHeight, - borderHeight)
});
},
- close: function() {
- if (!this.currentAnchor)
- return;
- var self = this;
- this.currentAnchor = null;
- this._viewer().add(this._overlay()).fadeOut(function() {
- $(this).remove();
- self.overlayElement = self.viewerElement = null;
- });
- },
-
- next: function() {
- this._rotate(":gt(", ":first", "up");
- },
-
- prev: function() {
- this._rotate(":lt(", ":last", "down");
- },
-
_rotate: function(selectorA, selectorB, direction) {
if (!this.currentAnchor)
return;
@@ -148,7 +144,7 @@
_viewer: function(create) {
if (create || !this.viewerElement) {
- this.viewerElement =
$("<img/>").addClass("ui-photoviewer").hide().appendTo(document.body);
+ this.viewerElement = this._element("img", "ui-photoviewer");
}
return this.viewerElement;
},
@@ -157,9 +153,13 @@
if (!this.options.overlay)
return $([]);
if (!this.overlayElement) {
- this.overlayElement =
$("<div/>").addClass("ui-widget-overlay").hide().appendTo(document.body);
+ this.overlayElement = this._element("div", "ui-widget-overlay");
}
return this.overlayElement;
+ },
+
+ _element: function(type, clazz) {
+ return $("<" + type
+ "/>").addClass(clazz).hide().appendTo(document.body);
}
});
@@ -167,7 +167,18 @@
defaults: {
loop: true,
overlay: true,
- resize: false
+ resize: false,
+ rotateOut: function(previous, direction, finished) {
+ previous.effect("drop", {
+ direction: direction
+ }, "normal", finished);
+ },
+ rotateIn: function(next, direction, finished) {
+ next.effect("drop", {
+ direction: direction,
+ mode: "show"
+ }, "normal", finished);
+ }
}
});