gcg/gcg-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix gallery lib

Browse Source
This commit is contained in:
Denys Konovalov
2022-10-15 16:36:24 +02:00
parent b33e9900d6
commit f340781fd6
42 changed files with 207 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
static/css/hugo-easy-gallery.css
View File

@ -17,7 +17,7 @@ Grid Layout Styles
position: relative;
/* Default: 1 tile wide */
width: 100%;
padding-bottom: 100%;
padding-bottom: 100%;
}
@media only screen and (min-width : 365px) {
/* Tablet view: 2 tiles */
@ -45,7 +45,7 @@ Grid Layout Styles
Transition styles
*/
.gallery.hover-transition figure,
.gallery.hover-effect-zoom .img,
.gallery.hover-effect-zoom .img,
.gallery:not(.caption-effect-appear) figcaption,
.fancy-figure:not(.caption-effect-appear) figcaption {
-webkit-transition: all 0.3s ease-in-out;
@ -122,7 +122,7 @@ figcaption styles
text-align: center;
font-size: 75%; /* change this if you want bigger text */
background: rgba(0, 0, 0, 0.5);
opacity: 1;
opacity: 0;
cursor: pointer;
}
.gallery.caption-position-none figcaption,
@ -155,14 +155,4 @@ figcaption styles
}
figcaption p {
margin: auto; /* override style in theme */
}
figure img {
max-width: 100%;
}
figure figcaption a {
position: relative;
color: #CCC;
/* text-decoration: none; */
}
}

145
static/js/load-photoswipe.js
View File

@ -2,82 +2,79 @@
Put this file in /static/js/load-photoswipe.js
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
*/
/* Show an alert if this js file has been loaded twice */
if (window.loadphotoswipejs) {
window.alert("You've loaded load-photoswipe.js twice. See https://github.com/liwenyip/hugo-easy-gallery/issues/6")
}
window.alert("You've loaded load-photoswipe.js twice. See https://github.com/liwenyip/hugo-easy-gallery/issues/6")
}
var loadphotoswipejs = 1
/* TODO: Make the share function work */
document.addEventListener('DOMContentLoaded', function() {
var items = []; // array of slide objects that will be passed to PhotoSwipe()
// for every figure element on the page:
document.querySelectorAll('figure').forEach(function($figure, index) {
if ($figure.className == 'no-photoswipe') return true; // ignore any figures where class="no-photoswipe"
var $a = $figure.querySelector('a'),
$img = $figure.querySelector('img'),
$src = $a.href,
$title = $img.alt,
$msrc = $img.src;
// if data-size on <a> tag is set, read it and create an item
if ($a.dataset.size) {
var $size = $a.dataset.size.split('x');
var item = {
src : $src,
w : $size[0],
h : $size[1],
title : $title,
msrc : $msrc
};
console.log("Using pre-defined dimensions for " + $src);
// if not, set temp default size then load the image to check actual size
} else {
var item = {
src : $src,
w : 400, // temp default size
h : 300, // temp default size
title : $title,
msrc : $msrc
};
console.log("Using default dimensions for " + $src);
// load the image to check its dimensions
// update the item as soon as w and h are known (check every 30ms)
var img = new Image();
img.src = $src;
var wait = setInterval(function() {
var w = img.naturalWidth,
h = img.naturalHeight;
if (w && h) {
clearInterval(wait);
item.w = w;
item.h = h;
console.log("Got actual dimensions for " + img.src);
// Update the figure parent div's max width.
var $parentDiv = $figure.parentElement;
if (!$parentDiv.hasOwnProperty("style")) {
$figure.parentElement.style = "max-width: " + w + "px"
}
}
}, 30);
}
// Save the index of this image then add it to the array
items.push(item);
// Event handler for click on a figure
$figure.addEventListener('click', function(event) {
event.preventDefault(); // prevent the normal behaviour i.e. load the <a> hyperlink
// Get the PSWP element and initialize it with the desired options
var $pswp = document.querySelector('.pswp');
var options = {
index: index,
bgOpacity: 0.8,
showHideOpacity: true,
showHideAnimationType: 'zoom',
focus: 'false',
history: 'false'
}
new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options).init();
}, false);
});
}, false);
$( document ).ready(function() {
/*
Initialise Photoswipe
*/
var items = []; // array of slide objects that will be passed to PhotoSwipe()
// for every figure element on the page:
$('figure').each( function() {
if ($(this).attr('class') == 'no-photoswipe') return true; // ignore any figures where class="no-photoswipe"
// get properties from child a/img/figcaption elements,
var $figure = $(this),
$a = $figure.find('a'),
$img = $figure.find('img'),
$src = $a.attr('href'),
$title = $img.attr('alt'),
$msrc = $img.attr('src');
// if data-size on <a> tag is set, read it and create an item
if ($a.data('size')) {
var $size = $a.data('size').split('x');
var item = {
src : $src,
w : $size[0],
h : $size[1],
title : $title,
msrc : $msrc
};
console.log("Using pre-defined dimensions for " + $src);
// if not, set temp default size then load the image to check actual size
} else {
var item = {
src : $src,
w : 800, // temp default size
h : 600, // temp default size
title : $title,
msrc : $msrc
};
console.log("Using default dimensions for " + $src);
// load the image to check its dimensions
// update the item as soon as w and h are known (check every 30ms)
var img = new Image();
img.src = $src;
var wait = setInterval(function() {
var w = img.naturalWidth,
h = img.naturalHeight;
if (w && h) {
clearInterval(wait);
item.w = w;
item.h = h;
console.log("Got actual dimensions for " + img.src);
}
}, 30);
}
// Save the index of this image then add it to the array
var index = items.length;
items.push(item);
// Event handler for click on a figure
$figure.on('click', function(event) {
event.preventDefault(); // prevent the normal behaviour i.e. load the <a> hyperlink
// Get the PSWP element and initialise it with the desired options
var $pswp = $('.pswp')[0];
var options = {
index: index,
bgOpacity: 0.8,
showHideOpacity: true
}
new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options).init();
});
});
});