Merge pull request #46 from rprieto/nested-albums

Nested albums
pull/47/head
Romain 8 years ago committed by GitHub
commit 942f673670

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

@ -14,6 +14,12 @@ var SORT_MEDIA_BY = {
date: function(file) { return file.date; }
};
var PREVIEW_MISSING = {
urls: {
thumb: 'public/missing.png'
}
};
function Album(opts) {
if (typeof opts === 'string') opts = { title: opts };
this.title = opts.title || ('Album ' + index++);
@ -33,13 +39,15 @@ Album.prototype.finalize = function(options) {
});
// is this the top-level album?
this.home = this.depth === 0;
// lock all nested albums first (recursive)
// finalize all nested albums first (recursive)
// and set a nested filename
for (var i = 0; i < this.albums.length; ++i) {
this.albums[i].filename = this.filename + '-' + this.albums[i].filename;
this.albums[i].depth = this.depth + 1;
this.albums[i].finalize();
}
// perform stats & other calculations
// once the nested albums have been finalized too
this.calculateStats();
this.calculateSummary();
this.sort(options);
@ -86,12 +94,17 @@ Album.prototype.sort = function(options) {
};
Album.prototype.pickPreviews = function() {
this.previews = this.files.slice(0, PREVIEW_COUNT);
// also consider previews from nested albums
var nestedPicks = _.flatten(_.map(this.albums, 'previews')).filter(function(file) {
return file !== PREVIEW_MISSING;
});
// then pick the top 4 overall
var potentialPicks = _.concat(this.files, nestedPicks);
this.previews = potentialPicks.slice(0, PREVIEW_COUNT);
// and fill the gap with a placeholder
var missing = PREVIEW_COUNT - this.previews.length;
for (var i = 0; i < missing; ++i) {
this.previews.push({
urls: { thumb: 'public/missing.png' }
});
this.previews.push(PREVIEW_MISSING);
}
};

@ -6,19 +6,33 @@ var Album = require('./album');
// e.g. an album might be called "holidays/newyork" or "holidays/tokyo"n
// eventually we could return nested albums as an option
exports.albums = function(collection, opts) {
var folders = {};
var albumsByFullPath = {};
// put all files in the right album
collection.files.forEach(function(file) {
var dir = path.dirname(file.filepath);
if (!folders.hasOwnProperty(dir)) {
folders[dir] = [];
}
folders[dir].push(file);
var fullDir = path.dirname(file.filepath);
createAlbumHierarchy(albumsByFullPath, fullDir);
albumsByFullPath[fullDir].files.push(file);
});
// only return top-level albums
var topLevel = _.keys(albumsByFullPath).filter(function(dir) {
return path.dirname(dir) === '.';
});
var albums = _.map(folders, function(val, key) {
return new Album({
title: key,
files: folders[key]
});
})
return albums;
return _.values(_.pick(albumsByFullPath, topLevel));
};
function createAlbumHierarchy(albumsByFullPath, fullDir) {
if (!albumsByFullPath.hasOwnProperty(fullDir)) {
// create parent albums first
var parentDir = path.dirname(fullDir);
if (parentDir !== '.') {
createAlbumHierarchy(albumsByFullPath, parentDir);
}
// then create album if it doesn't exist
var dirname = path.basename(fullDir);
albumsByFullPath[fullDir] = new Album({title: dirname});
// then attach to parent
if (parentDir !== '.') {
albumsByFullPath[parentDir].albums.push(albumsByFullPath[fullDir]);
}
}
}

@ -164,6 +164,10 @@ h1 {
border-right: 1px solid @borders;
}
#sidebar ul:not(:first-child) {
margin-left: 1.5em;
}
#sidebar i.fa {
margin-right: 0.3em;
}

@ -139,6 +139,28 @@ describe('Album', function() {
should(a.previews[3].urls.thumb).eql('public/missing.png');
});
it('uses files from nested albums too', function() {
var a = new Album({
title: 'a',
albums: [
new Album({
title: 'b',
files: [fixtures.photo(), fixtures.photo()]
}),
new Album({
title: 'c',
files: [fixtures.photo(), fixtures.photo()]
})
]
});
a.finalize();
should(a.previews).have.length(4);
console.log('-----\n', a.previews)
for (var i = 0; i < 4; ++i) {
should(a.previews[i].urls.thumb).not.eql('public/missing.png');
}
});
});
});

@ -27,4 +27,37 @@ describe('ByFolder', function() {
]);
});
it('creates nested albums for nested folders', function () {
// create files in nested folders
var photo1 = fixtures.photo({path: 'a/b/c/IMG_000001.jpg'});
var photo2 = fixtures.photo({path: 'a/d/IMG_000002.jpg'});
// group them per folder
var collection = {files: [photo1, photo2]};
var albums = byfolder.albums(collection, {});
console.log(albums);
// assert on the result
should(albums).eql([
new Album({
title: 'a',
files: [],
albums: [
new Album({
title: 'b',
files: [],
albums: [
new Album({
title: 'c',
files: [photo1]
})
]
}),
new Album({
title: 'd',
files: [photo2]
})
]
})
]);
});
});

Loading…
Cancel
Save