r2542 - photoviewer: added overlay
Author: joern.zaefferer
Date: Wed May 13 02:22:14 2009
New Revision: 2542
Modified:
branches/photoviewer/demos/photoviewer/default.html
branches/photoviewer/themes/base/ui.photoviewer.css
branches/photoviewer/ui/ui.photoviewer.js
Log:
photoviewer: added overlay
Modified: branches/photoviewer/demos/photoviewer/default.html
==============================================================================
--- branches/photoviewer/demos/photoviewer/default.html (original)
+++ branches/photoviewer/demos/photoviewer/default.html Wed May 13 02:22:14
2009
@@ -66,5 +66,7 @@
</div><!-- End demo-description -->
+<div style="height:1200px; visibility: hidden">big div to make page
scroll</div>
+
</body>
</html>
Modified: branches/photoviewer/themes/base/ui.photoviewer.css
==============================================================================
--- branches/photoviewer/themes/base/ui.photoviewer.css (original)
+++ branches/photoviewer/themes/base/ui.photoviewer.css Wed May 13 02:22:14
2009
@@ -1,3 +1,3 @@
/* Accordion
----------------------------------*/
-.ui-photoviewer { position: absolute; }
+.ui-photoviewer { position: absolute; z-index: 1000; border: 20px solid
white; }
Modified: branches/photoviewer/ui/ui.photoviewer.js
==============================================================================
--- branches/photoviewer/ui/ui.photoviewer.js (original)
+++ branches/photoviewer/ui/ui.photoviewer.js Wed May 13 02:22:14 2009
@@ -17,6 +17,7 @@
_init: function() {
var self = this;
this._anchors().click(function(event) {
+ event.preventDefault();
self._display(this);
return false;
});
@@ -66,6 +67,7 @@
return;
var visible = this._viewer().is(":visible");
this.currentAnchor = anchor;
+ this._overlay().fadeIn();
function show() {
$(this).attr("src", anchor.href).one("load", function() {
$(this).css({
@@ -96,6 +98,7 @@
if (!this.currentAnchor)
return;
this.currentAnchor = null;
+ this._overlay().fadeOut();
this._viewer().fadeOut();
},
@@ -119,6 +122,13 @@
this.viewerElement =
$("<img/>").addClass("ui-photoviewer").hide().appendTo(document.body);
}
return this.viewerElement;
+ },
+
+ _overlay: function() {
+ if (!this.overlayElement) {
+ this.overlayElement =
$("<img/>").addClass("ui-widget-overlay").css("opacity",
0.8).hide().appendTo(document.body);
+ }
+ return this.overlayElement;
}
});