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;
 
 
 var loader;
 

-window.addEvent('domready', function() 
-{      
+window.addEvent('domready', function()
+{

        // make draggable
        // make draggable

-       
+

        var draggable = A ? '#images li' : '#images li.image' ;
        var draggable = A ? '#images li' : '#images li.image' ;

-       
+

        $$(draggable).makeDraggable({
         onStart: function() {
             dragging = false;
        $$(draggable).makeDraggable({
         onStart: function() {
             dragging = false;


@@ -47,17 +47,17 @@ window.addEvent('domready', function()
         'left'       : 0,
         'opacity'    : 0,
         'display'    : 'none'
         '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;
             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]) {
     var selImg = location+"";
     selImg = selImg.split("#");
     if(selImg[1]) {


@@ -67,8 +67,8 @@ window.addEvent('domready', function()
                        embiggen($(selImg[1]));
         }
     }
                        embiggen($(selImg[1]));
         }
     }

-    
-    
+
+

        loader = new Element('img');
        loader.src = "i/loader.gif";
        loader.setStyles({
        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)
        });
                '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);
         }
             debiggen(enlargedObj);
             embiggen(obj);
         }

-    }   
+    }

     else {
         embiggen(obj);
     }
     else {
         embiggen(obj);
     }


@@ -125,50 +125,49 @@ function getObjFromJson(obj)
                        break;
                }
        }
                        break;
                }
        }

-       
+

        return imageObj;
 
 }
 
 
        return imageObj;
 
 }
 
 

-function embiggen(obj) 
-{       
+function embiggen(obj)
+{

     embiggening = true;
     viewing     = true;
     dragging    = false;
     enlargedObj = obj;
     embiggening = true;
     viewing     = true;
     dragging    = false;
     enlargedObj = obj;

-    enlargedID  = obj.id; 
+    enlargedID  = obj.id;

 
     var o = $(obj);
     oldLeft    = o.getLeft();
 
     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 = $(img[0]);

-    
+

    // img.setStyle('opacity', .4);
    // img.setStyle('opacity', .4);

-    
+

        var loaded = false;
        var loaded = false;

-    
+

     img.addEvent('load', function(){
                loader.setStyle('display' , 'none');
                loaded = true;
     img.addEvent('load', function(){
                loader.setStyle('display' , 'none');
                loaded = true;

+       });
+

 
 

-       });    
-       
-       

     // set source to actual image
     img.src = IMG_ROOT + obj.id;
     // set source to actual image
     img.src = IMG_ROOT + obj.id;

-    
+

 
        var imageObj = getObjFromJson(obj);
 
        var imageObj = getObjFromJson(obj);

-    

 
 

-       
+
+

 
     o.effects({
 
     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)],
     }).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++;
     });
 
     zindex++;

-    
+

     o.setStyle('z-index', zindex);
     o.setStyle('z-index', zindex);

-    
+

     bgFader.setStyle('display', 'block');
     bgFader.setStyle('z-index', zindex-1);
     bgFader.setStyle('display', 'block');
     bgFader.setStyle('z-index', zindex-1);

-    
-    
+
+

     bgFader.effects({
         duration : 0,
         transition : Fx.Transitions.Cubic.easeOut
     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;
     debiggening = true;
     viewing     = false;
     dragging    = false;
     enlargedObj = null;

-    
+

     var imageObj = getObjFromJson(obj);
     var imageObj = getObjFromJson(obj);

-    
+

     $(obj).effects({
         duration: 0,
         transition: Fx.Transitions.Cubic.easeOut
     }).start({
     $(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()]
         '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;
     });
         debiggening = false;
     });

-    
+

     bgFader.effects({
         duration : 0,
         transition : Fx.Transitions.Cubic.easeOut
     }).start({
         'opacity' : 0.0
     bgFader.effects({
         duration : 0,
         transition : Fx.Transitions.Cubic.easeOut
     }).start({
         'opacity' : 0.0

-    }); 
+    });

 }
 
 
 function setPositions()
 {
     var urlStr = "i/functions.php?action=createJson";
 }
 
 
 function setPositions()
 {
     var urlStr = "i/functions.php?action=createJson";

-    
+

     var count = 1;
     var count = 1;

-    
+

     $$('#images li').each(function(li) {
        var name = escape(li.getProperty('id'));
        var type = li.getProperty('class');
     $$('#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++;
     } );
        urlStr  += "&" + count + "=" + name + "," + type + "," + x + "," + y + "," + z;
        count++;
     } );

-    
+

 //    console.log('sending: ' + urlStr);
     _do(urlStr);
 }
 
 
 //    console.log('sending: ' + urlStr);
     _do(urlStr);
 }
 
 

-function _do(url) 
+function _do(url)

 {
     var jsel  = document.createElement('SCRIPT');
     jsel.type = 'text/javascript';
 {
     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