dans album.hbs:
preload: 2,
autoplay: true,
autoplayControls: true,
progressBar: false,
pause: 2500,
pager: false,
108 lines
3.6 KiB
Handlebars
108 lines
3.6 KiB
Handlebars
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, user-scalable=no" />
|
|
<title>{{gallery.title}} - {{album.title}}</title>
|
|
<link rel="stylesheet" href="{{relative 'public/lightgallery/css/lightgallery.css'}}" />
|
|
<link rel="stylesheet" href="{{relative 'public/lightslider/css/lightslider.min.css'}}" />
|
|
<link rel="stylesheet" href="{{relative 'public/videojs/video-js.min.css'}}" />
|
|
<link rel="stylesheet" href="{{relative 'public/lightgallery/css/lg-exif.min.css'}}" />
|
|
<link rel="stylesheet" href="{{relative 'public/core.css'}}" />
|
|
<link rel="stylesheet" href="{{relative 'public/theme.css'}}" />
|
|
<link rel="stylesheet" href="{{relative 'public/justifiedgallery/justifiedGallery.min.css'}}" />
|
|
</head>
|
|
|
|
<body>
|
|
{{> content}}
|
|
{{> video-loader}}
|
|
|
|
<!-- jQuery -->
|
|
<script src="{{relative 'public/jquery.min.js'}}"></script>
|
|
<!-- VideoJS -->
|
|
<script src="{{relative 'public/videojs/video.min.js'}}"></script>
|
|
<!-- LightGallery -->
|
|
<script src="{{relative 'public/lightgallery/js/lightgallery.js'}}"></script>
|
|
<script src="{{relative 'public/lightslider/js/lightslider.min.js'}}"></script>
|
|
<script src="{{relative 'public/lightgallery/js/lg-fullscreen.min.js'}}"></script>
|
|
<script src="{{relative 'public/lightgallery/js/lg-zoom.min.js'}}"></script>
|
|
<script src="{{relative 'public/lightgallery/js/lg-autoplay.js'}}"></script>
|
|
<script src="{{relative 'public/lightgallery/js/lg-pager.js'}}"></script>
|
|
<script src="{{relative 'public/lightgallery/js/lg-thumbnail.js'}}"></script>
|
|
<script src="{{relative 'public/lightgallery/js/lg-video.js'}}"></script>
|
|
<script src="{{relative 'public/lightgallery/js/lg-exif.min.js'}}"></script>
|
|
<script src="{{relative 'public/justifiedgallery/jquery.justifiedGallery.min.js'}}"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
$("#media").lightGallery({
|
|
thumbWidth: 80,
|
|
controls: true,
|
|
hideBarsDelay: 4500,
|
|
loop : false,
|
|
download: true,
|
|
counter: true,
|
|
pager: false,
|
|
videojs: true,
|
|
exThumbImage: 'data-exthumbimage',
|
|
preload: 2,
|
|
autoplay: true,
|
|
autoplayControls: true,
|
|
progressBar: false,
|
|
pause: 2500,
|
|
});
|
|
|
|
// Init justified gallery for albums
|
|
$("#albums").justifiedGallery({
|
|
{{!-- selector: '.albumList', --}}
|
|
margins: 10,
|
|
rowHeight: 300,
|
|
maxRowHeight: 325,
|
|
});
|
|
|
|
// Init justified gallery for photos
|
|
$("#media").justifiedGallery({
|
|
selector: '.albumList',
|
|
waitThumbnailsLoad: false,
|
|
margins: 10,
|
|
rowHeight: 250,
|
|
maxRowHeight: 275,
|
|
cssAnimation:true,
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{{#if album.home}}
|
|
<script id="slider-js" data-interval="{{@root.settings.sliderInterval}}">
|
|
$(document).ready(function () {
|
|
let waitTime = 1000;
|
|
|
|
try {
|
|
waitTime = parseInt($("#slider-js").data("interval"));
|
|
} catch (e) {
|
|
console.error("Invalid speed value for slider: " + waitTime + "\n" + e);
|
|
}
|
|
|
|
$("#lightSlider").lightSlider({
|
|
auto: true,
|
|
loop: true,
|
|
item: 1,
|
|
gallery: true,
|
|
pause: waitTime,
|
|
onSliderLoad: (el) => {
|
|
el.lightGallery({
|
|
selector: "#lightSlider li"
|
|
})
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{{/if}}
|
|
|
|
{{> analytics}}
|
|
|
|
</body>
|
|
|
|
</html>
|