Rebuild the example gallery with nested folder as a demo

pull/46/head
Romain Prieto 8 years ago
parent f69d2e3d48
commit 4d6d79f3d5

@ -77,11 +77,31 @@
<li>
<!-- This album -->
<a href="index-rotations.html">
<i class="fa fa-photo"></i>
<i class="fa fa-folder-o"></i>
rotations<span class="count">16</span>
</a>
<!-- And nested album -->
<ul>
<li>
<!-- This album -->
<a href="index-rotations-landscape.html">
<i class="fa fa-photo"></i>
landscape<span class="count">8</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
<li>
<!-- This album -->
<a href="index-rotations-portrait.html">
<i class="fa fa-photo"></i>
portrait<span class="count">8</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
</ul>
</li>
</ul>
@ -99,7 +119,6 @@
-->
<nav class="breadcrumbs">
<a class="breadcrumb-item" href="index.html">Home</a>&nbsp;/&nbsp;<a class="breadcrumb-item" href="index-captions.html">captions</a>
<!-- <span class="breadcrumb-item active">captions</span> -->
</nav>
<!--

@ -77,11 +77,31 @@
<li>
<!-- This album -->
<a href="index-rotations.html">
<i class="fa fa-photo"></i>
<i class="fa fa-folder-o"></i>
rotations<span class="count">16</span>
</a>
<!-- And nested album -->
<ul>
<li>
<!-- This album -->
<a href="index-rotations-landscape.html">
<i class="fa fa-photo"></i>
landscape<span class="count">8</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
<li>
<!-- This album -->
<a href="index-rotations-portrait.html">
<i class="fa fa-photo"></i>
portrait<span class="count">8</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
</ul>
</li>
</ul>
@ -99,7 +119,6 @@
-->
<nav class="breadcrumbs">
<a class="breadcrumb-item" href="index.html">Home</a>&nbsp;/&nbsp;<a class="breadcrumb-item" href="index-photos.html">photos</a>
<!-- <span class="breadcrumb-item active">photos</span> -->
</nav>
<!--

