added click on chemin de fer, click on arrows, etc

css/dist/main.css

@@ -63,25 +63,55 @@ html, body {
         cursor: pointer; }
     #main .page.page-6 .overlay {
       background-image: url("../../images/vectos/04_chance-RB.svg"); }
-  #main #railway {
+  #main #navigation {
     position: absolute;
+    z-index: 3;
     bottom: 0;
     width: 100%;
-    background-color: rgba(0, 0, 0, 0.7);
+    padding: 2mm 0;
+    background-color: rgba(26, 26, 26, 0.7);
     overflow: hidden;
-    text-align: center; }
-    #main #railway ul {
-      padding: 1mm; }
-      #main #railway ul li {
-        display: inline-block;
-        vertical-align: middle;
-        background-color: white;
-        width: 1mm;
-        height: 7mm;
-        margin-left: 0.5mm;
-        background-position: center;
-        background-size: cover; }
-        #main #railway ul li.active {
-          width: 7mm; }
-        #main #railway ul li.page-right {
-          margin-right: 1mm; }
+    text-align: center;
+    opacity: 0;
+    transition: opacity .3s ease-in-out; }
+    #main #navigation:hover {
+      opacity: 1; }
+  #main #pagination {
+    color: #fff;
+    font-size: 1em;
+    padding: 0 0 2mm 0; }
+    #main #pagination div {
+      display: inline-block;
+      width: 49%; }
+      #main #pagination div.wrapper-l {
+        left: 0;
+        text-align: left; }
+      #main #pagination div.wrapper-r {
+        right: 0;
+        text-align: right; }
+      #main #pagination div span.l {
+        cursor: pointer;
+        line-height: -1; }
+  #main #railway ul {
+    padding: 1mm;
+    margin: 0; }
+    #main #railway ul li {
+      display: inline-block;
+      vertical-align: middle;
+      background-color: white;
+      width: 1mm;
+      height: 7mm;
+      margin-left: 0.5mm;
+      background-position: center;
+      background-size: cover;
+      opacity: 0.2;
+      transition: opacity 0.3s ease-in-out; }
+      #main #railway ul li.active {
+        width: 7mm;
+        cursor: pointer; }
+      #main #railway ul li.page-right {
+        margin-right: 1mm; }
+      #main #railway ul li.current, #main #railway ul li.active:hover {
+        opacity: 1; }
+    #main #railway ul:hover li {
+      opacity: 1; }

css/main.scss

@@ -94,14 +94,40 @@ $mi:1cm;
     }
   }
 
-  #railway{
-    position:absolute;
+  #navigation{
+    position:absolute; z-index: 3;
     bottom:0; width:100%; // height:2cm;
-    background-color: rgba(0, 0, 0, 0.7);
+    padding:2mm 0;
+    background-color: rgba(26, 26, 26, 0.7);
     overflow: hidden;
     text-align: center;
+    opacity: 0;
+    transition: opacity .3s ease-in-out;
+    &:hover{opacity: 1;}
+  }
+
+  #pagination{
+    color:#fff;
+    font-size: 1em;
+    padding: 0 0 2mm 0;
+    div{
+      display: inline-block;
+      width:49%;
+      &.wrapper-l{left:0; text-align: left;}
+      &.wrapper-r{right:0; text-align: right;}
+      span.p{
+
+      }
+      span.l{
+        cursor: pointer;
+        line-height: -1;
+      }
+    }
+  }
+
+  #railway{
     ul{
-      padding:1mm;
+      padding:1mm; margin:0;
       li{
         display: inline-block; vertical-align: middle;
         background-color: white;
@@ -110,12 +136,16 @@ $mi:1cm;
         background-position: center;
         background-size: cover;
         &.active{
-          width:7mm;
+          width:7mm; cursor: pointer;
         }
         &.page-right{
           margin-right: 1mm;
         }
+        opacity:0.2;
+        transition: opacity 0.3s ease-in-out;
+        &.current, &.active:hover{opacity: 1;}
       }
+      &:hover li{opacity: 1;}
     }
   }
 

index.html

@@ -22,8 +22,20 @@
           <div class="overlay"></div>
           <div class="maps"></div>
         </section>
-        <nav id="railway">
-
+        <nav id="navigation">
+          <div id="pagination">
+            <div class="wrapper-l">
+              <span class="l">&#10094;</span>
+              <span class="p"></span>
+            </div>
+            <div class="wrapper-r">
+              <span class="p"></span>
+              <span class="l">&#10095;</span>
+            </div>
+          </div>
+          <div id="railway">
+            
+          </div>
         </nav>
 
       </section>

js/main.js

