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

bug carga mapa

Browse source
This commit is contained in:
Sergio 2017-09-26 13:35:51 +02:00
parent c0d16a05b9
commit 9676f6c88b
9 changed files with 133 additions and 43 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.

18
index.html
View file

@ -60,6 +60,21 @@
<div class="section"> <div class="section">
<div class="section-container" id="page-4"> <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> </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-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-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-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 --> </ul> <!-- .cd-timeline-navigation -->
</div> <!-- .timeline --> </div> <!-- .timeline -->

51
js/main.js
View file

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

2
templates/page2.html
View file

@ -19,7 +19,7 @@
</div> </div>
</div> </div>
<div class="extra-btn-container"> <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>
</div> </div>

16
templates/page3.html
View file

@ -1,12 +1,13 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-md-9"> <div class="col-md-9">
<div class="story-content"> <div class="section-inner-content">
<img src="images/medialab.jpg" class="img-responsive" /> <div class="story-content">
</div> <img src="images/medialab.jpg" class="img-responsive" />
</div>
<div class="data-content" style="display:none"> <div class="data-content" style="display:none">
<img src="images/data.png" class="img-responsive" /> <img src="images/data.png" class="img-responsive" />
</div>
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
@ -14,11 +15,10 @@
<h2> menu pagina 3 </h2> <h2> menu pagina 3 </h2>
<a href="#" class="switchMode" class="btn btn-circle"> VER DATOS </a> <a href="#" class="switchMode" class="btn btn-circle"> VER DATOS </a>
</div> </div>
</div> </div>
</div> </div>
<div class="extra-btn-container"> <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>
</div> </div>

2
templates/page4.html
View file

@ -19,7 +19,7 @@
</div> </div>
</div> </div>
<div class="extra-btn-container"> <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>
</div> </div>

29
templates/page5.html Normal file
View file

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

29
templates/page6.html Normal file
View file

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

29
templates/page7.html Normal file
View file

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