bug carga mapa

index.html

@@ -60,6 +60,21 @@
         <div class="section">
             <div class="section-container" id="page-4">
 
+            </div>
+        </div>
+        <div class="section">
+            <div class="section-container" id="page-5">
+
+            </div>
+        </div>
+        <div class="section">
+            <div class="section-container" id="page-6">
+
+            </div>
+        </div>
+        <div class="section">
+            <div class="section-container" id="page-7">
+
             </div>
         </div>
     </div>
@@ -71,6 +86,9 @@
 			<li id="nav-btn-page2"><a href="#page2" class="btn-navigation">page 2</a></li>
             <li id="nav-btn-page3"><a href="#page3" class="btn-navigation">page 3</a></li>
             <li id="nav-btn-page4"><a href="#page4" class="btn-navigation">page 4</a></li>
+            <li id="nav-btn-page5"><a href="#page5" class="btn-navigation">page 5</a></li>
+            <li id="nav-btn-page6"><a href="#page6" class="btn-navigation">page 6</a></li>
+            <li id="nav-btn-page7"><a href="#page7" class="btn-navigation">page 7</a></li>
 		</ul> <!-- .cd-timeline-navigation -->
 	</div> <!-- .timeline -->
 

js/main.js

@@ -1,16 +1,14 @@
 viewStatus= "story" /* data story */
