Add gallery slideshows with PhotoSwipe
This commit is contained in:
Danny Berger
@@ -1,3 +1,7 @@
|
|||||||
|
---
|
||||||
|
layout: "post"
|
||||||
|
---
|
||||||
|
{% capture gallery %}{{ page.url|replace:'/map.html',''|remove_first:'/' }}{% endcapture %}
|
||||||
<div id="googlemap" style="height:400px;margin-top:8px;"></div>
|
<div id="googlemap" style="height:400px;margin-top:8px;"></div>
|
||||||
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDIwEZirrDvuvDkhTtON8OqpmH7jP7DW4&sensor=false"></script>
|
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDIwEZirrDvuvDkhTtON8OqpmH7jP7DW4&sensor=false"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
@@ -8,14 +12,13 @@
|
|||||||
var map = new google.maps.Map(
|
var map = new google.maps.Map(
|
||||||
document.getElementById("googlemap"),
|
document.getElementById("googlemap"),
|
||||||
{
|
{
|
||||||
center : new google.maps.LatLng({{ include.latitude }}, {{ include.longitude }}),
|
center : new google.maps.LatLng({{ page.gallery_map.latitude }}, {{ page.gallery_map.longitude }}),
|
||||||
mapTypeId : google.maps.MapTypeId.TERRAIN,
|
mapTypeId : google.maps.MapTypeId.TERRAIN,
|
||||||
zoom : {{ include.zoom }}
|
zoom : {{ page.gallery_map.zoom }}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
{% capture path %}gallery/{{ include.gallery }}{% endcapture %}
|
{% loopdir path:gallery match:"*.md" sort:"ordering" %}{% if item.location %}
|
||||||
{% loopdir path:path match:"*.md" sort:"ordering" %}{% if item.location %}
|
|
||||||
(function () {
|
(function () {
|
||||||
var wo = false;
|
var wo = false;
|
||||||
var m = new google.maps.Marker({
|
var m = new google.maps.Marker({
|
||||||
198
_layouts/gallery-slideshow.html
Normal file
198
_layouts/gallery-slideshow.html
Normal file
@@ -0,0 +1,198 @@
|
|||||||
|
<html>
|
||||||
|
{% capture gallery %}{{ page.url|replace:'/slideshow.html',''|remove_first:'/' }}{% endcapture %}
|
||||||
|
<head>
|
||||||
|
<title>{{ page.title }}</title>
|
||||||
|
|
||||||
|
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js"></script>
|
||||||
|
|
||||||
|
<!-- Core CSS file -->
|
||||||
|
<link rel="stylesheet" href="{{ site.static_prefix }}/photo-swipe/photoswipe.css">
|
||||||
|
|
||||||
|
<!-- Skin CSS file (optional)
|
||||||
|
In folder of skin CSS file there are also:
|
||||||
|
- .png and .svg icons sprite,
|
||||||
|
- preloader.gif (for browsers that do not support CSS animations) -->
|
||||||
|
<link rel="stylesheet" href="{{ site.static_prefix }}/photo-swipe/default-skin/default-skin.css">
|
||||||
|
|
||||||
|
<!-- Core JS file -->
|
||||||
|
<script src="{{ site.static_prefix }}/photo-swipe/photoswipe.min.js"></script>
|
||||||
|
|
||||||
|
<!-- UI JS file -->
|
||||||
|
<script src="{{ site.static_prefix }}/photo-swipe/photoswipe-ui-default.min.js"></script>
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
body {
|
||||||
|
background-color: #000000;
|
||||||
|
font-family: 'helvetica nueue', helvetica, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
border-bottom: #484848 solid 1px;
|
||||||
|
color: #DEDEDE;
|
||||||
|
font-weight: normal;
|
||||||
|
margin: 8px 12px 4px;
|
||||||
|
padding-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<section>
|
||||||
|
<h1>{{ page.title }}</h1>
|
||||||
|
{% loopdir path:gallery match:"*.md" sort:"ordering" %}<div class="photo" style="border-radius:2px;display:inline-block;margin:4px;overflow:hidden;">
|
||||||
|
{% assign maxsize = 0 %}
|
||||||
|
{% assign maxref = false %}
|
||||||
|
{% for size in item.sizes %}
|
||||||
|
{% if maxsize < size[1].height * size[1].width %}
|
||||||
|
{% assign maxsize = size[1].height * size[1].width %}
|
||||||
|
{% assign maxref = size %}
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
<a href="{{ site.asset_prefix }}/{{ item.fullname }}~{{ maxref[0] }}.jpg" data-size="{{ maxref[1].width }}x{{ maxref[1].height }}">
|
||||||
|
<img src="{{ site.asset_prefix }}/{{ item.fullname }}~200x200.jpg" height="100" alt="{{ item.title }}" width="100" data-size="200x200" />
|
||||||
|
</a>
|
||||||
|
<div class="caption" style="display:none;">{{ item.content }}</div>
|
||||||
|
</div>{% endloopdir %}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 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 slides in DOM to save memory. -->
|
||||||
|
<div class="pswp__container">
|
||||||
|
<!-- don't modify these 3 pswp__item elements, data is added later on -->
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
window.addEvent('domready', function () {
|
||||||
|
var pswp;
|
||||||
|
var slides = [];
|
||||||
|
|
||||||
|
function openPhotoSwipe(index) {
|
||||||
|
if (!pswp) {
|
||||||
|
var pswp = new PhotoSwipe(
|
||||||
|
$$('.pswp')[0],
|
||||||
|
PhotoSwipeUI_Default,
|
||||||
|
slides,
|
||||||
|
{
|
||||||
|
index : index,
|
||||||
|
mainClass : 'pswp--minimal--dark',
|
||||||
|
barsSize : {
|
||||||
|
top: 0,
|
||||||
|
bottom: 0
|
||||||
|
},
|
||||||
|
captionEl : false,
|
||||||
|
shareEl : false,
|
||||||
|
bgOpacity : 0.85,
|
||||||
|
tapToClose : true,
|
||||||
|
tapToToggleControls : false,
|
||||||
|
history : false,
|
||||||
|
getThumbBoundsFn : function (index) {
|
||||||
|
var imgsize = slides[index].mdom.getAttribute('data-size').split('x');
|
||||||
|
var coord = slides[index].mdom.getCoordinates(true);
|
||||||
|
|
||||||
|
return {
|
||||||
|
x : coord.left,
|
||||||
|
y : coord.top,
|
||||||
|
w : coord.width
|
||||||
|
};
|
||||||
|
},
|
||||||
|
showHideOpacity: true
|
||||||
|
}
|
||||||
|
);
|
||||||
|
pswp.init();
|
||||||
|
} else {
|
||||||
|
pswp.goTo(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$$('div.photo').each(function (dom, i) {
|
||||||
|
var adom = dom.getElement('a');
|
||||||
|
var asize = adom.getAttribute('data-size').split('x');
|
||||||
|
var capdom = dom.getElement('div.caption');
|
||||||
|
var imgdom = dom.getElement('img');
|
||||||
|
|
||||||
|
dom.addEvent('click', function (e) {
|
||||||
|
openPhotoSwipe(i);
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
|
slides.push({
|
||||||
|
src : adom.getAttribute('href'),
|
||||||
|
w : asize[0],
|
||||||
|
h : asize[1],
|
||||||
|
msrc : imgdom.getAttribute('src'),
|
||||||
|
mdom : imgdom
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
openPhotoSwipe(0);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -6,4 +6,10 @@ date_end: '2014-10-13'
|
|||||||
highlight_photo: 'f114579-img-1074'
|
highlight_photo: 'f114579-img-1074'
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<div itemprop="description">
|
||||||
|
<p>
|
||||||
|
View <a href="slideshow.html">slideshow</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
{% include gallery_list.html gallery='2014-albuquerque-balloon-fiesta' %}
|
{% include gallery_list.html gallery='2014-albuquerque-balloon-fiesta' %}
|
||||||
|
|||||||
4
gallery/2014-albuquerque-balloon-fiesta/slideshow.html
Normal file
4
gallery/2014-albuquerque-balloon-fiesta/slideshow.html
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
layout: "gallery-slideshow"
|
||||||
|
title: "Albuquerque Balloon Fiesta"
|
||||||
|
---
|
||||||
@@ -7,9 +7,9 @@ highlight_photo: '106c907-museu-nacional-dart-de-catalunya'
|
|||||||
---
|
---
|
||||||
|
|
||||||
<div itemprop="description">
|
<div itemprop="description">
|
||||||
<p>
|
<p>
|
||||||
Some photos from my trip to Barcelona. See them <a href="map.html">on a map</a>, too.
|
Some photos from my trip to Barcelona. View <a href="slideshow.html">slideshow</a>, <a href="map.html">map</a>.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include gallery_list.html gallery='2014-barcelona-trip' %}
|
{% include gallery_list.html gallery='2014-barcelona-trip' %}
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: "gallery-map"
|
||||||
title: Barcelona Trip
|
title: "Barcelona Trip"
|
||||||
|
gallery_map:
|
||||||
|
latitude: 41.3955627
|
||||||
|
longitude: 2.1756329
|
||||||
|
zoom: 12
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include gallery_map.html gallery='2014-barcelona-trip' latitude=41.3955627 longitude=2.1756329 zoom=12 %}
|
|
||||||
|
|||||||
4
gallery/2014-barcelona-trip/slideshow.html
Normal file
4
gallery/2014-barcelona-trip/slideshow.html
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
layout: "gallery-slideshow"
|
||||||
|
title: "Barcelona Trip"
|
||||||
|
---
|
||||||
@@ -1,8 +1,14 @@
|
|||||||
---
|
---
|
||||||
layout: gallery-list
|
layout: gallery-list
|
||||||
title: Colorado Aspens
|
title: "Colorado Aspens"
|
||||||
date: '2014-09-27'
|
date: '2014-09-27'
|
||||||
highlight_photo: '2dbeedb-aspens-invading'
|
highlight_photo: '2dbeedb-aspens-invading'
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<div itemprop="description">
|
||||||
|
<p>
|
||||||
|
View <a href="slideshow.html">slideshow</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
{% include gallery_list.html gallery='2014-colorado-aspens' %}
|
{% include gallery_list.html gallery='2014-colorado-aspens' %}
|
||||||
|
|||||||
4
gallery/2014-colorado-aspens/slideshow.html
Normal file
4
gallery/2014-colorado-aspens/slideshow.html
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
layout: "gallery-slideshow"
|
||||||
|
title: "Colorado Aspens"
|
||||||
|
---
|
||||||
@@ -7,9 +7,9 @@ highlight_photo: 'df5150c-a-classic-view'
|
|||||||
---
|
---
|
||||||
|
|
||||||
<div itemprop="description">
|
<div itemprop="description">
|
||||||
<p>
|
<p>
|
||||||
Some photos from my trip to London and Iceland. See them <a href="map.html">on a map</a>, too.
|
Some photos from my trip to London and Iceland. View <a href="slideshow.html">slideshow</a>, <a href="map.html">map</a>.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include gallery_list.html gallery='2014-london-iceland-trip' %}
|
{% include gallery_list.html gallery='2014-london-iceland-trip' %}
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: "gallery-map"
|
||||||
title: London & Iceland Trip
|
title: "London & Iceland Trip"
|
||||||
|
gallery_map:
|
||||||
|
latitude: 59.1116508
|
||||||
|
longitude: -10.4266682
|
||||||
|
zoom: 4
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include gallery_map.html gallery='2014-london-iceland-trip' latitude=59.1116508 longitude=-10.4266682 zoom=4 %}
|
|
||||||
|
|||||||
4
gallery/2014-london-iceland-trip/slideshow.html
Normal file
4
gallery/2014-london-iceland-trip/slideshow.html
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
layout: "gallery-slideshow"
|
||||||
|
title: "London & Iceland Trip"
|
||||||
|
---
|
||||||
436
static/dev/photo-swipe/default-skin/default-skin.css
Normal file
436
static/dev/photo-swipe/default-skin/default-skin.css
Normal file
@@ -0,0 +1,436 @@
|
|||||||
|
/**
|
||||||
|
* Default PhotoSwipe UI CSS file, http://photoswipe.com
|
||||||
|
* @author Dmitry Semenov
|
||||||
|
*/
|
||||||
|
.pswp__ui {
|
||||||
|
-webkit-font-smoothing: auto;
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 1550; }
|
||||||
|
|
||||||
|
.pswp__top-bar {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 44px;
|
||||||
|
width: 100%; }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Loading indicator, aka preloader.
|
||||||
|
* You can play with preloader is here: http://codepen.io/dimsemenov/pen/yyBWoR
|
||||||
|
*/
|
||||||
|
.pswp__preloader {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -22px;
|
||||||
|
opacity: 0;
|
||||||
|
position: relative;
|
||||||
|
-webkit-transition: opacity 0.25s ease-out;
|
||||||
|
transition: opacity 0.25s ease-out;
|
||||||
|
will-change: opacity; }
|
||||||
|
|
||||||
|
.pswp__preloader__icn {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin: 12px; }
|
||||||
|
|
||||||
|
.pswp__preloader--active {
|
||||||
|
opacity: 1; }
|
||||||
|
.pswp__preloader--active .pswp__preloader__icn {
|
||||||
|
background: url(preloader.gif) 0 0 no-repeat; }
|
||||||
|
|
||||||
|
.pswp--css_animation .pswp__preloader--active {
|
||||||
|
opacity: 1; }
|
||||||
|
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
|
||||||
|
-webkit-animation: clockwise 500ms linear infinite;
|
||||||
|
animation: clockwise 500ms linear infinite; }
|
||||||
|
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
|
||||||
|
-webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
|
||||||
|
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
|
||||||
|
.pswp--css_animation .pswp__preloader__icn {
|
||||||
|
background: none;
|
||||||
|
opacity: 0.75;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
position: absolute;
|
||||||
|
left: 15px;
|
||||||
|
top: 15px;
|
||||||
|
margin: 0; }
|
||||||
|
.pswp--css_animation .pswp__preloader__cut {
|
||||||
|
position: relative;
|
||||||
|
width: 7px;
|
||||||
|
height: 14px;
|
||||||
|
overflow: hidden; }
|
||||||
|
.pswp--css_animation .pswp__preloader__donut {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border: 2px solid #FFF;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: none;
|
||||||
|
margin: 0; }
|
||||||
|
|
||||||
|
@-webkit-keyframes clockwise {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg); }
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg); } }
|
||||||
|
|
||||||
|
@keyframes clockwise {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg); }
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg); } }
|
||||||
|
|
||||||
|
@-webkit-keyframes donut-rotate {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0);
|
||||||
|
transform: rotate(0); }
|
||||||
|
|
||||||
|
50% {
|
||||||
|
-webkit-transform: rotate(-140deg);
|
||||||
|
transform: rotate(-140deg); }
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(0);
|
||||||
|
transform: rotate(0); } }
|
||||||
|
|
||||||
|
@keyframes donut-rotate {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0);
|
||||||
|
transform: rotate(0); }
|
||||||
|
|
||||||
|
50% {
|
||||||
|
-webkit-transform: rotate(-140deg);
|
||||||
|
transform: rotate(-140deg); }
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(0);
|
||||||
|
transform: rotate(0); } }
|
||||||
|
|
||||||
|
.pswp__error-msg {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFF;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 16px;
|
||||||
|
margin-top: -8px;
|
||||||
|
color: #FFF;
|
||||||
|
opacity: 0.7; }
|
||||||
|
|
||||||
|
.pswp__error-msg a {
|
||||||
|
color: #FFF;
|
||||||
|
text-decoration: underline; }
|
||||||
|
|
||||||
|
.pswp__button {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
position: relative;
|
||||||
|
background: none;
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: visible;
|
||||||
|
border: 0;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
display: block;
|
||||||
|
outline: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
float: right;
|
||||||
|
opacity: 0.75;
|
||||||
|
-webkit-transition: opacity 0.25s;
|
||||||
|
transition: opacity 0.25s;
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
box-shadow: none; }
|
||||||
|
.pswp__button:focus, .pswp__button:hover {
|
||||||
|
opacity: 1; }
|
||||||
|
.pswp__button:active {
|
||||||
|
opacity: 0.9; }
|
||||||
|
.pswp__button::-moz-focus-inner {
|
||||||
|
padding: 0;
|
||||||
|
border: 0; }
|
||||||
|
|
||||||
|
.pswp--animated-in .pswp__button {
|
||||||
|
-webkit-transition: opacity 0.25s;
|
||||||
|
transition: opacity 0.25s; }
|
||||||
|
|
||||||
|
.pswp__ui--over-close .pswp__button--close {
|
||||||
|
opacity: 1; }
|
||||||
|
|
||||||
|
.pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before {
|
||||||
|
background: url(default-skin.png) 0 0 no-repeat;
|
||||||
|
background-size: 264px 88px;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px; }
|
||||||
|
|
||||||
|
@media (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
|
||||||
|
.pswp--svg .pswp__button, .pswp--svg .pswp__button--arrow--left:before, .pswp--svg .pswp__button--arrow--right:before {
|
||||||
|
background-image: url(default-skin.svg); }
|
||||||
|
|
||||||
|
.pswp--svg .pswp__button--arrow--left, .pswp--svg .pswp__button--arrow--right {
|
||||||
|
background: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__counter, .pswp__share-modal {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none; }
|
||||||
|
|
||||||
|
.pswp__share-modal {
|
||||||
|
display: block;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
padding: 10px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1600;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: opacity 0.25s ease-out;
|
||||||
|
transition: opacity 0.25s ease-out;
|
||||||
|
will-change: opacity;
|
||||||
|
-webkit-backface-visibility: hidden; }
|
||||||
|
|
||||||
|
.pswp__share-modal--hidden {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
.pswp__share-tooltip {
|
||||||
|
z-index: 1620;
|
||||||
|
position: absolute;
|
||||||
|
background: #FFF;
|
||||||
|
top: 56px;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: block;
|
||||||
|
width: auto;
|
||||||
|
right: 44px;
|
||||||
|
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||||
|
-webkit-transform: translateY(6px);
|
||||||
|
-ms-transform: translateY(6px);
|
||||||
|
transform: translateY(6px);
|
||||||
|
-webkit-transition: -webkit-transform 0.25s;
|
||||||
|
transition: transform 0.25s;
|
||||||
|
will-change: transform;
|
||||||
|
-webkit-backface-visibility: hidden; }
|
||||||
|
.pswp__share-tooltip a {
|
||||||
|
display: block;
|
||||||
|
padding: 8px 12px;
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 18px; }
|
||||||
|
.pswp__share-tooltip a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #000; }
|
||||||
|
.pswp__share-tooltip a:hover:first-child {
|
||||||
|
border-radius: 2px 2px 0 0; }
|
||||||
|
.pswp__share-tooltip a:hover:last-child {
|
||||||
|
border-radius: 0 0 2px 2px; }
|
||||||
|
|
||||||
|
.pswp__share-modal--fade-in {
|
||||||
|
opacity: 1; }
|
||||||
|
.pswp__share-modal--fade-in .pswp__share-tooltip {
|
||||||
|
-webkit-transform: translateY(0);
|
||||||
|
-ms-transform: translateY(0);
|
||||||
|
transform: translateY(0); }
|
||||||
|
|
||||||
|
.pswp--touch .pswp__share-tooltip a {
|
||||||
|
padding: 16px 12px; }
|
||||||
|
|
||||||
|
a.pswp__share--facebook:before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: -12px;
|
||||||
|
right: 15px;
|
||||||
|
border: 6px solid rgba(0, 0, 0, 0);
|
||||||
|
border-bottom-color: #FFF;
|
||||||
|
-webkit-pointer-events: none;
|
||||||
|
-moz-pointer-events: none;
|
||||||
|
pointer-events: none; }
|
||||||
|
a.pswp__share--facebook:hover {
|
||||||
|
background: #3E5C9A;
|
||||||
|
color: #FFF; }
|
||||||
|
a.pswp__share--facebook:hover:before {
|
||||||
|
border-bottom-color: #3E5C9A; }
|
||||||
|
|
||||||
|
a.pswp__share--twitter:hover {
|
||||||
|
background: #55ACEE;
|
||||||
|
color: #FFF; }
|
||||||
|
|
||||||
|
a.pswp__share--pinterest:hover {
|
||||||
|
background: #CCC;
|
||||||
|
color: #CE272D; }
|
||||||
|
|
||||||
|
a.pswp__share--download:hover {
|
||||||
|
background: #DDD; }
|
||||||
|
|
||||||
|
.pswp__button--close {
|
||||||
|
background-position: 0 -44px; }
|
||||||
|
|
||||||
|
.pswp__button--share {
|
||||||
|
background-position: -44px -44px; }
|
||||||
|
|
||||||
|
.pswp__button--fs {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
.pswp--supports-fs .pswp__button--fs {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.pswp--fs .pswp__button--fs {
|
||||||
|
background-position: -44px 0; }
|
||||||
|
|
||||||
|
.pswp__button--zoom {
|
||||||
|
display: none;
|
||||||
|
background-position: -88px 0; }
|
||||||
|
|
||||||
|
.pswp--zoom-allowed .pswp__button--zoom {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.pswp--zoomed-in .pswp__button--zoom {
|
||||||
|
background-position: -132px 0; }
|
||||||
|
|
||||||
|
.pswp__button--arrow--left, .pswp__button--arrow--right {
|
||||||
|
background: none;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -50px;
|
||||||
|
width: 70px;
|
||||||
|
height: 100px;
|
||||||
|
position: absolute; }
|
||||||
|
|
||||||
|
.pswp__top-bar, .pswp__button--arrow--left, .pswp__button--arrow--right {
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
will-change: opacity; }
|
||||||
|
|
||||||
|
.pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right {
|
||||||
|
visibility: hidden; }
|
||||||
|
|
||||||
|
.pswp__button--arrow--left {
|
||||||
|
left: 0; }
|
||||||
|
|
||||||
|
.pswp__button--arrow--right {
|
||||||
|
right: 0; }
|
||||||
|
|
||||||
|
.pswp__button--arrow--left:before, .pswp__button--arrow--right:before {
|
||||||
|
content: '';
|
||||||
|
top: 35px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
height: 30px;
|
||||||
|
width: 32px;
|
||||||
|
position: absolute; }
|
||||||
|
|
||||||
|
.pswp__button--arrow--left:before {
|
||||||
|
left: 6px;
|
||||||
|
background-position: -138px -44px; }
|
||||||
|
|
||||||
|
.pswp__button--arrow--right:before {
|
||||||
|
right: 6px;
|
||||||
|
background-position: -94px -44px; }
|
||||||
|
|
||||||
|
.pswp__counter {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 44px;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 44px;
|
||||||
|
color: #FFF;
|
||||||
|
opacity: 0.75;
|
||||||
|
padding: 0 10px; }
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.pswp_scroll-wrap {
|
||||||
|
top: 0;
|
||||||
|
bottom: 0; }
|
||||||
|
|
||||||
|
.pswp__caption {
|
||||||
|
margin-top: 0; }
|
||||||
|
|
||||||
|
.pswp__preloader {
|
||||||
|
position: relative;
|
||||||
|
left: auto;
|
||||||
|
top: auto;
|
||||||
|
margin: 0;
|
||||||
|
float: right; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__caption {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
color: #FFF;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 44px; }
|
||||||
|
.pswp__caption small {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #BBB; }
|
||||||
|
|
||||||
|
.pswp__caption__center {
|
||||||
|
text-align: left;
|
||||||
|
max-width: 420px;
|
||||||
|
margin: 0 auto;
|
||||||
|
color: #FFF;
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 10px;
|
||||||
|
line-height: 20px;
|
||||||
|
color: #CCC; }
|
||||||
|
|
||||||
|
.pswp__caption--empty {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
.pswp__caption--fake {
|
||||||
|
visibility: hidden; }
|
||||||
|
|
||||||
|
.pswp__caption, .pswp__top-bar, .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right {
|
||||||
|
will-change: opacity;
|
||||||
|
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||||
|
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||||
|
|
||||||
|
.pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right {
|
||||||
|
visibility: visible; }
|
||||||
|
|
||||||
|
.pswp__top-bar, .pswp__caption {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5); }
|
||||||
|
|
||||||
|
.pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption {
|
||||||
|
background-color: rgba(0, 0, 0, 0.3); }
|
||||||
|
|
||||||
|
.pswp__ui--hidden .pswp__top-bar, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right {
|
||||||
|
opacity: 0; }
|
||||||
|
|
||||||
|
.pswp__ui--idle .pswp__top-bar {
|
||||||
|
opacity: 0; }
|
||||||
|
.pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right {
|
||||||
|
opacity: 0; }
|
||||||
|
|
||||||
|
.pswp__ui--hidden .pswp__top-bar, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__bg, .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right {
|
||||||
|
opacity: 0.001; }
|
||||||
|
|
||||||
|
.pswp__element--disabled {
|
||||||
|
display: none !important; }
|
||||||
|
|
||||||
|
.pswp--minimal--dark .pswp__top-bar {
|
||||||
|
background: none; }
|
||||||
|
.pswp--minimal--dark .pswp__button--arrow--left, .pswp--minimal--dark .pswp__button--arrow--right {
|
||||||
|
background: none; }
|
||||||
BIN
static/dev/photo-swipe/default-skin/default-skin.png
Normal file
BIN
static/dev/photo-swipe/default-skin/default-skin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 547 B |
1
static/dev/photo-swipe/default-skin/default-skin.svg
Normal file
1
static/dev/photo-swipe/default-skin/default-skin.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
BIN
static/dev/photo-swipe/default-skin/preloader.gif
Normal file
BIN
static/dev/photo-swipe/default-skin/preloader.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 866 B |
4
static/dev/photo-swipe/photoswipe-ui-default.min.js
vendored
Normal file
4
static/dev/photo-swipe/photoswipe-ui-default.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
136
static/dev/photo-swipe/photoswipe.css
Normal file
136
static/dev/photo-swipe/photoswipe.css
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
/**
|
||||||
|
* Core PhotoSwipe CSS file, http://photoswipe.com
|
||||||
|
* @author Dmitry Semenov
|
||||||
|
*/
|
||||||
|
.pswp {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
-ms-touch-action: none;
|
||||||
|
touch-action: none;
|
||||||
|
z-index: 1500;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
outline: none; }
|
||||||
|
.pswp * {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box; }
|
||||||
|
.pswp img {
|
||||||
|
max-width: none; }
|
||||||
|
|
||||||
|
.pswp--animate_opacity {
|
||||||
|
opacity: 0;
|
||||||
|
will-change: opacity;
|
||||||
|
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||||
|
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||||
|
|
||||||
|
.pswp--open {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.pswp--zoom-allowed .pswp__img {
|
||||||
|
/* autoprefixer: off */
|
||||||
|
cursor: -webkit-zoom-in;
|
||||||
|
cursor: -moz-zoom-in;
|
||||||
|
cursor: zoom-in; }
|
||||||
|
|
||||||
|
.pswp--zoomed-in .pswp__img {
|
||||||
|
/* autoprefixer: off */
|
||||||
|
cursor: -webkit-grab;
|
||||||
|
cursor: -moz-grab;
|
||||||
|
cursor: grab; }
|
||||||
|
|
||||||
|
.pswp--dragging .pswp__img {
|
||||||
|
/* autoprefixer: off */
|
||||||
|
cursor: -webkit-grabbing;
|
||||||
|
cursor: -moz-grabbing;
|
||||||
|
cursor: grabbing; }
|
||||||
|
|
||||||
|
.pswp__bg {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #000;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
will-change: opacity; }
|
||||||
|
|
||||||
|
.pswp__scroll-wrap {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
will-change: transform; }
|
||||||
|
|
||||||
|
.pswp__container, .pswp__zoom-wrap {
|
||||||
|
-ms-touch-action: none;
|
||||||
|
touch-action: none;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0; }
|
||||||
|
|
||||||
|
.pswp__container, .pswp__img {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
-webkit-touch-callout: none; }
|
||||||
|
|
||||||
|
.pswp__zoom-wrap {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
-webkit-transform-origin: left top;
|
||||||
|
-ms-transform-origin: left top;
|
||||||
|
transform-origin: left top;
|
||||||
|
-webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||||
|
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||||
|
|
||||||
|
.pswp__bg {
|
||||||
|
will-change: opacity;
|
||||||
|
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||||
|
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||||
|
|
||||||
|
.pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap {
|
||||||
|
-webkit-transition: none;
|
||||||
|
transition: none; }
|
||||||
|
|
||||||
|
.pswp__container, .pswp__zoom-wrap {
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
will-change: transform; }
|
||||||
|
|
||||||
|
.pswp__item {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow: hidden; }
|
||||||
|
|
||||||
|
.pswp__img {
|
||||||
|
position: absolute;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
-webkit-transition: opacity 0.15s;
|
||||||
|
transition: opacity 0.15s; }
|
||||||
|
|
||||||
|
.pswp__img--placeholder {
|
||||||
|
-webkit-backface-visibility: hidden; }
|
||||||
|
|
||||||
|
.pswp__img--placeholder--blank {
|
||||||
|
background: #222; }
|
||||||
|
|
||||||
|
.pswp--ie .pswp__img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0; }
|
||||||
4
static/dev/photo-swipe/photoswipe.min.js
vendored
Normal file
4
static/dev/photo-swipe/photoswipe.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user