luzifer/gallery
1
0
Fork 0
mirror of https://github.com/Luzifer/gallery.git synced 2024-11-08 14:10:01 +00:00
Code Issues Releases Wiki Activity

Do not load more than the required minimum of images

Browse source
This commit is contained in:
Knut Ahlers 2018-04-28 18:51:28 +02:00
parent 53f09941af
commit 3e85053ace
Signed by: luzifer
GPG key ID: DC2729FDD34BE99E
2 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app.js
View file

@ -9,7 +9,7 @@ class Gallery {
this.optionset = {
// General options
download: false,
selector: 'img',
selector: '.img',
// Thumbnails
thumbnail: true,
thumbWidth: 80,

15
frontend/index.html
View file

@ -26,6 +26,8 @@
.card.gallery:hover img:nth-child(2) { transform: rotate(-2deg) translateY(10px) translateX(-12px); }
.card.gallery:hover img:nth-child(3) { transform: rotate( 5deg) translateY(-8px) translateX( 12px); }
.card .gallery-indicator { position: absolute; right: 1em; text-shadow: 0 0 3px #202020; top: 1em; }
.card .card-img-overlay h5 { text-shadow: 0 0 3px #202020; }
.card div.img { display: none; }
.card img:not(:first-child) { position: absolute; z-index: -1; }
.card img { transition: transform .3s ease-out; width: 100%; }
.nav-link i { color: rgba(255,255,255,.5); }
@ -41,7 +43,7 @@
<body>
<nav class="navbar navbar-expand-lg fixed-bottom navbar-light bg-light">
<a class="navbar-brand" href="#">Photos</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -85,10 +87,17 @@
<script id="album-template" type="text/x-handlebars-template">
<div class="card bg-light text-white w-proc float-left {{#ifGt images.length 1}}gallery{{/ifGt}}">
{{#each images}}
<img class="card-img border"
{{#ifGt @index 2}}
<div class="card-img border img"
src="{{thumbnail}}"
alt="{{title}}"
alt="{{title}}"
data-src="{{fullsize}}"></div>
{{else}}
<img class="card-img border img"
src="{{thumbnail}}"
alt="{{title}}"
data-src="{{fullsize}}">
{{/ifGt}}
{{/each}}
<div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
<h5>{{title}}</h5>