@ -0,0 +1,254 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Photo album - landscape</title>
<link rel="stylesheet" href="public/reset.css" />
<link rel="stylesheet" href="public/style.css" />
<link rel="stylesheet" href="public/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="public/light-gallery/css/lightgallery.css" />
<link rel="stylesheet" href="public/video-js.css" />
</head>
<body>
<div id="wrapper">
<!--
Gallery title
-->
<header>
<h1>
<label for="hamburger" class="hamburger-label noselect" role="button">
<i class="fa fa-navicon"></i>
</label>
Photo album
</h1>
</header>
<div id="container">
<!--
Sidebar with album hierarchy
-->
<input id="hamburger" class="hamburger-checkbox" type="checkbox" />
<nav id="sidebar">
<ul>
<li>
<!-- This album -->
<a href="index.html">
<i class="fa fa-folder-o"></i>
Home<span class="count">24</span>
</a>
<!-- And nested album -->
<ul>
<li>
<!-- This album -->
<a href="index-photos.html">
<i class="fa fa-photo"></i>
photos<span class="count">3</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
<li>
<!-- This album -->
<a href="index-videos.html">
<i class="fa fa-photo"></i>
videos<span class="count">2</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
<li>
<!-- This album -->
<a href="index-captions.html">
<i class="fa fa-photo"></i>
captions<span class="count">3</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
<li>
<!-- This album -->
<a href="index-rotations.html">
<i class="fa fa-folder-o"></i>
rotations<span class="count">16</span>
</a>
<!-- And nested album -->
<ul>
<li>
<!-- This album -->
<a href="index-rotations-landscape.html">
<i class="fa fa-photo"></i>
landscape<span class="count">8</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
<li>
<!-- This album -->
<a href="index-rotations-portrait.html">
<i class="fa fa-photo"></i>
portrait<span class="count">8</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<!--
Main gallery panel
-->
<section id="content">
<!--
Breadcrumbs of parent albums
-->
<nav class="breadcrumbs">
<a class="breadcrumb-item" href="index.html">Home</a>&nbsp;/&nbsp;<a class="breadcrumb-item" href="index-rotations.html">rotations</a>&nbsp;/&nbsp;<a class="breadcrumb-item" href="index-rotations-landscape.html">landscape</a>
</nav>
<!--
Nested albums, if any
-->
<ul id="albums">
</ul>
<!--
All photos and videos
-->
<ul id="media">
<li data-src="media/large/rotations/landscape/Landscape_1.jpg"
data-sub-html=""
data-download-url="media/large/rotations/landscape/Landscape_1.jpg">
<a href="media/large/rotations/landscape/Landscape_1.jpg">
<img src="media/thumbs/rotations/landscape/Landscape_1.jpg"
width="120"
height="120"
alt="Landscape_1.jpg" />
</a>
</li>
<li data-src="media/large/rotations/landscape/Landscape_2.jpg"
data-sub-html=""
data-download-url="media/large/rotations/landscape/Landscape_2.jpg">
<a href="media/large/rotations/landscape/Landscape_2.jpg">
<img src="media/thumbs/rotations/landscape/Landscape_2.jpg"
width="120"
height="120"
alt="Landscape_2.jpg" />
</a>
</li>
<li data-src="media/large/rotations/landscape/Landscape_3.jpg"
data-sub-html=""
data-download-url="media/large/rotations/landscape/Landscape_3.jpg">
<a href="media/large/rotations/landscape/Landscape_3.jpg">
<img src="media/thumbs/rotations/landscape/Landscape_3.jpg"
width="120"
height="120"
alt="Landscape_3.jpg" />
</a>
</li>
<li data-src="media/large/rotations/landscape/Landscape_4.jpg"
data-sub-html=""
data-download-url="media/large/rotations/landscape/Landscape_4.jpg">
<a href="media/large/rotations/landscape/Landscape_4.jpg">
<img src="media/thumbs/rotations/landscape/Landscape_4.jpg"
width="120"
height="120"
alt="Landscape_4.jpg" />
</a>
</li>
<li data-src="media/large/rotations/landscape/Landscape_5.jpg"
data-sub-html=""
data-download-url="media/large/rotations/landscape/Landscape_5.jpg">
<a href="media/large/rotations/landscape/Landscape_5.jpg">
<img src="media/thumbs/rotations/landscape/Landscape_5.jpg"
width="120"
height="120"
alt="Landscape_5.jpg" />
</a>
</li>
<li data-src="media/large/rotations/landscape/Landscape_6.jpg"
data-sub-html=""
data-download-url="media/large/rotations/landscape/Landscape_6.jpg">
<a href="media/large/rotations/landscape/Landscape_6.jpg">
<img src="media/thumbs/rotations/landscape/Landscape_6.jpg"
width="120"
height="120"
alt="Landscape_6.jpg" />
</a>
</li>
<li data-src="media/large/rotations/landscape/Landscape_7.jpg"
data-sub-html=""
data-download-url="media/large/rotations/landscape/Landscape_7.jpg">
<a href="media/large/rotations/landscape/Landscape_7.jpg">
<img src="media/thumbs/rotations/landscape/Landscape_7.jpg"
width="120"
height="120"
alt="Landscape_7.jpg" />
</a>
</li>
<li data-src="media/large/rotations/landscape/Landscape_8.jpg"
data-sub-html=""
data-download-url="media/large/rotations/landscape/Landscape_8.jpg">
<a href="media/large/rotations/landscape/Landscape_8.jpg">
<img src="media/thumbs/rotations/landscape/Landscape_8.jpg"
width="120"
height="120"
alt="Landscape_8.jpg" />
</a>
</li>
</ul>
</section>
</div>
</div>
<!-- Video loader -->
<div id="videos">
</div>
<!-- jQuery -->
<script src="public/jquery.min.js"></script>
<!-- VideoJS -->
<script src="public/video.js"></script>
<!-- LightGallery -->
<script src="public/light-gallery/js/lightgallery.js"></script>
<script src="public/light-gallery/js/lg-autoplay.js"></script>
<script src="public/light-gallery/js/lg-pager.js"></script>
<script src="public/light-gallery/js/lg-thumbnail.js"></script>
<script src="public/light-gallery/js/lg-video.js"></script>
<script>
$(document).ready(function() {
$("#media").lightGallery({
thumbWidth: 80,
controls: true,
loop : false,
download: true,
counter: true,
videojs: true
});
});
</script>
</body>
</html>

