Update photoswipe gallery to hugo-easy-gallery
Using https://github.com/liwenyip/hugo-easy-gallery/ from @liwenyip
This commit is contained in:
Michael Romero
parent
de52bb63ed
commit
19b620f632
@ -5,35 +5,35 @@ date: 2017-03-20
|
|||||||
tags: ["example", "photoswipe"]
|
tags: ["example", "photoswipe"]
|
||||||
---
|
---
|
||||||
|
|
||||||
Beautiful Hugo adds a few custom shortcodes created by [Li-Wen Yip](https://www.liwen.id.au/photoswipe/) and [Gert-Jan van den Berg](https://github.com/GjjvdBurg/HugoPhotoSwipe) for making galleries with [PhotoSwipe](http://photoswipe.com) .
|
Beautiful Hugo adds a few custom shortcodes created by [Li-Wen Yip](https://www.liwen.id.au/heg/) and [Gert-Jan van den Berg](https://github.com/GjjvdBurg/HugoPhotoSwipe) for making galleries with [PhotoSwipe](http://photoswipe.com) .
|
||||||
|
|
||||||
{{< gallery >}}
|
{{< gallery caption-effect="fade" >}}
|
||||||
{{< figure thumb="-thumb" link="/img/hexagon.jpg" >}}
|
{{< figure thumb="-thumb" link="/img/hexagon.jpg" >}}
|
||||||
{{< figure thumb="-thumb" link="/img/sphere.jpg" alt="Sphere" >}}
|
{{< figure thumb="-thumb" link="/img/sphere.jpg" caption="Sphere" >}}
|
||||||
{{< figure thumb="-thumb" link="/img/triangle.jpg" alt="Triangle" caption="This is a long comment about a triangle" >}}
|
{{< figure thumb="-thumb" link="/img/triangle.jpg" caption="This is a long comment about a triangle" >}}
|
||||||
{{< /gallery >}}
|
{{< /gallery >}}
|
||||||
{{< pswp-init >}}
|
{{< load-photoswipe >}}
|
||||||
|
|
||||||
<!--more-->
|
<!--more-->
|
||||||
## Example
|
## Example
|
||||||
The above gallery was created using the following shortcodes:
|
The above gallery was created using the following shortcodes:
|
||||||
```
|
```
|
||||||
{{</* gallery */>}}
|
{{</* gallery caption-effect="fade" */>}}
|
||||||
{{</* figure thumb="-thumb" link="/img/hexagon.jpg" */>}}
|
{{</* figure thumb="-thumb" link="/img/hexagon.jpg" */>}}
|
||||||
{{</* figure thumb="-thumb" link="/img/sphere.jpg" alt="Sphere" */>}}
|
{{</* figure thumb="-thumb" link="/img/sphere.jpg" caption="Sphere" */>}}
|
||||||
{{</* figure thumb="-thumb" link="/img/triangle.jpg" alt="Triangle" caption="This is a long comment about a triangle" */>}}
|
{{</* figure thumb="-thumb" link="/img/triangle.jpg" caption="This is a long comment about a triangle" */>}}
|
||||||
{{</* /gallery */>}}
|
{{</* /gallery */>}}
|
||||||
{{</* pswp-init */>}}
|
{{</* load-photoswipe */>}}
|
||||||
```
|
```
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
As described on the [GitHub](https://github.com/liwenyip/hugo-pswp) page:
|
For full details please see the [hugo-easy-gallery GitHub](https://github.com/liwenyip/hugo-easy-gallery/) page. Basic usages from above are:
|
||||||
|
|
||||||
* Call `{{</* pswp-init */>}}` **once** anywhere you want on each page where you want to use PhotoSwipe
|
- Create a gallery with open and close tags `{{</* gallery */>}}` and `{{</* /gallery */>}}`
|
||||||
* `{{</* figure src="image.jpg" */>}}` will use `image.jpg` for thumbnail and lightbox
|
- `{{</* figure src="image.jpg" */>}}` will use `image.jpg` for thumbnail and lightbox
|
||||||
* `{{</* figure src="thumb.jpg" link="image.jpg" */>}}` will use `thumb.jpg` for thumbnail and `image.jpg` for lightbox
|
- `{{</* figure src="thumb.jpg" link="image.jpg" */>}}` will use `thumb.jpg` for thumbnail and `image.jpg` for lightbox
|
||||||
* `{{</* figure thumb="-small" link="image.jpg" */>}}` will use `image-small.jpg` for thumbnail and `image.jpg` for lightbox
|
- `{{</* figure thumb="-small" link="image.jpg" */>}}` will use `image-small.jpg` for thumbnail and `image.jpg` for lightbox
|
||||||
* `{{</* figure thumb="-small" link="image.jpg" size="1024x768 "*/>}}` will avoid needing to pre-load `image.jpg` to determine its size (optional)
|
- 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
|
||||||
* 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
|
||||||
* `{{</* figure src="image.jpg" class="pswp-ignore" */>}}` will be ignored by PhotoSwipe (if that's what you really want)
|
- 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
|
||||||
* enclose your figures in `{{</* gallery title="title of your gallery (optional)" */>}}` and `{{</* /gallery */>}}` to arrange your thumbnails inside a box
|
- Call `{{</* load-photoswipe */>}}` **once** anywhere you want on each page where you want to use PhotoSwipe
|
||||||
@ -196,11 +196,8 @@
|
|||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js" integrity="sha384-/y1Nn9+QQAipbNQWU65krzJralCnuOasHncUFXGkdwntGeSvQicrYkiUBwsgUqc1" crossorigin="anonymous"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js" integrity="sha384-/y1Nn9+QQAipbNQWU65krzJralCnuOasHncUFXGkdwntGeSvQicrYkiUBwsgUqc1" crossorigin="anonymous"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/contrib/auto-render.min.js" integrity="sha384-dq1/gEHSxPZQ7DdrM82ID4YVol9BYyU7GbWlIwnwyPzotpoc57wDw/guX8EaYGPx" crossorigin="anonymous"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/contrib/auto-render.min.js" integrity="sha384-dq1/gEHSxPZQ7DdrM82ID4YVol9BYyU7GbWlIwnwyPzotpoc57wDw/guX8EaYGPx" crossorigin="anonymous"></script>
|
||||||
<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="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
|
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
|
||||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
||||||
<script src="{{ .Site.BaseURL }}/js/pswp-init.js"></script>
|
|
||||||
<script src="{{ .Site.BaseURL }}/js/main.js"></script>
|
<script src="{{ .Site.BaseURL }}/js/main.js"></script>
|
||||||
<script src="{{ .Site.BaseURL }}/js/highlight.min.js"></script>
|
<script src="{{ .Site.BaseURL }}/js/highlight.min.js"></script>
|
||||||
<script> hljs.initHighlightingOnLoad(); </script>
|
<script> hljs.initHighlightingOnLoad(); </script>
|
||||||
|
|||||||
@ -19,9 +19,6 @@
|
|||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" />
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" />
|
||||||
<link rel="stylesheet" href="{{ .Site.BaseURL }}/css/pygment_highlights.css" />
|
<link rel="stylesheet" href="{{ .Site.BaseURL }}/css/pygment_highlights.css" />
|
||||||
<link rel="stylesheet" href="{{ .Site.BaseURL }}/css/highlight.min.css" />
|
<link rel="stylesheet" href="{{ .Site.BaseURL }}/css/highlight.min.css" />
|
||||||
<link rel="stylesheet" href="{{ .Site.BaseURL }}/css/pswp-gallery.css" />
|
|
||||||
<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" />
|
|
||||||
|
|
||||||
<!-- Facebook OpenGraph tags -->
|
<!-- Facebook OpenGraph tags -->
|
||||||
{{ if .Site.Params.fb_app_id }}
|
{{ if .Site.Params.fb_app_id }}
|
||||||
|
|||||||
@ -1,14 +1,51 @@
|
|||||||
<figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
<!--
|
||||||
<a class="rig-cell" href="{{ with .Get "link" }}{{.}}{{ else }}{{ .Get "src" }}{{ end }}" {{ with .Get "size" }}data-size="{{.}}"{{ end }} itemprop="contentUrl">
|
Put this file in /layouts/shortcodes/figure.html
|
||||||
<img class="rig-img" itemprop="thumbnail"
|
NB this overrides Hugo's built-in "figure" shortcode but is backwards compatible
|
||||||
src="{{ with .Get "src" }}{{.}}{{ else }}{{ printf "%s." (.Get "thumb") | replace (.Get "link") "." }}{{ end }}"
|
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||||
{{ with .Get "alt" }}alt="{{.}}"{{ end }}
|
-->
|
||||||
{{ with .Get "width" }}width="{{.}}"{{ end }}/>
|
<!-- count how many times we've called this shortcode; load the css if it's the first time -->
|
||||||
<span class="rig-overlay"></span>
|
{{ if not ($.Page.Scratch.Get "figurecount") }}
|
||||||
<span class="rig-text">{{ .Get "alt"}}</span>
|
<link rel="stylesheet" href="/css/hugo-easy-gallery.css" />
|
||||||
</a>
|
{{ end }}
|
||||||
<figcaption itemprop="caption description">
|
{{ $.Page.Scratch.Add "figurecount" 1 }}
|
||||||
{{ .Get "caption"}}
|
<!-- use either src or link-thumb for thumbnail image -->
|
||||||
<!--<span itemprop="copyrightHolder">© {{ .Get "copyright"}}</span>-->
|
{{ with .Get "src" }}
|
||||||
</figcaption>
|
{{ $.Scratch.Add "thumb" . }}
|
||||||
</figure>
|
{{ else }}
|
||||||
|
{{ $.Scratch.Add "thumb" (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }}
|
||||||
|
{{ end }}
|
||||||
|
<!-- use either link or src for linked image -->
|
||||||
|
{{ with .Get "link" }}
|
||||||
|
{{ $.Scratch.Add "link" . }}
|
||||||
|
{{ else }}
|
||||||
|
{{ $.Scratch.Add "link" (.Get "src") }}
|
||||||
|
{{ end }}
|
||||||
|
<!-- use either alt or caption for image alt -->
|
||||||
|
{{ with .Get "alt" }}
|
||||||
|
{{ $.Scratch.Add "alt" .}}
|
||||||
|
{{else}}
|
||||||
|
{{ with .Get "caption" }}
|
||||||
|
{{ $.Scratch.Add "alt" .}}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
<style>.gallery .img{{$.Page.Scratch.Get "figurecount"}} {background-image: url('{{ $.Scratch.Get "thumb" }}');}</style>
|
||||||
|
<!-- ^background image is applied this way to ensure it is only shown when inside a .gallery -->
|
||||||
|
<div class="box {{ with .Get "caption-position" }}fancy-figure caption-position-{{.}}{{end}} {{ with .Get "caption-effect" }}caption-effect-{{.}}{{end}}" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}>
|
||||||
|
<figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||||
|
<div class="img img{{$.Page.Scratch.Get "figurecount"}}" {{ with .Get "size" }}data-size="{{.}}"{{ end }} >
|
||||||
|
<img itemprop="thumbnail" src="{{ $.Scratch.Get "thumb" }}" {{ with $.Scratch.Get "alt" }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
|
||||||
|
</div>
|
||||||
|
{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
|
||||||
|
<figcaption>
|
||||||
|
{{ with .Get "title" }}<h4>{{.}}</h4>{{ end }}
|
||||||
|
{{ if or (.Get "caption") (.Get "attr")}}
|
||||||
|
<p>
|
||||||
|
{{ .Get "caption" }}
|
||||||
|
{{ with .Get "attrlink"}}<a href="{{.}}">{{ .Get "attr" }}</a>{{ else }}{{ .Get "attr"}}{{ end }}
|
||||||
|
</p>
|
||||||
|
{{ end }}
|
||||||
|
</figcaption>
|
||||||
|
{{ end }}
|
||||||
|
{{ with $.Scratch.Get "link" }}<a href="{{.}}" itemprop="contentUrl"></a>{{ end }}<!-- put <a> last so it is stacked on top -->
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
@ -1,4 +1,7 @@
|
|||||||
<div class="gallery" id="rig" itemscope itemtype="http://schema.org/ImageGallery">
|
<!--
|
||||||
{{ .Inner }}
|
Put this file in /layouts/shortcodes/gallery.html
|
||||||
<div class="title">{{ .Get "title" }}</div>
|
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||||
|
-->
|
||||||
|
<div class="gallery caption-position-{{ with .Get "caption-position" }}{{.}}{{else}}bottom{{end}} caption-effect-{{ with .Get "caption-effect" }}{{.}}{{else}}slide{{end}} hover-effect-{{ with .Get "hover-effect" }}{{.}}{{else}}zoom{{end}} {{ if ne (.Get "hover-transition") "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery">
|
||||||
|
{{ .Inner }}
|
||||||
</div>
|
</div>
|
||||||
75
layouts/shortcodes/load-photoswipe.html
Normal file
75
layouts/shortcodes/load-photoswipe.html
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
<!--
|
||||||
|
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>
|
||||||
|
<!-- un-minified files for debugging only
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.js" integrity="sha256-EbmvgUvj+xbVm1PBnr5mBRX0DMqlxMEweM4Plusn54s=" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.js" integrity="sha256-0rqJyt9xZaN7vkee9NhLfIydAbpVTvhTTLa0mbA+260=" 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 }}
|
||||||
@ -1,47 +0,0 @@
|
|||||||
<!-- 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>
|
|
||||||
157
static/css/hugo-easy-gallery.css
Normal file
157
static/css/hugo-easy-gallery.css
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
/*
|
||||||
|
Put this file in /static/css/hugo-easy-gallery.css
|
||||||
|
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Grid Layout Styles
|
||||||
|
*/
|
||||||
|
.gallery {
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 10px;
|
||||||
|
max-width: 768px;
|
||||||
|
}
|
||||||
|
.gallery .box {
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
/* Default: 1 tile wide */
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 100%;
|
||||||
|
}
|
||||||
|
@media only screen and (min-width : 365px) {
|
||||||
|
/* Tablet view: 2 tiles */
|
||||||
|
.gallery .box {
|
||||||
|
width: 50%;
|
||||||
|
padding-bottom: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (min-width : 480px) {
|
||||||
|
/* Small desktop / ipad view: 3 tiles */
|
||||||
|
.gallery .box {
|
||||||
|
width: 33.3%;
|
||||||
|
padding-bottom: 33.3%; /* */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (min-width : 9999px) {
|
||||||
|
/* Medium desktop: 4 tiles */
|
||||||
|
.box {
|
||||||
|
width: 25%;
|
||||||
|
padding-bottom: 25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Transition styles
|
||||||
|
*/
|
||||||
|
.gallery.hover-transition figure,
|
||||||
|
.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;
|
||||||
|
-moz-transition: all 0.3s ease-in-out;
|
||||||
|
-o-transition: all 0.3s ease-in-out;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
figure styles
|
||||||
|
*/
|
||||||
|
figure {
|
||||||
|
position:relative; /* purely to allow absolution positioning of figcaption */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.gallery figure {
|
||||||
|
position: absolute;
|
||||||
|
left: 5px;
|
||||||
|
right: 5px;
|
||||||
|
top: 5px;
|
||||||
|
bottom: 5px;
|
||||||
|
}
|
||||||
|
.gallery.hover-effect-grow figure:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
.gallery.hover-effect-shrink figure:hover {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
.gallery.hover-effect-slidedown figure:hover {
|
||||||
|
transform: translateY(5px);
|
||||||
|
}
|
||||||
|
.gallery.hover-effect-slideup figure:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
img / a styles
|
||||||
|
*/
|
||||||
|
|
||||||
|
.gallery .img {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.gallery.hover-effect-zoom figure:hover .img {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
.gallery img {
|
||||||
|
display: none; /* only show the img if not inside a gallery */
|
||||||
|
}
|
||||||
|
figure a {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
figcaption styles
|
||||||
|
*/
|
||||||
|
.gallery figcaption,
|
||||||
|
.fancy-figure figcaption {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: #000;
|
||||||
|
color: #FFF;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 75%; /* change this if you want bigger text */
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.gallery.caption-position-none figcaption,
|
||||||
|
.fancy-figure.caption-position-none figcaption {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.gallery.caption-position-center figcaption,
|
||||||
|
.fancy-figure.caption-position-center figcaption {
|
||||||
|
top: 0;
|
||||||
|
padding: 40% 5px;
|
||||||
|
}
|
||||||
|
.gallery.caption-position-bottom figcaption,
|
||||||
|
.fancy-figure.caption-position-bottom figcaption {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.gallery.caption-effect-fade figure:not(:hover) figcaption,
|
||||||
|
.gallery.caption-effect-appear figure:not(:hover) figcaption,
|
||||||
|
.fancy-figure.caption-effect-fade figure:not(:hover) figcaption,
|
||||||
|
.fancy-figure.caption-effect-appear figure:not(:hover) figcaption {
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.gallery.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption,
|
||||||
|
.fancy-figure.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption {
|
||||||
|
margin-bottom: -100%;
|
||||||
|
}
|
||||||
|
.gallery.caption-effect-slide.caption-position-center figure:not(:hover) figcaption,
|
||||||
|
.fancy-figure.caption-effect-slide.caption-position-center figure:not(:hover) figcaption {
|
||||||
|
top: 100%;
|
||||||
|
}
|
||||||
|
figcaption p {
|
||||||
|
margin: auto; /* override style in theme */
|
||||||
|
}
|
||||||
@ -1,103 +0,0 @@
|
|||||||
#rig {
|
|
||||||
max-width:900px;
|
|
||||||
margin:0 auto; /*center aligned*/
|
|
||||||
padding:0;
|
|
||||||
font-size:0; /* Remember to change it back to normal font size if have captions */
|
|
||||||
list-style:none;
|
|
||||||
}
|
|
||||||
#rig figure {
|
|
||||||
display: inline-block;
|
|
||||||
*display:inline;/*for IE6 - IE7*/
|
|
||||||
width:25%;
|
|
||||||
vertical-align:middle;
|
|
||||||
box-sizing:border-box;
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The wrapper for each item */
|
|
||||||
.rig-cell {
|
|
||||||
margin:0 12px 12px 0;
|
|
||||||
|
|
||||||
box-shadow:0 0 6px rgba(0,0,0,0.3);
|
|
||||||
display:block;
|
|
||||||
position: relative;
|
|
||||||
overflow:hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* If have the image layer */
|
|
||||||
.rig-img {
|
|
||||||
display:block;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
border:none;
|
|
||||||
transform:scale(1);
|
|
||||||
transition:all 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#rig figure:hover .rig-img {
|
|
||||||
transform:scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* If have the overlay layer */
|
|
||||||
.rig-overlay {
|
|
||||||
position: absolute;
|
|
||||||
display:block;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
margin: auto;
|
|
||||||
background: #3DC0F1;
|
|
||||||
background-size:50px 50px;
|
|
||||||
opacity:0;
|
|
||||||
filter:alpha(opacity=0);/*For IE6 - IE8*/
|
|
||||||
transition:all 0.6s;
|
|
||||||
}
|
|
||||||
#rig figure:hover .rig-overlay {
|
|
||||||
opacity:0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* If have captions */
|
|
||||||
.rig-text {
|
|
||||||
display:block;
|
|
||||||
padding:0 30px;
|
|
||||||
box-sizing:border-box;
|
|
||||||
position:absolute;
|
|
||||||
left:0;
|
|
||||||
width:100%;
|
|
||||||
text-align:center;
|
|
||||||
text-transform:capitalize;
|
|
||||||
font-size:18px;
|
|
||||||
font-weight:bold;
|
|
||||||
font-family: 'Oswald', sans-serif;
|
|
||||||
font-weight:normal!important;
|
|
||||||
top:40%;
|
|
||||||
color:white;
|
|
||||||
opacity:0;
|
|
||||||
filter:alpha(opacity=0);/*For older IE*/
|
|
||||||
transform:translateY(-20px);
|
|
||||||
transition:all .3s;
|
|
||||||
}
|
|
||||||
#rig figure:hover .rig-text {
|
|
||||||
transform:translateY(0px);
|
|
||||||
opacity:0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 9000px) {
|
|
||||||
#rig figure {
|
|
||||||
width:25%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
|
||||||
#rig figure {
|
|
||||||
width:33.33%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 550px) {
|
|
||||||
#rig figure {
|
|
||||||
width:50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,11 +1,17 @@
|
|||||||
/*
|
/*
|
||||||
Put this file in /static/js/pswp-init.js
|
Put this file in /static/js/load-photoswipe.js
|
||||||
|
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/* TODO: Make the share function work */
|
||||||
$( document ).ready(function() {
|
$( document ).ready(function() {
|
||||||
|
/*
|
||||||
|
Initialise Photoswipe
|
||||||
|
*/
|
||||||
var items = []; // array of slide objects that will be passed to PhotoSwipe()
|
var items = []; // array of slide objects that will be passed to PhotoSwipe()
|
||||||
// for every figure element on the page:
|
// for every figure element on the page:
|
||||||
$('figure').each( function() {
|
$('figure').each( function() {
|
||||||
if ($(this).attr('class') == 'pswp-ignore') return true; // ignore any figures where class="pswp-ignore"
|
if ($(this).attr('class') == 'no-photoswipe') return true; // ignore any figures where class="no-photoswipe"
|
||||||
// get properties from child a/img/figcaption elements,
|
// get properties from child a/img/figcaption elements,
|
||||||
var $figure = $(this),
|
var $figure = $(this),
|
||||||
$a = $figure.find('a'),
|
$a = $figure.find('a'),
|
||||||
@ -22,6 +28,7 @@ $( document ).ready(function() {
|
|||||||
title : $title,
|
title : $title,
|
||||||
msrc : $msrc
|
msrc : $msrc
|
||||||
};
|
};
|
||||||
|
console.log("Using pre-defined dimensions for " + $src);
|
||||||
// if not, set temp default size then load the image to check actual size
|
// if not, set temp default size then load the image to check actual size
|
||||||
} else {
|
} else {
|
||||||
var item = {
|
var item = {
|
||||||
@ -31,6 +38,7 @@ $( document ).ready(function() {
|
|||||||
title : $title,
|
title : $title,
|
||||||
msrc : $msrc
|
msrc : $msrc
|
||||||
};
|
};
|
||||||
|
console.log("Using default dimensions for " + $src);
|
||||||
// load the image to check its dimensions
|
// load the image to check its dimensions
|
||||||
// update the item as soon as w and h are known (check every 30ms)
|
// update the item as soon as w and h are known (check every 30ms)
|
||||||
var img = new Image();
|
var img = new Image();
|
||||||
@ -42,6 +50,7 @@ $( document ).ready(function() {
|
|||||||
clearInterval(wait);
|
clearInterval(wait);
|
||||||
item.w = w;
|
item.w = w;
|
||||||
item.h = h;
|
item.h = h;
|
||||||
|
console.log("Got actual dimensions for " + img.src);
|
||||||
}
|
}
|
||||||
}, 30);
|
}, 30);
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user