r2551 - photoviewer: fully customizable animations

Author: joern.zaefferer
Date: Wed May 13 06:32:22 2009
New Revision: 2551
Modified:
branches/photoviewer/demos/photoviewer/resizing.html
branches/photoviewer/ui/ui.photoviewer.js
Log:
photoviewer: fully customizable animations
Modified: branches/photoviewer/demos/photoviewer/resizing.html
==============================================================================
--- branches/photoviewer/demos/photoviewer/resizing.html    (original)
+++ branches/photoviewer/demos/photoviewer/resizing.html    Wed May 13
06:32:22 2009
@@ -23,11 +23,24 @@
            // resize images, and cross-fade them
            $("#photos").photoviewer({
                resize: true,
-                rotateIn: function(next, direction, finished) {
-                    next.fadeIn(finished);
+                rotateIn: function(direction) {
+                    $(this).fadeIn();
                },
-                rotateOut: function(current, direction, finished) {
-                    setTimeout(finished, 1000);
+                rotateOut: function(direction, finished) {
+                    setTimeout(finished, jQuery.fx.speeds._default);
+                },
+                show: function() {
+                    $(this).slideDown();
+                },
+                hide: function(finished) {
+                    $(this).slideUp(finished);
+                },
+                showOverlay: function() {
+                    $(this).show();
+                },
+                hideOverlay: function(finished) {
+                    $(this).hide();
+                    finished();
                }
            });
        }, $.browser.safari ? 100 : 0);
Modified: branches/photoviewer/ui/ui.photoviewer.js
==============================================================================
--- branches/photoviewer/ui/ui.photoviewer.js    (original)
+++ branches/photoviewer/ui/ui.photoviewer.js    Wed May 13 06:32:22 2009
@@ -18,6 +18,8 @@
            var self = this;
            this._anchors().click(function(event) {
                event.preventDefault();
+                if (self.overlayElement || self.viewerElement)
+                    return;
                self._display(this);
                return false;
            });
@@ -64,9 +66,17 @@
                return;
            var self = this;
            this.currentAnchor = null;
-            this._viewer().add(this._overlay()).fadeOut(function() {
-                $(this).remove();
-                self.overlayElement = self.viewerElement = null;
+
+            // client has to invoke callbacks, but scope/args don't matter
+            var viewer = this._viewer();
+            this.options.hide.call(viewer[0], function() {
+                viewer.remove();
+                self.viewerElement = null;
+            });
+            var overlay = this._overlay();
+            this.options.hideOverlay.call(overlay[0], function() {
+                overlay.remove();
+                self.overlayElement = null;
            });
        },

@@ -86,17 +96,15 @@
        _display: function(anchor, direction) {
            if (!anchor)
                return;
+
            var self = this,
                visible = this.viewerElement && this.viewerElement.is(":visible");
+
            this.currentAnchor = anchor;
-            this._overlay().css({
-                left: $(window).scrollLeft(),
-                top: $(window).scrollTop()
-            }).fadeIn();

            if (direction) {
                var previous = this._viewer();
-                this.options.rotateOut(previous, direction, function() {
+                this.options.rotateOut.call(previous[0], direction, function() {
                    previous.remove();
                });
            }
@@ -111,9 +119,13 @@
                    top: $(window).height() / 2 - $(this).outerHeight() / 2 +
$(window).scrollTop()
                });
                if (visible) {
-                    self.options.rotateIn($(this), direction == "up" ? "down" : "up",
function() {});
+                    self.options.rotateIn.call(this, direction == "up" ? "down" : "up");
                } else {
-                    $(this).fadeIn();
+                    self._overlay().css({
+                        left: $(window).scrollLeft(),
+                        top: $(window).scrollTop()
+                    }).each(self.options.showOverlay);
+                    $(this).each(self.options.show);
                }
            })

@@ -168,16 +180,28 @@
            loop: true,
            overlay: true,
            resize: false,
-            rotateOut: function(previous, direction, finished) {
-                previous.effect("drop", {
-                    direction: direction
-                }, "normal", finished);
-            },
-            rotateIn: function(next, direction, finished) {
-                next.effect("drop", {
+            rotateIn: function(direction) {
+                $(this).effect("drop", {
                    direction: direction,
                    mode: "show"
+                });
+            },
+            rotateOut: function(direction, finished) {
+                $(this).effect("drop", {
+                    direction: direction
                }, "normal", finished);
+            },
+            show: function() {
+                $(this).fadeIn();
+            },
+            showOverlay: function() {
+                $(this).fadeIn();
+            },
+            hide: function(finished) {
+                $(this).fadeOut(finished);
+            },
+            hideOverlay: function(finished) {
+                $(this).fadeOut(finished);
            }
        }
    });