@ -0,0 +1,254 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Photo album - portrait</title>
<link rel="stylesheet" href="public/reset.css" />
<link rel="stylesheet" href="public/style.css" />
<link rel="stylesheet" href="public/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="public/light-gallery/css/lightgallery.css" />
<link rel="stylesheet" href="public/video-js.css" />
</head>
<body>
<div id="wrapper">
<!--
Gallery title
-->
<header>
<h1>
<label for="hamburger" class="hamburger-label noselect" role="button">
<i class="fa fa-navicon"></i>
</label>
Photo album
</h1>
</header>
<div id="container">
<!--
Sidebar with album hierarchy
-->
<input id="hamburger" class="hamburger-checkbox" type="checkbox" />
<nav id="sidebar">
<ul>
<li>
<!-- This album -->
<a href="index.html">
<i class="fa fa-folder-o"></i>
Home<span class="count">24</span>
</a>
<!-- And nested album -->
<ul>
<li>
<!-- This album -->
<a href="index-photos.html">
<i class="fa fa-photo"></i>
photos<span class="count">3</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
<li>
<!-- This album -->
<a href="index-videos.html">
<i class="fa fa-photo"></i>
videos<span class="count">2</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
<li>
<!-- This album -->
<a href="index-captions.html">
<i class="fa fa-photo"></i>
captions<span class="count">3</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
<li>
<!-- This album -->
<a href="index-rotations.html">
<i class="fa fa-folder-o"></i>
rotations<span class="count">16</span>
</a>
<!-- And nested album -->
<ul>
<li>
<!-- This album -->
<a href="index-rotations-landscape.html">
<i class="fa fa-photo"></i>
landscape<span class="count">8</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
<li>
<!-- This album -->
<a href="index-rotations-portrait.html">
<i class="fa fa-photo"></i>
portrait<span class="count">8</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<!--
Main gallery panel
-->
<section id="content">
<!--
Breadcrumbs of parent albums
-->
<nav class="breadcrumbs">
<a class="breadcrumb-item" href="index.html">Home</a>&nbsp;/&nbsp;<a class="breadcrumb-item" href="index-rotations.html">rotations</a>&nbsp;/&nbsp;<a class="breadcrumb-item" href="index-rotations-portrait.html">portrait</a>
</nav>
<!--
Nested albums, if any
-->
<ul id="albums">
</ul>
<!--
All photos and videos
-->
<ul id="media">
<li data-src="media/large/rotations/portrait/Portrait_1.jpg"
data-sub-html=""
data-download-url="media/large/rotations/portrait/Portrait_1.jpg">
<a href="media/large/rotations/portrait/Portrait_1.jpg">
<img src="media/thumbs/rotations/portrait/Portrait_1.jpg"
width="120"
height="120"
alt="Portrait_1.jpg" />
</a>
</li>
<li data-src="media/large/rotations/portrait/Portrait_2.jpg"
data-sub-html=""
data-download-url="media/large/rotations/portrait/Portrait_2.jpg">
<a href="media/large/rotations/portrait/Portrait_2.jpg">
<img src="media/thumbs/rotations/portrait/Portrait_2.jpg"
width="120"
height="120"
alt="Portrait_2.jpg" />
</a>
</li>
<li data-src="media/large/rotations/portrait/Portrait_3.jpg"
data-sub-html=""
data-download-url="media/large/rotations/portrait/Portrait_3.jpg">
<a href="media/large/rotations/portrait/Portrait_3.jpg">
<img src="media/thumbs/rotations/portrait/Portrait_3.jpg"
width="120"
height="120"
alt="Portrait_3.jpg" />
</a>
</li>
<li data-src="media/large/rotations/portrait/Portrait_4.jpg"
data-sub-html=""
data-download-url="media/large/rotations/portrait/Portrait_4.jpg">
<a href="media/large/rotations/portrait/Portrait_4.jpg">
<img src="media/thumbs/rotations/portrait/Portrait_4.jpg"
width="120"
height="120"
alt="Portrait_4.jpg" />
</a>
</li>
<li data-src="media/large/rotations/portrait/Portrait_5.jpg"
data-sub-html=""
data-download-url="media/large/rotations/portrait/Portrait_5.jpg">
<a href="media/large/rotations/portrait/Portrait_5.jpg">
<img src="media/thumbs/rotations/portrait/Portrait_5.jpg"
width="120"
height="120"
alt="Portrait_5.jpg" />
</a>
</li>
<li data-src="media/large/rotations/portrait/Portrait_6.jpg"
data-sub-html=""
data-download-url="media/large/rotations/portrait/Portrait_6.jpg">
<a href="media/large/rotations/portrait/Portrait_6.jpg">
<img src="media/thumbs/rotations/portrait/Portrait_6.jpg"
width="120"
height="120"
alt="Portrait_6.jpg" />
</a>
</li>
<li data-src="media/large/rotations/portrait/Portrait_7.jpg"
data-sub-html=""
data-download-url="media/large/rotations/portrait/Portrait_7.jpg">
<a href="media/large/rotations/portrait/Portrait_7.jpg">
<img src="media/thumbs/rotations/portrait/Portrait_7.jpg"
width="120"
height="120"
alt="Portrait_7.jpg" />
</a>
</li>
<li data-src="media/large/rotations/portrait/Portrait_8.jpg"
data-sub-html=""
data-download-url="media/large/rotations/portrait/Portrait_8.jpg">
<a href="media/large/rotations/portrait/Portrait_8.jpg">
<img src="media/thumbs/rotations/portrait/Portrait_8.jpg"
width="120"
height="120"
alt="Portrait_8.jpg" />
</a>
</li>
</ul>
</section>
</div>
</div>
<!-- Video loader -->
<div id="videos">
</div>
<!-- jQuery -->
<script src="public/jquery.min.js"></script>
<!-- VideoJS -->
<script src="public/video.js"></script>
<!-- LightGallery -->
<script src="public/light-gallery/js/lightgallery.js"></script>
<script src="public/light-gallery/js/lg-autoplay.js"></script>
<script src="public/light-gallery/js/lg-pager.js"></script>
<script src="public/light-gallery/js/lg-thumbnail.js"></script>
<script src="public/light-gallery/js/lg-video.js"></script>
<script>
$(document).ready(function() {
$("#media").lightGallery({
thumbWidth: 80,
controls: true,
loop : false,
download: true,
counter: true,
videojs: true
});
});
</script>
</body>
</html>

