luzifer/gallery
1
0
Fork 0
mirror of https://github.com/Luzifer/gallery.git synced 2024-11-12 16:02:43 +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 = { this.optionset = {
// General options // General options
download: false, download: false,
selector: 'img', selector: '.img',
// Thumbnails // Thumbnails
thumbnail: true, thumbnail: true,
thumbWidth: 80, thumbWidth: 80,

11
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(2) { transform: rotate(-2deg) translateY(10px) translateX(-12px); }
.card.gallery:hover img:nth-child(3) { transform: rotate( 5deg) translateY(-8px) 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 .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:not(:first-child) { position: absolute; z-index: -1; }
.card img { transition: transform .3s ease-out; width: 100%; } .card img { transition: transform .3s ease-out; width: 100%; }
.nav-link i { color: rgba(255,255,255,.5); } .nav-link i { color: rgba(255,255,255,.5); }
@ -85,10 +87,17 @@
<script id="album-template" type="text/x-handlebars-template"> <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}}"> <div class="card bg-light text-white w-proc float-left {{#ifGt images.length 1}}gallery{{/ifGt}}">
{{#each images}} {{#each images}}
<img class="card-img border" {{#ifGt @index 2}}
<div class="card-img border img"
src="{{thumbnail}}"
alt="{{title}}"
data-src="{{fullsize}}"></div>
{{else}}
<img class="card-img border img"
src="{{thumbnail}}" src="{{thumbnail}}"
alt="{{title}}" alt="{{title}}"
data-src="{{fullsize}}"> data-src="{{fullsize}}">
{{/ifGt}}
{{/each}} {{/each}}
<div class="card-img-overlay h-100 d-flex flex-column justify-content-end"> <div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
<h5>{{title}}</h5> <h5>{{title}}</h5>