r2641 - photoviewer: improved loading indicator
Author: joern.zaefferer
Date: Tue Jun 2 07:26:03 2009
New Revision: 2641
Modified:
branches/labs/photoviewer/tests/visual/photoviewer/default.html
branches/labs/photoviewer/tests/visual/photoviewer/photo.php
branches/labs/photoviewer/themes/base/ui.photoviewer.css
branches/labs/photoviewer/ui/ui.photoviewer.js
Log:
photoviewer: improved loading indicator
Modified: branches/labs/photoviewer/tests/visual/photoviewer/default.html
==============================================================================
--- branches/labs/photoviewer/tests/visual/photoviewer/default.html
(original)
+++ branches/labs/photoviewer/tests/visual/photoviewer/default.html Tue
Jun 2 07:26:03 2009
@@ -14,7 +14,14 @@
<script type="text/javascript">
$(function() {
- $("#photos").photoviewer();
+ $("#photos").photoviewer({
+ rotateIn: function(direction) {
+ $(this).fadeIn(hide);
+ },
+ rotateOut: function(direction, finished) {
+ hide = finished;
+ }
+ });
});
</script>
<style>
Modified: branches/labs/photoviewer/tests/visual/photoviewer/photo.php
==============================================================================
--- branches/labs/photoviewer/tests/visual/photoviewer/photo.php (original)
+++ branches/labs/photoviewer/tests/visual/photoviewer/photo.php Tue Jun 2
07:26:03 2009
@@ -1,5 +1,5 @@
<?php
-usleep(500000);
+usleep(800000);
header("Content-type: image/jpeg");
echo file_get_contents("photo.jpg");
?>
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 Tue Jun 2
07:26:03 2009
@@ -2,5 +2,5 @@
----------------------------------*/
.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-loading-indicator { z-index: 1001; position: absolute; text-indent:
-10000px; width: 32px; height: 32px; background-image:
url(images/ajax-loader.gif); }
+.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; }
Modified: branches/labs/photoviewer/ui/ui.photoviewer.js
==============================================================================
--- branches/labs/photoviewer/ui/ui.photoviewer.js (original)
+++ branches/labs/photoviewer/ui/ui.photoviewer.js Tue Jun 2 07:26:03 2009
@@ -75,7 +75,7 @@
var self = this;
this.loadingIndicatorTimeout = setTimeout(function() {
if (!self.loadingIndicator) {
- self.loadingIndicator =
self._element("div", "ui-loading-indicator").appendTo(document.body);
+ self.loadingIndicator = self._element("div", "ui-loading-indicator
ui-corner-all").appendTo(document.body);
}
self._position(self.loadingIndicator);
self.loadingIndicator.fadeIn("slow");