@ -77,11 +77,31 @@
<li>
<!-- This album -->
<a href="index-rotations.html">
<i class="fa fa-photo"></i>
<i class="fa fa-folder-o"></i>
rotations<span class="count">16</span>
</a>
<!-- And nested album -->
<ul>
<li>
<!-- This album -->
<a href="index-rotations-landscape.html">
<i class="fa fa-photo"></i>
landscape<span class="count">8</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
<li>
<!-- This album -->
<a href="index-rotations-portrait.html">
<i class="fa fa-photo"></i>
portrait<span class="count">8</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
</ul>
</li>
</ul>
@ -99,179 +119,36 @@
-->
<nav class="breadcrumbs">
<a class="breadcrumb-item" href="index.html">Home</a>&nbsp;/&nbsp;<a class="breadcrumb-item" href="index-rotations.html">rotations</a>
<!-- <span class="breadcrumb-item active">rotations</span> -->
</nav>
<!--
Nested albums, if any
-->
<ul id="albums">
</ul>
<li>
<a href="index-rotations-landscape.html">
<ul class="grid clearfix"><li><img src="media/thumbs/rotations/landscape/Landscape_1.jpg" /></li><li><img src="media/thumbs/rotations/landscape/Landscape_2.jpg" /></li> </ul>
<h3>landscape</h3>
<div class="meta">
8 photos<br />
09 Oct 2016 - 09 Oct 2016
</div>
</a>
</li><li>
<a href="index-rotations-portrait.html">
<ul class="grid clearfix"><li><img src="media/thumbs/rotations/portrait/Portrait_1.jpg" /></li><li><img src="media/thumbs/rotations/portrait/Portrait_2.jpg" /></li> </ul>
<h3>portrait</h3>
<div class="meta">
8 photos<br />
09 Oct 2016 - 09 Oct 2016
</div>
</a>
</li> </ul>
<!--
All photos and videos
-->
<ul id="media">
<li data-src="media/large/rotations/Landscape_1.jpg"
data-sub-html=""
data-download-url="media/large/rotations/Landscape_1.jpg">
<a href="media/large/rotations/Landscape_1.jpg">
<img src="media/thumbs/rotations/Landscape_1.jpg"
width="120"
height="120"
alt="Landscape_1.jpg" />
</a>
</li>
<li data-src="media/large/rotations/Landscape_2.jpg"
data-sub-html=""
data-download-url="media/large/rotations/Landscape_2.jpg">
<a href="media/large/rotations/Landscape_2.jpg">
<img src="media/thumbs/rotations/Landscape_2.jpg"
width="120"
height="120"
alt="Landscape_2.jpg" />
</a>
</li>
<li data-src="media/large/rotations/Landscape_3.jpg"
data-sub-html=""
data-download-url="media/large/rotations/Landscape_3.jpg">
<a href="media/large/rotations/Landscape_3.jpg">
<img src="media/thumbs/rotations/Landscape_3.jpg"
width="120"
height="120"
alt="Landscape_3.jpg" />
</a>
</li>
<li data-src="media/large/rotations/Landscape_4.jpg"
data-sub-html=""
data-download-url="media/large/rotations/Landscape_4.jpg">
<a href="media/large/rotations/Landscape_4.jpg">
<img src="media/thumbs/rotations/Landscape_4.jpg"
width="120"
height="120"
alt="Landscape_4.jpg" />
</a>
</li>
<li data-src="media/large/rotations/Landscape_5.jpg"
data-sub-html=""
data-download-url="media/large/rotations/Landscape_5.jpg">
<a href="media/large/rotations/Landscape_5.jpg">
<img src="media/thumbs/rotations/Landscape_5.jpg"
width="120"
height="120"
alt="Landscape_5.jpg" />
</a>
</li>
<li data-src="media/large/rotations/Landscape_6.jpg"
data-sub-html=""
data-download-url="media/large/rotations/Landscape_6.jpg">
<a href="media/large/rotations/Landscape_6.jpg">
<img src="media/thumbs/rotations/Landscape_6.jpg"
width="120"
height="120"
alt="Landscape_6.jpg" />
</a>
</li>
<li data-src="media/large/rotations/Landscape_7.jpg"
data-sub-html=""
data-download-url="media/large/rotations/Landscape_7.jpg">
<a href="media/large/rotations/Landscape_7.jpg">
<img src="media/thumbs/rotations/Landscape_7.jpg"
width="120"
height="120"
alt="Landscape_7.jpg" />
</a>
</li>
<li data-src="media/large/rotations/Landscape_8.jpg"
data-sub-html=""
data-download-url="media/large/rotations/Landscape_8.jpg">
<a href="media/large/rotations/Landscape_8.jpg">
<img src="media/thumbs/rotations/Landscape_8.jpg"
width="120"
height="120"
alt="Landscape_8.jpg" />
</a>
</li>
<li data-src="media/large/rotations/Portrait_1.jpg"
data-sub-html=""
data-download-url="media/large/rotations/Portrait_1.jpg">
<a href="media/large/rotations/Portrait_1.jpg">
<img src="media/thumbs/rotations/Portrait_1.jpg"
width="120"
height="120"
alt="Portrait_1.jpg" />
</a>
</li>
<li data-src="media/large/rotations/Portrait_2.jpg"
data-sub-html=""
data-download-url="media/large/rotations/Portrait_2.jpg">
<a href="media/large/rotations/Portrait_2.jpg">
<img src="media/thumbs/rotations/Portrait_2.jpg"
width="120"
height="120"
alt="Portrait_2.jpg" />
</a>
</li>
<li data-src="media/large/rotations/Portrait_3.jpg"
data-sub-html=""
data-download-url="media/large/rotations/Portrait_3.jpg">
<a href="media/large/rotations/Portrait_3.jpg">
<img src="media/thumbs/rotations/Portrait_3.jpg"
width="120"
height="120"
alt="Portrait_3.jpg" />
</a>
</li>
<li data-src="media/large/rotations/Portrait_4.jpg"
data-sub-html=""
data-download-url="media/large/rotations/Portrait_4.jpg">
<a href="media/large/rotations/Portrait_4.jpg">
<img src="media/thumbs/rotations/Portrait_4.jpg"
width="120"
height="120"
alt="Portrait_4.jpg" />
</a>
</li>
<li data-src="media/large/rotations/Portrait_5.jpg"
data-sub-html=""
data-download-url="media/large/rotations/Portrait_5.jpg">
<a href="media/large/rotations/Portrait_5.jpg">
<img src="media/thumbs/rotations/Portrait_5.jpg"
width="120"
height="120"
alt="Portrait_5.jpg" />
</a>
</li>
<li data-src="media/large/rotations/Portrait_6.jpg"
data-sub-html=""
data-download-url="media/large/rotations/Portrait_6.jpg">
<a href="media/large/rotations/Portrait_6.jpg">
<img src="media/thumbs/rotations/Portrait_6.jpg"
width="120"
height="120"
alt="Portrait_6.jpg" />
</a>
</li>
<li data-src="media/large/rotations/Portrait_7.jpg"
data-sub-html=""
data-download-url="media/large/rotations/Portrait_7.jpg">
<a href="media/large/rotations/Portrait_7.jpg">
<img src="media/thumbs/rotations/Portrait_7.jpg"
width="120"
height="120"
alt="Portrait_7.jpg" />
</a>
</li>
<li data-src="media/large/rotations/Portrait_8.jpg"
data-sub-html=""
data-download-url="media/large/rotations/Portrait_8.jpg">
<a href="media/large/rotations/Portrait_8.jpg">
<img src="media/thumbs/rotations/Portrait_8.jpg"
width="120"
height="120"
alt="Portrait_8.jpg" />
</a>
</li>
</ul>
</section>

