diff --git a/README.md b/README.md index 9e47500..87ae8cb 100644 --- a/README.md +++ b/README.md @@ -39,11 +39,6 @@ Put files in following places: - /static/js/load-photoswipe.js - /static/css/hugo-easy-gallery.css -**NB `load-photoswipe.html` loads jQuery from `cdnjs.cloudflare.com`.** - -- If your template already loads jQuery in the header, you can delete the jQuery link in `load-photoswipe.html`. -- If your template already loads jQuery in the footer, you should `load-photoswipe.js` from the footer instead of in `load-photoswipe.html`. - If you want, you could (depending on a front matter param) conditionally load `load-photoswipe.html` or its contents from the footer of your template. But I've consciously chosen to load PhotoSwipe using a shortcode so that you don't have to modify your template if you don't want to. ## Theme integration @@ -56,12 +51,9 @@ Rename `/layouts/shortcodes/load-photoswipe-theme.html` to `/layouts/shortcodes/ Add the following lines to the footer of your template, just before ``: -(Omit the jQuery line if jQuery is already loaded elsewhere in your template; just make sure that jQuery is loaded **before** this code.) - ```html {{ if ($.Scratch.Get "photoswipeloaded") }} - diff --git a/layouts/shortcodes/load-photoswipe-theme.html b/layouts/shortcodes/load-photoswipe-theme.html index 4b3bfad..95d9e71 100644 --- a/layouts/shortcodes/load-photoswipe-theme.html +++ b/layouts/shortcodes/load-photoswipe-theme.html @@ -7,13 +7,7 @@ {{ if not ($.Page.Scratch.Get "photoswipeloaded") }} {{ $.Page.Scratch.Set "photoswipeloaded" 1 }} - diff --git a/layouts/shortcodes/load-photoswipe.html b/layouts/shortcodes/load-photoswipe.html index 9eec863..13f9e90 100644 --- a/layouts/shortcodes/load-photoswipe.html +++ b/layouts/shortcodes/load-photoswipe.html @@ -7,12 +7,6 @@ {{ if not ($.Page.Scratch.Get "photoswipeloaded") }} {{ $.Page.Scratch.Set "photoswipeloaded" 1 }} - - diff --git a/static/js/load-photoswipe.js b/static/js/load-photoswipe.js index 978c66d..30db70d 100644 --- a/static/js/load-photoswipe.js +++ b/static/js/load-photoswipe.js @@ -2,79 +2,73 @@ 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 ).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 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 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(); - }); - }); -}); \ No newline at end of file + +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 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); + } + }, 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 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 + } + new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options).init(); + }, false); + }); +}, false);