mirror of
https://github.com/Luzifer/gallery.git
synced 2024-12-22 19:01:23 +00:00
Do not load more than the required minimum of images
This commit is contained in:
parent
53f09941af
commit
3e85053ace
2 changed files with 13 additions and 4 deletions
|
@ -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,
|
||||||
|
|
|
@ -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); }
|
||||||
|
@ -41,7 +43,7 @@
|
||||||
<body>
|
<body>
|
||||||
<nav class="navbar navbar-expand-lg fixed-bottom navbar-light bg-light">
|
<nav class="navbar navbar-expand-lg fixed-bottom navbar-light bg-light">
|
||||||
<a class="navbar-brand" href="#">Photos</a>
|
<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"
|
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
|
||||||
aria-expanded="false" aria-label="Toggle navigation">
|
aria-expanded="false" aria-label="Toggle navigation">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
@ -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}}"
|
src="{{thumbnail}}"
|
||||||
alt="{{title}}"
|
alt="{{title}}"
|
||||||
|
data-src="{{fullsize}}"></div>
|
||||||
|
{{else}}
|
||||||
|
<img class="card-img border img"
|
||||||
|
src="{{thumbnail}}"
|
||||||
|
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>
|
||||||
|
|
Loading…
Reference in a new issue