@ -77,11 +77,31 @@
<li>
<!-- This album -->
<a href="index-rotations.html">
<i class="fa fa-photo"></i>
<i class="fa fa-folder-o"></i>
rotations<span class="count">16</span>
</a>
<!-- And nested album -->
<ul>
<li>
<!-- This album -->
<a href="index-rotations-landscape.html">
<i class="fa fa-photo"></i>
landscape<span class="count">8</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
<li>
<!-- This album -->
<a href="index-rotations-portrait.html">
<i class="fa fa-photo"></i>
portrait<span class="count">8</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
</ul>
</li>
</ul>
@ -99,7 +119,6 @@
-->
<nav class="breadcrumbs">
<a class="breadcrumb-item" href="index.html">Home</a>&nbsp;/&nbsp;<a class="breadcrumb-item" href="index-videos.html">videos</a>
<!-- <span class="breadcrumb-item active">videos</span> -->
</nav>
<!--
@ -112,7 +131,7 @@
All photos and videos
-->
<ul id="media">
<li data-html="#media23"
<li data-html="#media7"
data-poster="media/large/videos/countdown.jpg"
data-download-url="">
<a href="">
@ -123,7 +142,7 @@
</a>
<img class="video-overlay" src="public/play.png" />
</li>
<li data-html="#media24"
<li data-html="#media8"
data-poster="media/large/videos/momentum.jpg"
data-download-url="">
<a href="">
@ -144,13 +163,13 @@
<!-- Video loader -->
<div id="videos">
<div id="media23" style="display:none;">
<div id="media7" style="display:none;">
<video class="lg-video-object lg-html5 video-js vjs-default-skin" preload="none" controls>
<source src="media/large/videos/countdown.mp4" type="video/mp4" />
Your browser does not support HTML5 video
</video>
</div>
<div id="media24" style="display:none;">
<div id="media8" style="display:none;">
<video class="lg-video-object lg-html5 video-js vjs-default-skin" preload="none" controls>
<source src="media/large/videos/momentum.mp4" type="video/mp4" />
Your browser does not support HTML5 video

