flow/historia-de-zainab
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

boton datos historia

Browse source
This commit is contained in:
Sergio 2017-09-26 11:17:09 +02:00
parent 6fbb940f0d
commit 051c809184
8 changed files with 84 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
.DS_Store vendored
View file

Binary file not shown.

BIN
images/data.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 253 KiB

14
index.html
View file

@ -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>

71
js/main.js
View file

@ -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', {
attach: '#map-btn-page-1',
content: $('#map-page-1'),
closeButton: 'box'
});
loadModalEvent(1);
counterLoading();
})
$('#page-2').load("templates/page2.html",function(){
var modal = new jBox('Modal', {
attach: '#map-btn-page-2',
content: $('#map-page-2'),
closeButton: 'box'
});
loadModalEvent(2);
counterLoading();
})
$('#page-3').load("templates/page3.html",function(){
var modal = new jBox('Modal', {
attach: '#map-btn-page-3',
content: $('#map-page-3'),
closeButton: 'box'
});
loadModalEvent(3);
counterLoading();
})
$('#page-4').load("templates/page4.html",function(){
var modal = new jBox('Modal', {
attach: '#map-btn-page-4',
content: $('#map-page-4'),
closeButton: 'box'
});
loadModalEvent(4);
counterLoading();
})
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')
})*/
}
}

10
templates/page1.html
View file

@ -2,17 +2,25 @@
<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" />
</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>

6
templates/page2.html
View file

@ -2,9 +2,13 @@
<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" />
</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">

7
templates/page3.html
View file

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

8
templates/page4.html
View file

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