r2533 - photoviewer: animations, proper show/hide, mousewheel support, buttons for prev/next
Author: joern.zaefferer
Date: Tue May 12 10:08:07 2009
New Revision: 2533
Added:
branches/labs/showcase/source/jquery.mousewheel.js
Modified:
branches/labs/showcase/demos/index.html
branches/labs/showcase/demos/photoviewer/default.html
branches/labs/showcase/source/ui.photoviewer.js
Log:
photoviewer: animations, proper show/hide, mousewheel support, buttons for
prev/next
Modified: branches/labs/showcase/demos/index.html
==============================================================================
--- branches/labs/showcase/demos/index.html (original)
+++ branches/labs/showcase/demos/index.html Tue May 12 10:08:07 2009
@@ -12,6 +12,8 @@
<script src="../ui/ui.slider.js" type="text/javascript"
charset="utf-8"></script>
<script src="../ui/ui.draggable.js" type="text/javascript"
charset="utf-8"></script>
+ <script type="text/javascript"
src="../source/jquery.mousewheel.js"></script>
+
<script src="../source/ui.carousel.js" type="text/javascript"></script>
<script src="../source/ui.coverflow.js" type="text/javascript"></script>
<script src="../source/ui.magnifier.js" type="text/javascript"></script>
Modified: branches/labs/showcase/demos/photoviewer/default.html
==============================================================================
--- branches/labs/showcase/demos/photoviewer/default.html (original)
+++ branches/labs/showcase/demos/photoviewer/default.html Tue May 12
10:08:07 2009
@@ -5,6 +5,7 @@
<link rel="stylesheet" href="../../themes/base/ui.all.css"
type="text/css" media="screen">
<link rel="stylesheet" href="../../source/ui.photoviewer.css"
type="text/css" media="screen">
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript"
src="../../source/jquery.mousewheel.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/effects.core.js"></script>
<script type="text/javascript" src="../../ui/effects.drop.js"></script>
@@ -20,6 +21,10 @@
//You don't need this timeout in your pages - Safari has stupid issues
with our demo system
window.setTimeout(function() {
$("#photos").photoviewer();
+ $("#prev, #next").click(function() {
+ $("#photos").photoviewer(this.id);
+ return false;
+ })
}, $.browser.safari ? 100 : 0);
});
</script>
@@ -47,6 +52,8 @@
</a>
</div>
</div>
+ <button id="prev">Previous</button>
+ <button id="next">Next</button>
</div><!-- End demo -->
Added: branches/labs/showcase/source/jquery.mousewheel.js
==============================================================================
--- (empty file)
+++ branches/labs/showcase/source/jquery.mousewheel.js Tue May 12 10:08:07
2009
@@ -0,0 +1,60 @@
+/*! Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
+ * Dual licensed under the MIT
(http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ *
+ * Version: 3.0.2
+ *
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+$.event.special.mousewheel = {
+ setup: function() {
+ if ( this.addEventListener )
+ for ( var i=types.length; i; )
+ this.addEventListener( types[--i], handler, false );
+ else
+ this.onmousewheel = handler;
+ },
+
+ teardown: function() {
+ if ( this.removeEventListener )
+ for ( var i=types.length; i; )
+ this.removeEventListener( types[--i], handler, false );
+ else
+ this.onmousewheel = null;
+ }
+};
+
+$.fn.extend({
+ mousewheel: function(fn) {
+ return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+ },
+
+ unmousewheel: function(fn) {
+ return this.unbind("mousewheel", fn);
+ }
+});
+
+
+function handler(event) {
+ var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
+
+ event = $.event.fix(event || window.event);
+ event.type = "mousewheel";
+
+ if ( event.wheelDelta ) delta = event.wheelDelta/120;
+ if ( event.detail ) delta = -event.detail/3;
+
+ // Add events and delta to the front of the arguments
+ args.unshift(event, delta);
+
+ return $.event.handle.apply(this, args);
+}
+
+})(jQuery);
\ No newline at end of file
Modified: branches/labs/showcase/source/ui.photoviewer.js
==============================================================================
--- branches/labs/showcase/source/ui.photoviewer.js (original)
+++ branches/labs/showcase/source/ui.photoviewer.js Tue May 12 10:08:07 2009
@@ -16,10 +16,12 @@
_init: function() {
var self = this;
this.anchors =
this.element.find("a[href]:has(img[src])").click(function(event) {
- event.preventDefault();
self._display(this);
+ return false;
});
- $(document).keydown(function(event) {
+ $(document).click(function() {
+ self.close();
+ }).keydown(function(event) {
switch(event.keyCode) {
case $.ui.keyCode.ESCAPE:
self.close();
@@ -34,40 +36,73 @@
break;
}
});
+ if ($.fn.mousewheel) {
+ $(document).mousewheel(function(event, delta) {
+ if (delta < 0) {
+ self.next();
+ }
+ if (delta > 0) {
+ self.prev();
+ }
+ });
+ }
},
- _display: function(anchor) {
+ _display: function(anchor, direction) {
if (!anchor)
return;
+ var visible = this._viewer().is(":visible");
this.currentAnchor = anchor;
- this._viewer().attr("src", anchor.href).show();
- this._updateViewerPosition();
+ function show() {
+ $(this).attr("src", anchor.href).one("load", function() {
+ $(this).css({
+ left: $(window).width() / 2 - $(this).width() / 2,
+ top: $(window).height() / 2 - $(this).height() / 2
+ });
+ if (visible) {
+ $(this).effect("drop", {
+ direction: direction == "up" ? "down" : "up",
+ mode: "show"
+ });
+ } else {
+ $(this).fadeIn();
+ }
+ })
+ }
+ if (!direction) {
+ this._viewer().each(show);
+ } else {
+ this._viewer().effect("drop", {
+ direction: direction
+ }, "normal", show);
+ }
+
},
close: function() {
- this._viewer().hide();
+ if (!this.currentAnchor)
+ return;
+ this.currentAnchor = null;
+ this._viewer().fadeOut();
},
next: function() {
- this._display(this.anchors.filter(":gt(" +
this.anchors.index(this.currentAnchor) + "):first")[0]);
+ if (!this.currentAnchor)
+ return;
+ this._display(this.anchors.filter(":gt(" +
this.anchors.index(this.currentAnchor) + "):first")[0], "down");
},
prev: function() {
- this._display(this.anchors.filter(":lt(" +
this.anchors.index(this.currentAnchor) + "):last")[0]);
+ if (!this.currentAnchor)
+ return;
+ this._display(this.anchors.filter(":lt(" +
this.anchors.index(this.currentAnchor) + "):last")[0], "up");
},
_viewer: function() {
if (!this.viewerElement) {
- this.viewerElement =
$("<img/>").addClass("ui-photoviewer").appendTo(document.body);
+ this.viewerElement =
$("<img/>").addClass("ui-photoviewer").hide().appendTo(document.body);
}
return this.viewerElement;
- },
-
- _updateViewerPosition: function() {
- this._viewer().css({
- left: 100,
- top: 100
- });
}
});