boton datos historia

index.html

@@ -8,16 +8,21 @@
     <!-- <base href="http://127.0.0.1/traficomadrid/">-->
 
 
-    <!-- TIMELINE CSS -->
+    <!--  CSS -->
     <link rel="stylesheet" href="css/css/home.css">
 
     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
-
-    <!-- jbox -->
-    <script src="bower_components/jbox/Source/jBox.min.js"></script>
     <link href="bower_components/jbox/Source/jBox.css" rel="stylesheet">
 
+
+
+<!--  JAVASCRIPT -->
     <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
+    <!-- jbox -->
+    <script src="bower_components/jbox/Source/jBox.min.js"></script>
+
+
+
     <script type="text/javascript" src="bower_components/d3/d3.min.js"></script>
     <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
     <script type="text/javascript" src="bower_components/jsrender/jsrender.min.js"></script>
@@ -59,6 +64,7 @@
         </div>
     </div>
 
+    <!-- aquí van los links a las secciones -->
     <div id="timeline">
 		<ul class="cd-timeline-navigation">
 			<li id="nav-btn-page1"><a href="#page1" class="btn-navigation active">page 1</a></li>

js/main.js

@@ -1,4 +1,6 @@
-
+viewStatus= "story" /* data story */
+pages= 0
+totalPages=3;
 window.onload = function() {
     console.log("on load")
     width = 1000,
@@ -27,36 +29,59 @@ function loadPageTemplates(){
     console.log("load templates")
 
     $('#page-1').load("templates/page1.html",function(){
-        var modal = new jBox('Modal', {
+        loadModalEvent(1);
-          attach: '#map-btn-page-1',
+        counterLoading();
-          content: $('#map-page-1'),
-          closeButton: 'box'
-        });
     })
 
     $('#page-2').load("templates/page2.html",function(){
-        var modal = new jBox('Modal', {
+        loadModalEvent(2);
-          attach: '#map-btn-page-2',
+        counterLoading();
-          content: $('#map-page-2'),
-          closeButton: 'box'
-        });
     })
 
     $('#page-3').load("templates/page3.html",function(){
-        var modal = new jBox('Modal', {
+        loadModalEvent(3);
-          attach: '#map-btn-page-3',
+        counterLoading();
-          content: $('#map-page-3'),
-          closeButton: 'box'
-        });
     })
     $('#page-4').load("templates/page4.html",function(){
-        var modal = new jBox('Modal', {
+            loadModalEvent(4);
-          attach: '#map-btn-page-4',
+            counterLoading();
-          content: $('#map-page-4'),
-          closeButton: 'box'
-        });
     })
     turnEventsOn();
+
+}
+
+function loadModalEvent( i){
+    var modal = new jBox('Modal', {
+      attach: '#map-btn-page-'+i,
+      content: $('#map-page-'+i),
+      closeButton: 'box'
+    });
+}
+
+
+function counterLoading(){
+    pages++;
+
+    if(pages>totalPages){
+        $('.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();
+                $('.menu-content .switchMode').empty().html("ver datos")
+            }
+            else{
+                $('.story-content').hide();
+                $('.data-content').show();
+                $('.menu-content .switchMode').empty().html("ver historia")
+            }
+        })
+    }
 }
 
 function turnEventsOn(){
@@ -64,6 +89,4 @@ function turnEventsOn(){
             $('.btn-navigation.active').removeClass('active')
             $(this).addClass('active')
         })*/
-
+}
-
-    }

templates/page1.html

@@ -2,17 +2,25 @@
     <div class="row">
         <div class="col-md-9">
             <div class="section-inner-content">
-                <img src="images/c1_IMG_story.png" class="img-responsive" />
+                <div class="story-content">
+                    <img src="images/c1_IMG_story.png" 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">
+                <!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ -->
                 <h2> menu </h2>
+                <a href="#" class="switchMode">  VER DATOS </a>
+
             </div>
         </div>
     </div>
     <div class="extra-btn-container">
-        <a class="btn btn-primary btn-circle" id="map-btn-page-1"> ver datos <a>
+        <a class="btn btn-primary btn-circle" id="map-btn-page-1"> ver mapa <a>
     </div>
 </div>
 

templates/page2.html

@@ -2,8 +2,12 @@
     <div class="row">
         <div class="col-md-9">
             <div class="section-inner-content">
-                pagina 2
+                <div class="story-content">
-                <img src="images/medialab.jpg" class="img-responsive" />
+                    <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">

templates/page3.html

@@ -1,10 +1,13 @@
 <div class="container-fluid">
     <div class="row">
         <div class="col-md-9">
-            <div class="section-inner-content">
+            <div class="story-content">
-                pagina 3
                 <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 class="col-md-3">
             <div class="menu-content">

templates/page4.html

@@ -2,8 +2,12 @@
     <div class="row">
         <div class="col-md-9">
             <div class="section-inner-content">
-                pagina 4
+                <div class="story-content">
-                <img src="images/medialab.jpg" class="img-responsive" />
+                    <img src="images/c1_IMG_story.png" 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">