@ -77,11 +77,31 @@
<li>
<!-- This album -->
<a href="index-rotations.html">
<i class="fa fa-photo"></i>
<i class="fa fa-folder-o"></i>
rotations<span class="count">16</span>
</a>
<!-- And nested album -->
<ul>
<li>
<!-- This album -->
<a href="index-rotations-landscape.html">
<i class="fa fa-photo"></i>
landscape<span class="count">8</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
<li>
<!-- This album -->
<a href="index-rotations-portrait.html">
<i class="fa fa-photo"></i>
portrait<span class="count">8</span>
</a>
<!-- And nested album -->
<ul>
</ul>
</li>
</ul>
</li>
</ul>
@ -99,7 +119,6 @@
-->
<nav class="breadcrumbs">
<a class="breadcrumb-item" href="index.html">Home</a>
<!-- <span class="breadcrumb-item active">Home</span> -->
</nav>
<!--
@ -135,10 +154,10 @@
</a>
</li><li>
<a href="index-rotations.html">
<ul class="grid clearfix"><li><img src="media/thumbs/rotations/Landscape_1.jpg" /></li><li><img src="media/thumbs/rotations/Landscape_2.jpg" /></li> </ul>
<ul class="grid clearfix"><li><img src="media/thumbs/rotations/landscape/Landscape_1.jpg" /></li><li><img src="media/thumbs/rotations/landscape/Landscape_2.jpg" /></li> </ul>
<h3>rotations</h3>
<div class="meta">
16 photos<br />
2 albums, 16 photos<br />
09 Oct 2016 - 09 Oct 2016
</div>
</a>