-pages= 0
+pagesLoaded= 0
-totalPages=3;
+totalPages=7;
 window.onload = function() {
-    console.log("on load")
     width = 1000,
     height = 1000;
     loadPageTemplates()
 
-
     $('#pagepiling').pagepiling({
 	    menu: null,
-        anchors: ["page1","page2","page3","page4"],
+        anchors: ["page1","page2","page3","page4","page5","page6","page7"],
         direction: 'horizontal',
         verticalCentered: true,
         scrollingSpeed: 800,
@@ -26,50 +24,37 @@ window.onload = function() {
 }
 
 function loadPageTemplates(){
-    console.log("load templates")
 
-    $('#page-1').load("templates/page1.html",function(){
-        loadModalEvent(1);
-        counterLoading();
-    })
 
-    $('#page-2').load("templates/page2.html",function(){
+    for (var i=1; i<= totalPages; i++){
-        loadModalEvent(2);
+        (function (n) {
+            $('#page-'+n).load("templates/page"+n+".html",function(){
                 counterLoading();
+                loadModalEvent(n);
             })
-
+        })(i)
-    $('#page-3').load("templates/page3.html",function(){
+    }
-        loadModalEvent(3);
+    //turnEventsOn();
-        counterLoading();
-    })
-    $('#page-4').load("templates/page4.html",function(){
-            loadModalEvent(4);
-            counterLoading();
-    })
-    turnEventsOn();
-
 }
 
-function loadModalEvent( i){
+function loadModalEvent(j){
     var modal = new jBox('Modal', {
-      attach: '#map-btn-page-'+i,
+      attach: '#map-btn-page-'+j,
-      content: $('#map-page-'+i),
+      content: $('#map-page-'+j),
       closeButton: 'box'
     });
 }
 
 
 function counterLoading(){
-    pages++;
+    pagesLoaded++;
-
+    if(pagesLoaded >= totalPages){
-    if(pages>totalPages){
+        //Todas las plantillas cargadas
         $('.menu-content').on("click",'.switchMode', function(e){
-            console.log("menu content")
             if(viewStatus=="story") viewStatus="data"
             else{
                  viewStatus="story"
             }
-
             if(viewStatus=="story"){
                 $('.story-content').show();
                 $('.data-content').hide();

templates/page2.html

@@ -19,7 +19,7 @@
         </div>
     </div>
     <div class="extra-btn-container">
-        <a class="btn btn-primary btn-circle" id="map-btn-page-2"> ver datos <a>
+        <a class="btn btn-primary btn-circle" id="map-btn-page-2"> ver mapa <a>
     </div>
     </div>
 

templates/page3.html

@@ -1,24 +1,24 @@
 <div class="container-fluid">
     <div class="row">
         <div class="col-md-9">
+            <div class="section-inner-content">
                 <div class="story-content">
                     <img src="images/medialab.jpg" class="img-responsive" />
                 </div>
-
                 <div class="data-content" style="display:none">
                     <img src="images/data.png" class="img-responsive" />
                 </div>
             </div>
+        </div>
         <div class="col-md-3">
             <div class="menu-content">
                 <h2> menu pagina 3 </h2>
                 <a href="#" class="switchMode" class="btn btn-circle">  VER DATOS </a>
             </div>
-
         </div>
     </div>
     <div class="extra-btn-container">
-        <a class="btn btn-primary btn-circle" id="map-btn-page-3"> ver datos <a>
+        <a class="btn btn-primary btn-circle" id="map-btn-page-3"> ver mapa <a>
     </div>
     </div>
 

templates/page4.html

@@ -19,7 +19,7 @@
         </div>
     </div>
     <div class="extra-btn-container">
-        <a class="btn btn-primary btn-circle" id="map-btn-page-4"> ver datos <a>
+        <a class="btn btn-primary btn-circle" id="map-btn-page-4"> ver mapa <a>
     </div>
     </div>
 

templates/page5.html

@@ -0,0 +1,29 @@
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-md-9">
+            <div class="section-inner-content">
+                <div class="story-content">
+                    <img src="images/c1_IMG_story.png" class="img-responsive" /> <!-- imagen de historia-->
+                </div>
+                <div class="data-content" style="display:none">
+                    <img src="images/data.png" class="img-responsive" /> <!-- imagen de datos-->
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="menu-content">
+                <!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ -->
+                <h2> menu </h2>
+                <a href="#" class="switchMode" class="btn btn-circle">  VER DATOS </a>
+
+            </div>
+        </div>
+    </div>
+    <div class="extra-btn-container">
+        <a class="btn btn-primary btn-circle" id="map-btn-page-5"> ver mapa <a>
+    </div>
+</div>
+
+<div class="map-popover"  id="map-page-5">
+    <img src="images/c1_mapa_ACT.png" class="img-responsive" />
+</div>

templates/page6.html

@@ -0,0 +1,29 @@
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-md-9">
+            <div class="section-inner-content">
+                <div class="story-content">
+                    <img src="images/c1_IMG_story.png" class="img-responsive" /> <!-- imagen de historia-->
+                </div>
+                <div class="data-content" style="display:none">
+                    <img src="images/data.png" class="img-responsive" /> <!-- imagen de datos-->
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="menu-content">
+                <!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ -->
+                <h2> menu </h2>
+                <a href="#" class="switchMode" class="btn btn-circle">  VER DATOS </a>
+
+            </div>
+        </div>
+    </div>
+    <div class="extra-btn-container">
+        <a class="btn btn-primary btn-circle" id="map-btn-page-6"> ver mapa <a>
+    </div>
+</div>
+
+<div class="map-popover"  id="map-page-6">
+    <img src="images/c1_mapa_ACT.png" class="img-responsive" />
+</div>

templates/page7.html

@@ -0,0 +1,29 @@
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-md-9">
+            <div class="section-inner-content">
+                <div class="story-content">
+                    <img src="images/c1_IMG_story.png" class="img-responsive" /> <!-- imagen de historia-->
+                </div>
+                <div class="data-content" style="display:none">
+                    <img src="images/data.png" class="img-responsive" /> <!-- imagen de datos-->
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="menu-content">
+                <!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ -->
+                <h2> menu </h2>
+                <a href="#" class="switchMode" class="btn btn-circle">  VER DATOS </a>
+
+            </div>
+        </div>
+    </div>
+    <div class="extra-btn-container">
+        <a class="btn btn-primary btn-circle" id="map-btn-page-7"> ver mapa <a>
+    </div>
+</div>
+
+<div class="map-popover"  id="map-page-7">
+    <img src="images/c1_mapa_ACT.png" class="img-responsive" />
+</div>