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

47
js/main.js
View file

@ -1,16 +1,14 @@
viewStatus= "story" /* data story */
pages= 0
totalPages=3;
pagesLoaded= 0
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(){
loadModalEvent(2);
for (var i=1; i<= totalPages; i++){
(function (n) {
$('#page-'+n).load("templates/page"+n+".html",function(){
counterLoading();
loadModalEvent(n);
})
$('#page-3').load("templates/page3.html",function(){
loadModalEvent(3);
counterLoading();
})
$('#page-4').load("templates/page4.html",function(){
loadModalEvent(4);
counterLoading();
})
turnEventsOn();
})(i)
}
//turnEventsOn();
}
function loadModalEvent( i){
function loadModalEvent(j){
var modal = new jBox('Modal', {
attach: '#map-btn-page-'+i,
content: $('#map-page-'+i),
attach: '#map-btn-page-'+j,
content: $('#map-page-'+j),
closeButton: 'box'
});
}
function counterLoading(){
pages++;
if(pages>totalPages){
pagesLoaded++;
if(pagesLoaded >= 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();

2
templates/page2.html
View file

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

6
templates/page3.html
View file

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

2
templates/page4.html
View file

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

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>