Before

Width:  |  Height:  |  Size: 115 KiB

After

Width:  |  Height:  |  Size: 115 KiB

Before

Width:  |  Height:  |  Size: 109 KiB

After

Width:  |  Height:  |  Size: 109 KiB

Before

Width:  |  Height:  |  Size: 109 KiB

After

Width:  |  Height:  |  Size: 109 KiB

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 108 KiB

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 108 KiB

Before

Width:  |  Height:  |  Size: 109 KiB

After

Width:  |  Height:  |  Size: 109 KiB

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 108 KiB

Before

Width:  |  Height:  |  Size: 109 KiB

After

Width:  |  Height:  |  Size: 109 KiB

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 62 KiB

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 62 KiB

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 62 KiB

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 62 KiB

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 63 KiB

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 62 KiB

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 62 KiB

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 62 KiB

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

@ -50,7 +50,24 @@
"orientation": 1
}
},
"rotations/Landscape_1.jpg": {
"videos/countdown.mp4": {
"fileDate": 1397816697000,
"mediaType": "video",
"exif": {
"date": 1397780697000,
"orientation": null
}
},
"videos/momentum.m2ts": {
"fileDate": 1417439019000,
"mediaType": "video",
"exif": {
"date": null,
"orientation": null,
"caption": null
}
},
"rotations/landscape/Landscape_1.jpg": {
"fileDate": 1475977293000,
"mediaType": "photo",
"exif": {
@ -58,7 +75,7 @@
"orientation": 1
}
},
"rotations/Landscape_2.jpg": {
"rotations/landscape/Landscape_2.jpg": {
"fileDate": 1475977293000,
"mediaType": "photo",
"exif": {
@ -66,7 +83,7 @@
"orientation": 2
}
},
"rotations/Landscape_3.jpg": {
"rotations/landscape/Landscape_3.jpg": {
"fileDate": 1475977293000,
"mediaType": "photo",
"exif": {
@ -74,7 +91,7 @@
"orientation": 3
}
},
"rotations/Landscape_4.jpg": {
"rotations/landscape/Landscape_4.jpg": {
"fileDate": 1475977293000,
"mediaType": "photo",
"exif": {
@ -82,7 +99,7 @@
"orientation": 4
}
},
"rotations/Landscape_5.jpg": {
"rotations/landscape/Landscape_5.jpg": {
"fileDate": 1475977293000,
"mediaType": "photo",
"exif": {
@ -90,7 +107,7 @@
"orientation": 5
}
},
"rotations/Landscape_6.jpg": {
"rotations/landscape/Landscape_6.jpg": {
"fileDate": 1475977293000,
"mediaType": "photo",
"exif": {
@ -98,7 +115,7 @@
"orientation": 6
}
},
"rotations/Landscape_7.jpg": {
"rotations/landscape/Landscape_7.jpg": {
"fileDate": 1475977293000,
"mediaType": "photo",
"exif": {
@ -106,7 +123,7 @@
"orientation": 7
}
},
"rotations/Landscape_8.jpg": {
"rotations/landscape/Landscape_8.jpg": {
"fileDate": 1475977293000,
"mediaType": "photo",
"exif": {
@ -114,7 +131,7 @@
"orientation": 8
}
},
"rotations/Portrait_1.jpg": {
"rotations/portrait/Portrait_1.jpg": {
"fileDate": 1475977293000,
"mediaType": "photo",
"exif": {
@ -122,7 +139,7 @@
"orientation": 1
}
},
"rotations/Portrait_2.jpg": {
"rotations/portrait/Portrait_2.jpg": {
"fileDate": 1475977293000,
"mediaType": "photo",
"exif": {
@ -130,7 +147,7 @@
"orientation": 2
}
},
"rotations/Portrait_3.jpg": {
"rotations/portrait/Portrait_3.jpg": {
"fileDate": 1475977293000,
"mediaType": "photo",
"exif": {
@ -138,7 +155,7 @@
"orientation": 3
}
},
"rotations/Portrait_4.jpg": {
"rotations/portrait/Portrait_4.jpg": {
"fileDate": 1475977293000,
"mediaType": "photo",
"exif": {
@ -146,7 +163,7 @@
"orientation": 4
}
},
"rotations/Portrait_5.jpg": {
"rotations/portrait/Portrait_5.jpg": {
"fileDate": 1475977293000,
"mediaType": "photo",
"exif": {
@ -154,7 +171,7 @@
"orientation": 5
}
},
"rotations/Portrait_6.jpg": {
"rotations/portrait/Portrait_6.jpg": {
"fileDate": 1475977293000,
"mediaType": "photo",
"exif": {
@ -162,7 +179,7 @@
"orientation": 6
}
},
"rotations/Portrait_7.jpg": {
"rotations/portrait/Portrait_7.jpg": {
"fileDate": 1475977293000,
"mediaType": "photo",
"exif": {
@ -170,29 +187,12 @@
"orientation": 7
}
},
"rotations/Portrait_8.jpg": {
"rotations/portrait/Portrait_8.jpg": {
"fileDate": 1475977293000,
"mediaType": "photo",
"exif": {
"date": null,
"orientation": 8
}
},
"videos/countdown.mp4": {
"fileDate": 1397816697000,
"mediaType": "video",
"exif": {
"date": 1397780697000,
"orientation": null
}
},
"videos/momentum.m2ts": {
"fileDate": 1417439019000,
"mediaType": "video",
"exif": {
"date": null,
"orientation": null,
"caption": null
}
}
}

@ -101,6 +101,9 @@ h1 {
background: #fafafa;
border-right: 1px solid #ddd;
}
#sidebar ul:not(:first-child) {
margin-left: 1.5em;
}
#sidebar i.fa {
margin-right: 0.3em;
}

Before

Width:  |  Height:  |  Size: 136 KiB

After

Width:  |  Height:  |  Size: 136 KiB

Before

Width:  |  Height:  |  Size: 134 KiB

After

Width:  |  Height:  |  Size: 134 KiB

Before

Width:  |  Height:  |  Size: 138 KiB

After

Width:  |  Height:  |  Size: 138 KiB

Before

Width:  |  Height:  |  Size: 137 KiB

After

Width:  |  Height:  |  Size: 137 KiB

Before

Width:  |  Height:  |  Size: 134 KiB

After

Width:  |  Height:  |  Size: 134 KiB

Before

Width:  |  Height:  |  Size: 134 KiB

After

Width:  |  Height:  |  Size: 134 KiB

Before

Width:  |  Height:  |  Size: 137 KiB

After

Width:  |  Height:  |  Size: 137 KiB

Before

Width:  |  Height:  |  Size: 138 KiB

After

Width:  |  Height:  |  Size: 138 KiB

Before

Width:  |  Height:  |  Size: 126 KiB

After

Width:  |  Height:  |  Size: 126 KiB

Before

Width:  |  Height:  |  Size: 133 KiB

After

Width:  |  Height:  |  Size: 133 KiB

Before

Width:  |  Height:  |  Size: 133 KiB

After

Width:  |  Height:  |  Size: 133 KiB

Before

Width:  |  Height:  |  Size: 128 KiB

After

Width:  |  Height:  |  Size: 128 KiB

Before

Width:  |  Height:  |  Size: 131 KiB

After

Width:  |  Height:  |  Size: 131 KiB

Before

Width:  |  Height:  |  Size: 133 KiB

After

Width:  |  Height:  |  Size: 133 KiB

Before

Width:  |  Height:  |  Size: 132 KiB

After

Width:  |  Height:  |  Size: 132 KiB

Before

Width:  |  Height:  |  Size: 129 KiB

After

Width:  |  Height:  |  Size: 129 KiB

Loading…
Cancel
Save