@@ -13,8 +13,10 @@ $(document).ready(function() {
       _$page_left = $('#page-left'), _$page_right = $('#page-right'),
       _$overlay_left = $('#page-left .overlay'), _$overlay_right = $('#page-right .overlay'),
       _$maps_left = $('#page-left .maps'), _$maps_right = $('#page-right .maps'),
-      _bgs_prefix = "images/pages/";
-      _$railway = $('#railway');
+      _bgs_prefix = "images/pages/",
+      _$railway = $('#railway'),
+      _$pagination = $('#pagination');
+      _$pagi_l = $('#pagination .wrapper-l .p'), _$pagi_r = $('#pagination .wrapper-r .p');
 
   //     ____      _ __
   //    /  _/___  (_) /_
@@ -28,6 +30,7 @@ $(document).ready(function() {
     initData();
     initRailway();
     initkeyboard();
+    initPagination();
     changePages();
   };
 
@@ -59,9 +62,9 @@ $(document).ready(function() {
   function initRailway(){
     var $ul = $('<ul>');
     var ap, bgl, bgr;
-    for (var p = 0; p <= _pl; p++) {
-      console.log("-- PAGE --", p);
-      ap = typeof _active_pages[p] !== "undefined" ? _active_pages[p] : false;
+    for (var dp = 0; dp <= _pl; dp++) {
+      // console.log("-- DOUBLE PAGE --", dp);
+      ap = typeof _active_pages[dp] !== "undefined" ? _active_pages[dp] : false;
       // console.log("ap",ap);
       if(ap !== false){
         bgl = typeof _PAGES[ap][0].bg !== "undefined" ? _bgs_prefix+"thumbs/"+_PAGES[ap][0].bg : false;
@@ -73,21 +76,33 @@ $(document).ready(function() {
       // console.log("bgl", bgl);
       // console.log("bgr", bgr);
 
-      if(p!=0)
+      var p = dp*2;
+
+      if(dp!=0)
         $('<li>')
-          .addClass('page page-'+p+' page-left')
+          .addClass('page page-'+(p-1)+' double-page-'+dp+' page-left')
           .addClass(bgl ? 'active' : 0)
           .css({'background-image': bgl ? "url("+bgl+")" : "none"})
           .appendTo($ul);
 
-      if(p<_pl)
+      if(dp<_pl)
         $('<li>')
-          .addClass('page page-'+p+' page-right')
+          .addClass('page page-'+p+' double-page-'+dp+' page-right')
           .addClass(bgr ? 'active' : 0)
           .css({'background-image': bgr ? "url("+bgr+")" : "none"})
           .appendTo($ul);
     }
     $ul.appendTo(_$railway);
+
+    $('li', _$railway).on('click', function(event) {
+      var p = $(this).attr('class').match(/page-(\d+)/)[1];
+      console.log('page', p);
+      console.log(p%2);
+      // check if page is pair ou impair and calculate de double_page number
+      var dp = p%2 ? (p*1+1)/2 : p/2;
+      _current_pages = _active_pages[dp];
+      changePages();
+    });
   }
 
 // TODO: next page arrow
@@ -116,14 +131,19 @@ $(document).ready(function() {
   function changePages(){
     console.log("changePages", _current_pages);
 
+    $('li',_$railway).removeClass('current');
+
     if (typeof _PAGES[_current_pages][0].bg !== "undefined") {
       var pl = _PAGES[_current_pages][0];
       _$page_left
         .css({'background-image': "url("+_bgs_prefix+pl.bg+")"})
         .removeClass(pageClassToRemove)
         .addClass('page-'+pl.page);
+      _$pagi_l.text(pl.page);
+      $('li.page-'+pl.page).addClass('current');
     }else{
       _$page_left.css({'background-image': "none"});
+      _$pagi_l.text("");
     }
 
     if (typeof _PAGES[_current_pages][1].bg !== "undefined") {
@@ -132,8 +152,11 @@ $(document).ready(function() {
         .css({'background-image': "url("+_bgs_prefix+pr.bg+")"})
         .removeClass(pageClassToRemove)
         .addClass('page-'+pr.page);
+      _$pagi_r.text(pr.page);
+      $('li.page-'+pr.page).addClass('current');
     }else{
       _$page_right.css({'background-image': "none"});
+      _$pagi_r.text("");
     }
 
     // updatePagesOverlays();
@@ -198,5 +221,24 @@ $(document).ready(function() {
     });
   };
 
+  //     ____              _             __  _
+  //    / __ \____ _____ _(_)___  ____ _/ /_(_)___  ____
+  //   / /_/ / __ `/ __ `/ / __ \/ __ `/ __/ / __ \/ __ \
+  //  / ____/ /_/ / /_/ / / / / / /_/ / /_/ / /_/ / / / /
+  // /_/    \__,_/\__, /_/_/ /_/\__,_/\__/_/\____/_/ /_/
+  //             /____/
+  function initPagination(){
+    $('.wrapper-l .l', _$pagination).on('click', function(event) {
+      prevPages();
+    });
+    $('.wrapper-r .l', _$pagination).on('click', function(event) {
+      nextPages();
+    });
+
+
+  };
+
+
+
   init();
 });