nemunaire/nemhugo
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Load photoswipe by default and fix double-load bug

Browse source 
Photoswipe is now loaded by default for all pages in this theme. No need
to call load-photoswipe shortcode anymore. Fixes bug where
load-photoswipe.js was invoked multiple times, which caused the
photoswipe to prevent viewing the lightbox more than once.
This commit is contained in:
Michael Romero 2017-06-06 22:51:02 -07:00
commit bbeb127b30
6 changed files with 6 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

4
exampleSite/content/post/2017-03-20-photoswipe-gallery-sample.md
View file

@ -12,7 +12,6 @@ Beautiful Hugo adds a few custom shortcodes created by [Li-Wen Yip](https://www.
{{< figure thumb="-thumb" link="/img/sphere.jpg" caption="Sphere" >}}
{{< figure thumb="-thumb" link="/img/triangle.jpg" caption="Triangle" alt="This is a long comment about a triangle" >}}
{{< /gallery >}}
{{< load-photoswipe >}}
<!--more-->
## Example
@ -23,7 +22,6 @@ The above gallery was created using the following shortcodes:
{{</* figure thumb="-thumb" link="/img/sphere.jpg" caption="Sphere" */>}}
{{</* figure thumb="-thumb" link="/img/triangle.jpg" caption="Triangle" alt="This is a long comment about a triangle" */>}}
{{</* /gallery */>}}
{{</* load-photoswipe */>}}
```
## Usage
@ -36,4 +34,4 @@ For full details please see the [hugo-easy-gallery GitHub](https://github.com/li
- All the [features/parameters](https://gohugo.io/extras/shortcodes) of Hugo's built-in `figure` shortcode work as normal, i.e. src, link, title, caption, class, attr (attribution), attrlink, alt
- `{{</* gallery caption-effect="fade" */>}}` will fade in captions for all figures in this gallery instead of the default slide-up behavior
- Many gallery styles for captions and hover effects exist; view the [hugo-easy-gallery GitHub](https://github.com/liwenyip/hugo-easy-gallery/) for all options
- Call `{{</* load-photoswipe */>}}` **once** anywhere you want on each page where you want to use PhotoSwipe
- Note that this theme will load the photoswipe gallery theme and scripts by default, no need to load photoswipe on your individual pages

3
layouts/partials/footer.html
View file

@ -54,12 +54,9 @@
<script src="{{ "js/highlight.min.js" | absURL }}"></script>
<script> hljs.initHighlightingOnLoad(); </script>
<script> renderMathInElement(document.body); </script>
<!-- Load PhotoSwipe js if the load-photoswipe shortcode has been used -->
{{ if ($.Scratch.Get "photoswipeloaded") }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js" integrity="sha256-UplRCs9v4KXVJvVY+p+RSo5Q4ilAUXh7kpjyIP5odyc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js" integrity="sha256-PWHOlUzc96pMc8ThwRIXPn8yH4NOLu42RQ0b9SpnpFk=" crossorigin="anonymous"></script>
<script src="/js/load-photoswipe.js"></script>
{{ end }}
<!-- Google Custom Search Engine -->
{{ if .Site.Params.gcse }}
<script>

1
layouts/partials/head.html
View file

@ -47,5 +47,6 @@
<link rel="stylesheet" href="{{ "css/pygment_highlights.css" | absURL }}" />
<link rel="stylesheet" href="{{ "css/highlight.min.css" | absURL }}" />
{{- partial "head_custom.html" . }}
{{- partial "load-photoswipe-theme.html" . }}
{{ template "_internal/google_analytics_async.html" . }}
</head>

18
layouts/shortcodes/load-photoswipe-theme.html → layouts/partials/load-photoswipe-theme.html
View file

@ -1,22 +1,7 @@
<!--
Put this file in /layouts/shortcodes/load-photoswipe.html
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
-->
<!-- prevent this shortcode from being loaded more than once per page -->
{{ if not ($.Page.Scratch.Get "photoswipeloaded") }}
{{ $.Page.Scratch.Set "photoswipeloaded" 1 }}
<!--
*** jQuery must be loaded before load-photoswipe.js ***
- If your template already loads jQuery in the header then you don't need to load it again here.
- If your template already loads jQuery in the footer, then you could load load-photoswipe.js from the footer instead
-->
<!-- these files are loaded in the theme footer
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="/js/load-photoswipe.js"></script>
-->
<!-- Photoswipe css/js libraries -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css" integrity="sha256-sCl5PUOGMLfFYctzDW3MtRib0ctyUvI9Qsmq2wXOeBY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css" integrity="sha256-BFeI1V+Vh1Rk37wswuOYn5lsTcaU96hGaI7OUVCLjPc=" crossorigin="anonymous" />
@ -71,5 +56,4 @@ Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
</div>
</div>
</div>
</div>
{{ end }}
</div>

71
layouts/shortcodes/load-photoswipe.html
View file

@ -1,71 +0,0 @@
<!--
Put this file in /layouts/shortcodes/load-photoswipe.html
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
-->
<!-- prevent this shortcode from being loaded more than once per page -->
{{ if not ($.Page.Scratch.Get "photoswipeloaded") }}
{{ $.Page.Scratch.Set "photoswipeloaded" 1 }}
<!--
*** jQuery must be loaded before load-photoswipe.js ***
- If your template already loads jQuery in the header then you don't need to load it again here.
- If your template already loads jQuery in the footer, then you could load load-photoswipe.js from the footer instead
-->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="/js/load-photoswipe.js"></script>
<!-- Photoswipe css/js libraries -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css" integrity="sha256-sCl5PUOGMLfFYctzDW3MtRib0ctyUvI9Qsmq2wXOeBY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css" integrity="sha256-BFeI1V+Vh1Rk37wswuOYn5lsTcaU96hGaI7OUVCLjPc=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js" integrity="sha256-UplRCs9v4KXVJvVY+p+RSo5Q4ilAUXh7kpjyIP5odyc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js" integrity="sha256-PWHOlUzc96pMc8ThwRIXPn8yH4NOLu42RQ0b9SpnpFk=" crossorigin="anonymous"></script>
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe.
It's a separate element, as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides.
PhotoSwipe keeps only 3 of them in DOM to save memory.
Don't modify these 3 pswp__item elements, data is added later on. -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
{{ end }}

6
static/js/load-photoswipe.js
View file

@ -29,7 +29,7 @@ $( document ).ready(function() {
title : $title,
msrc : $msrc
};
console.log("Using pre-defined dimensions for " + $src);
//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 = {
@ -39,7 +39,7 @@ $( document ).ready(function() {
title : $title,
msrc : $msrc
};
console.log("Using default dimensions for " + $src);
//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();
@ -51,7 +51,7 @@ $( document ).ready(function() {
clearInterval(wait);
item.w = w;
item.h = h;
console.log("Got actual dimensions for " + img.src);
//console.log("Got actual dimensions for " + img.src);
}
}, 30);
}