animations

asset/pois.js

@@ -25,14 +25,27 @@ var poiAlpha = {
 
 var pois=[];
 
+//Types
+//  - "I": immagine
+//  - "T": Testo/html
+//  - "V": Video
+
+//Cat(egoies):
+// - "FF": flora e fauna
+// - 
+
+
+
 var poi=Object.create(poiAlpha);
+    //0
     poi.x = 346;
     poi.y = 332;
     poi.id = "First One";
-    poi.type = 'F'; 
+    poi.type = 'I'; 
     poi.cat = 'FF'
     pois.push(poi);
 
+    //1
     poi=Object.create(poiAlpha);
     poi.x= 746;
     poi.y= 432;
@@ -41,11 +54,70 @@ var poi=Object.create(poiAlpha);
     poi.cat = 'AS'
     pois.push(poi);
 
+    //2
     poi=Object.create(poiAlpha);
-    poi.x= 716;
-    poi.y= 412;
+    poi.x= 700;
+    poi.y= 402;
     poi.id="Two";
     poi.type = 'T'; 
     poi.cat = 'PR'
     pois.push(poi);
+    
+    //3
+    poi=Object.create(poiAlpha);
+    poi.x = 246;
+    poi.y = 532;
+    poi.id = "3";
+    poi.type = 'I'; 
+    poi.cat = 'FF'
+    pois.push(poi);
+
+    //4
+    poi=Object.create(poiAlpha);
+    poi.x = 646;
+    poi.y = 532;
+    poi.id = "4";
+    poi.type = 'I'; 
+    poi.cat = 'FF'
+    pois.push(poi);
+    //5
+    poi=Object.create(poiAlpha);
+    poi.x = 412;
+    poi.y = 605;
+    poi.id = "5";
+    poi.type = 'I'; 
+    poi.cat = 'FF'
+    pois.push(poi);
+    //6
+    poi=Object.create(poiAlpha);
+    poi.x = 626;
+    poi.y = 132;
+    poi.id = "6";
+    poi.type = 'I'; 
+    poi.cat = 'FF'
+    pois.push(poi);
+    //7
+    poi=Object.create(poiAlpha);
+    poi.x = 211;
+    poi.y = 483;
+    poi.id = "7";
+    poi.type = 'I'; 
+    poi.cat = 'FF'
+    pois.push(poi);
+    //8
+    poi=Object.create(poiAlpha);
+    poi.x = 599;
+    poi.y = 191;
+    poi.id = "8";
+    poi.type = 'I'; 
+    poi.cat = 'FF'
+    pois.push(poi);
+    //9
+    poi=Object.create(poiAlpha);
+    poi.x = 376;
+    poi.y = 500;
+    poi.id = "9";
+    poi.type = 'I'; 
+    poi.cat = 'FF'
+    pois.push(poi);
 

asset/udatinos.js

@@ -35,17 +35,31 @@ $jq( document ).ready(function() {
 
         var img = null;
         if(this.id == pois[i].cat){
-          var img = $jq('<img id="pin_'+i+'" src="asset/i_'+pois[i].cat+'_48.png" style="position:absolute;left:'+pois[i].x+'px;top:'+pois[i].y+'px; display: block;visibility: visible;"/>'); 
+          //var img = $jq('<img id="pin_'+i+'" src="asset/i_'+pois[i].cat+'_48.png" style="position:absolute;left:'+pois[i].x+'px;top:'+pois[i].y+'px; display: block;visibility: visible;"/>');
+          var img = $jq('<img id="pin_'+i+'" src="asset/i_'+pois[i].cat+'_48.png" style="position:absolute;left:'+Math.floor(Math.random() * 1000)+'px;top:'+Math.floor(Math.random() * 1000)+'px; display: block;visibility: visible;"/>'); 
           img.click(function(){ // handle click
             var c = $jq("#container_" + pois[i].type);
 
-            $jq.get("contents/"+pois[i].type+"_"+i+".html", function(html_string)
-               {
-                  c.html('<div class="scrollable-content" id="sub_v">' + html_string + '</div>'); 
-                  c.modal();
-               },'html');    // this is the change now its working
+            if(pois[i].type=='T'){ //contenuto testuale
+              $jq.get("contents/"+pois[i].type+"_"+i+".html", function(html_string)
+                 {
+                    c.html('<div class="scrollable-content" id="sub_v">' + html_string + '</div>'); 
+                 },'html');
+            }else if(pois[i].type=='V'){//contenuto video 
+              c.html('<source src="contents/'+pois[i].type+'_'+i+'.mp4" type="video/mp4" />');  
+            }else{//è un'immagine
+              c.html('<img src="contents/'+pois[i].type+'_'+i+'.jpg"/>');  
+            }
+            c.modal();
           }); 
+//          $jq('body').delay(Math.floor(Math.random() * 1001)).append( img );
+          // $jq('body').append('').delay(2000).queue(function (next) {
+              // $jq(this).append(img);
+              // next();
+          // });
           $jq('body').append( img );
+          img.animate({top: pois[i].y + 'px'});
+          img.animate({left:pois[i].x + 'px'});
         }
       }
       //qui ci va un foreach suoi poi 
@@ -59,10 +73,14 @@ $jq( document ).ready(function() {
         }
       }
     });
- 
-    $jq('#container_T').on($jq.modal.AFTER_CLOSE, function(event, modal) {
+  
+    $jq( "[id^='container_']" ).on($jq.modal.AFTER_CLOSE, function(event, modal) {
       modal.$elm.html('');
     });
+
+    // $jq('#container_T').on($jq.modal.AFTER_CLOSE, function(event, modal) {
+      // modal.$elm.html('');
+    // });
      
 });
 

index.html

@@ -75,7 +75,7 @@
 
 <!-- <div id="poi_0" class="modal">  -->
       <!-- <div class="mvideo"> -->
-     <video width="640" height="450" controls="controls" poster="image" preload="true" class="modal" id="container_v">
+   <video width="640" height="450" controls="controls" poster="image" preload="true" class="modal" id="container_V">
      <!-- <source src="media/file_example_MOV_640_800kB.mov" type="video/mov"/> -->
      <source src="media/file_example_MP4_640_3MG.mp4" type="video/mp4" />
      <!-- <source src="where the video is" type="video/oog" /> -->
@@ -90,6 +90,12 @@
     </div>
   </div>
 
+  <div id="container_I" class="dialog-window, modal" style="height: initial; max-height: 90%; max-width: 90%; width: initial;">
+    <div class="scrollable-content" id="sub_div">
+      <img src="contents/I_15.jpeg"/> 
+    </div>
+  </div>
+