r2656 - photoviewer: zoom effect on show/hide
Author: joern.zaefferer
Date: Thu Jun 4 11:57:21 2009
New Revision: 2656
Modified:
branches/labs/photoviewer/demos/demos.css
branches/labs/photoviewer/demos/photoviewer/default.html
branches/labs/photoviewer/demos/photoviewer/resizing.html
branches/labs/photoviewer/themes/base/ui.photoviewer.css
branches/labs/photoviewer/ui/ui.photoviewer.js
Log:
photoviewer: zoom effect on show/hide
Modified: branches/labs/photoviewer/demos/demos.css
==============================================================================
--- branches/labs/photoviewer/demos/demos.css (original)
+++ branches/labs/photoviewer/demos/demos.css Thu Jun 4 11:57:21 2009
@@ -1,5 +1,7 @@
html, body {
height: 100%;
+ margin: 0;
+ padding: 0;
}
body {
font-size: 62.5%;
Modified: branches/labs/photoviewer/demos/photoviewer/default.html
==============================================================================
--- branches/labs/photoviewer/demos/photoviewer/default.html (original)
+++ branches/labs/photoviewer/demos/photoviewer/default.html Thu Jun 4
11:57:21 2009
@@ -24,6 +24,9 @@
});
</script>
<style>
+ #photos a {
+ display: block;
+ }
#photos a img {
padding: 1px;
border: 2px solid white;
Modified: branches/labs/photoviewer/demos/photoviewer/resizing.html
==============================================================================
--- branches/labs/photoviewer/demos/photoviewer/resizing.html (original)
+++ branches/labs/photoviewer/demos/photoviewer/resizing.html Thu Jun 4
11:57:21 2009
@@ -29,12 +29,6 @@
rotateOut: function(direction, finished) {
hide = finished;
},
- show: function() {
- $(this).slideDown();
- },
- hide: function(finished) {
- $(this).slideUp(finished);
- },
showOverlay: function() {
$(this).show();
},
Modified: branches/labs/photoviewer/themes/base/ui.photoviewer.css
==============================================================================
--- branches/labs/photoviewer/themes/base/ui.photoviewer.css (original)
+++ branches/labs/photoviewer/themes/base/ui.photoviewer.css Thu Jun 4
11:57:21 2009
@@ -1,6 +1,6 @@
/* Photoviewer
----------------------------------*/
.ui-photoviewer-container { position: absolute; z-index: 1000; }
-.ui-photoviewer { border: 15px solid white; /* for IE7 */
-ms-interpolation-mode: bicubic; z-index: 1002; position: relative; }
+.ui-photoviewer { /* for IE7 */ -ms-interpolation-mode: bicubic; z-index:
1002; position: relative; width: 100%; }
.ui-loading-indicator { z-index: 1001; position: absolute; text-indent:
-10000px; width: 38px; height: 38px; background: white
url(images/ajax-loader.gif) no-repeat 3px 3px; }
-.ui-photoviewer-shadow { position: absolute; top: -5px; left: -5px; }
+.ui-photoviewer-shadow { position: absolute; top: -15px; left: -15px; }
Modified: branches/labs/photoviewer/ui/ui.photoviewer.js
==============================================================================
--- branches/labs/photoviewer/ui/ui.photoviewer.js (original)
+++ branches/labs/photoviewer/ui/ui.photoviewer.js Thu Jun 4 11:57:21 2009
@@ -91,11 +91,12 @@
if (!this.currentAnchor)
return;
var self = this;
+ var anchor = this.currentAnchor;
this.currentAnchor = null;
// client has to invoke callbacks, but scope/args don't matter
var viewer = this._viewer();
- this.options.hide.call(viewer[0], function() {
+ this.options.hide.call(viewer[0], anchor, function() {
viewer.remove();
self.viewerElement = null;
});
@@ -136,7 +137,7 @@
}
this._showLoadingIndicator();
- this._viewer("new").attr("title", anchor.title +
this.options.titleSuffix).children("img").attr("src",
anchor.href).one("load", function() {
+ this._viewer("new").attr("title", anchor.title +
this.options.titleSuffix).children("img").one("load", function() {
var $this = $(this).parent();
self._hideLoadingIndicator();
self._resize($(this));
@@ -150,10 +151,10 @@
left: $(window).scrollLeft(),
top: $(window).scrollTop()
}).each(self.options.showOverlay);
- $this.each(self.options.show);
+ self.options.show.call($this, anchor);
}
self._preloadNeighbours();
- });
+ }).attr("src", anchor.href);
},
_preloadNeighbours: function() {
@@ -176,22 +177,23 @@
},
_resize: function(img) {
- var border = 30;
- img.css("width", "").css("height", "");
+ // TODO cleanup
var imgx = img.parent();
+ if ($.browser.msie) {
+ img.css("width", "auto");
+ }
+ imgx.css("width", "").css("height", "");
var outerWidth = imgx.width(),
outerHeight = imgx.height(),
- borderWidth = 30,
- borderHeight = 30,
ratio = Math.min(Math.min($(window).width() - 36, outerWidth) /
outerWidth, Math.min($(window).height() - 60, outerHeight) / outerHeight);
+ img.css("width", "");
//console.log(imgx.outerWidth(), imgx.outerHeight(), imgx.width(),
imgx.height())
//console.log(img, outerWidth, outerHeight, borderWidth, borderHeight,
ratio)
- if (ratio < 1) {
- img.css({
- width: Math.round(ratio * outerWidth - borderWidth),
- height: Math.round(ratio * outerHeight, - borderHeight)
+ ratio = Math.min(ratio, 1);
+ imgx.css({
+ width: Math.round(ratio * outerWidth),
+ height: Math.round(ratio * outerHeight)
});
- }
},
_rotate: function(selectorA, selectorB, direction) {
@@ -231,8 +233,9 @@
viewer.children("canvas").remove();
- var width = viewer.width() + 15,
- height = viewer.height() + 15,
+ // TODO compute these hardcoded values
+ var width = viewer.width() + 45,
+ height = viewer.height() + 45,
cradius = 10;
var canvas =
$("<canvas/>").addClass("ui-photoviewer-shadow").appendTo(this._viewer())[0];
canvas.width = width; canvas.height = height;
@@ -261,6 +264,26 @@
width--;
height--;
}
+ // TODO refactor into drawRoundedBox(width, height, cradius)
+ i=0;
+ ctx.fillStyle = "white";
+ ctx.beginPath();
+ ctx.moveTo(cradius + i, i);
+ ctx.quadraticCurveTo(i, i, i, cradius + i);
+
+ // wrong
+ ctx.lineTo(i, height - cradius);
+ ctx.quadraticCurveTo(i, height, cradius + i, height);
+
+ ctx.lineTo(width - cradius, height);
+ ctx.quadraticCurveTo(width, height, width, height - cradius);
+
+ // wrong
+ ctx.lineTo(width, cradius + i);
+ ctx.quadraticCurveTo(width, i, width - cradius, i);
+
+ ctx.lineTo(cradius, i);
+ ctx.fill();
}
});
@@ -283,14 +306,42 @@
direction: direction
}, "normal", finished);
},
- show: function() {
- $(this).fadeIn();
+ show: function(anchor) {
+ var thumb = $(anchor),
+ offset = thumb.offset();
+ // TODO refactor
+ var start = {
+ left: offset.left,
+ top: offset.top,
+ width: thumb.width(),
+ height: thumb.height(),
+ opacity: 0
+ }
+ var img = $(this);
+ var stop = {
+ left: img.css("left"),
+ top: img.css("top"),
+ width: img.width(),
+ height: img.height(),
+ opacity: 1
+ }
+ $(this).css(start).show().animate(stop);
},
showOverlay: function() {
$(this).fadeIn();
},
- hide: function(finished) {
- $(this).fadeOut(finished);
+ hide: function(anchor, finished) {
+ var thumb = $(anchor),
+ offset = thumb.offset();
+ // TODO refactor (see above)
+ var stop = {
+ left: offset.left,
+ top: offset.top,
+ width: thumb.width(),
+ height: thumb.height(),
+ opacity: 0
+ }
+ $(this).animate(stop, finished);
},
hideOverlay: function(finished) {
$(this).fadeOut(finished);