Added loader

diff --git a/i/js.js b/i/js.js
index 4f038c2c5b5234d23814f214d54ea68cad483037..a23450242a154149abbe8731504754c2a5f35da9 100644 (file)
--- a/i/js.js
+++ b/i/js.js
@@ -18,12 +18,12 @@ var zindex = 0;
 
 var loader;
 
-window.addEvent('domready', function() 
-{      
+window.addEvent('domready', function()
+{
        // make draggable
-       
+
        var draggable = A ? '#images li' : '#images li.image' ;
-       
+
        $$(draggable).makeDraggable({
         onStart: function() {
             dragging = false;
@@ -47,17 +47,17 @@ window.addEvent('domready', function()
         'left'       : 0,
         'opacity'    : 0,
         'display'    : 'none'
-    }}).setProperty('id', 'bgFader').addEvent('click', 
-        function () { 
+    }}).setProperty('id', 'bgFader').addEvent('click',
+        function () {
             debiggen(selectedObj);
         }
     ).injectInside($E('body'));
 
     zindex = jsonObj.images.length;
-    
-    
-    
-    // enlarge selected from URL    
+
+
+
+    // enlarge selected from URL
     var selImg = location+"";
     selImg = selImg.split("#");
     if(selImg[1]) {
@@ -67,8 +67,8 @@ window.addEvent('domready', function()
                        embiggen($(selImg[1]));
         }
     }
-    
-    
+
+
        loader = new Element('img');
        loader.src = "i/loader.gif";
        loader.setStyles({
@@ -78,7 +78,7 @@ window.addEvent('domready', function()
                'left' : Number(window.getWidth() / 2),
                'top' : Number(window.getHeight() / 2)
        });
-       //loader.inject($E('body'));
+       loader.inject($E('body'));
 
 
 
@@ -107,7 +107,7 @@ function select(obj)
             debiggen(enlargedObj);
             embiggen(obj);
         }
-    }   
+    }
     else {
         embiggen(obj);
     }
@@ -125,50 +125,49 @@ function getObjFromJson(obj)
                        break;
                }
        }
-       
+
        return imageObj;
 
 }
 
 
-function embiggen(obj) 
-{       
+function embiggen(obj)
+{
     embiggening = true;
     viewing     = true;
     dragging    = false;
     enlargedObj = obj;
-    enlargedID  = obj.id; 
+    enlargedID  = obj.id;
 
     var o = $(obj);
     oldLeft    = o.getLeft();
-    oldTop     = o.getTop();    
+    oldTop     = o.getTop();
 
-    var img = o.getElements('img');    
+    var img = o.getElements('img');
     img = $(img[0]);
-    
+
    // img.setStyle('opacity', .4);
-    
+
        var loaded = false;
-    
+
     img.addEvent('load', function(){
                loader.setStyle('display' , 'none');
                loaded = true;
+       });
+
 
-       });    
-       
-       
     // set source to actual image
     img.src = IMG_ROOT + obj.id;
-    
+
 
        var imageObj = getObjFromJson(obj);
-    
 
-       
+
+
 
     o.effects({
-        duration : 0,
-        transition : Fx.Transitions.Cubic.easeOut
+        duration : 500,
+        transition : Fx.Transitions.Cubic.easeInOut
     }).start({
         'left':    [o.getLeft(), Number((window.getWidth() /  2) - imageObj.width/2).toInt()],
         'top':     [o.getTop(), ((window.getHeight() / 2) - imageObj.height/2 >= 0 ? Number((window.getHeight() / 2) - imageObj.height/2).toInt() : 30)],
@@ -184,13 +183,13 @@ function embiggen(obj)
     });
 
     zindex++;
-    
+
     o.setStyle('z-index', zindex);
-    
+
     bgFader.setStyle('display', 'block');
     bgFader.setStyle('z-index', zindex-1);
-    
-    
+
+
     bgFader.effects({
         duration : 0,
         transition : Fx.Transitions.Cubic.easeOut
@@ -201,43 +200,43 @@ function embiggen(obj)
 }
 
 
-function debiggen(obj) 
-{   
+function debiggen(obj)
+{
     debiggening = true;
     viewing     = false;
     dragging    = false;
     enlargedObj = null;
-    
+
     var imageObj = getObjFromJson(obj);
-    
+
     $(obj).effects({
         duration: 0,
         transition: Fx.Transitions.Cubic.easeOut
     }).start({
-        'padding': [$(obj).getStyle('padding').toInt(), 0],         
+        'padding': [$(obj).getStyle('padding').toInt(), 0],
         'left':    [$(obj).getStyle('left').toInt(),    oldLeft],
         'top':     [$(obj).getStyle('top').toInt(),     oldTop],
         'width':   [$(obj).getStyle('width').toInt(),   Number(imageObj.width * <?=THUMB_SCALE?>).toInt()],
         'height':  [$(obj).getStyle('height').toInt(),  Number(imageObj.height * <?=THUMB_SCALE?>).toInt()]
-    }).addEvent('onComplete', function(){   
+    }).addEvent('onComplete', function(){
         debiggening = false;
     });
-    
+
     bgFader.effects({
         duration : 0,
         transition : Fx.Transitions.Cubic.easeOut
     }).start({
         'opacity' : 0.0
-    }); 
+    });
 }
 
 
 function setPositions()
 {
     var urlStr = "i/functions.php?action=createJson";
-    
+
     var count = 1;
-    
+
     $$('#images li').each(function(li) {
        var name = escape(li.getProperty('id'));
        var type = li.getProperty('class');
@@ -247,13 +246,13 @@ function setPositions()
        urlStr  += "&" + count + "=" + name + "," + type + "," + x + "," + y + "," + z;
        count++;
     } );
-    
+
 //    console.log('sending: ' + urlStr);
     _do(urlStr);
 }
 
 
-function _do(url) 
+function _do(url)
 {
     var jsel  = document.createElement('SCRIPT');
     jsel.type = 'text/javascript';

diff --git a/i/loader.gif b/i/loader.gif
new file mode 100644 (file)
index 0000000..fad025c
Binary files /dev/null and b/i/loader.gif differ