Split photoswipe
This commit is contained in:
Simon Conseil
@@ -1,7 +1,6 @@
|
||||
<!doctype html>
|
||||
<html lang="{{ settings.html_language }}">
|
||||
<head>
|
||||
{% block head %}
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
|
||||
@@ -12,7 +11,7 @@
|
||||
<link rel="stylesheet" href="{{ theme.url }}/css/skeleton.css">
|
||||
<link rel="stylesheet" href="{{ theme.url }}/css/colorbox.css">
|
||||
<link rel="stylesheet" href="{{ theme.url }}/css/style.css">
|
||||
{% endblock %}
|
||||
{% block extra_head %}{% endblock extra_head %}
|
||||
{% include 'analytics.html' %}
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -1,2 +1,314 @@
|
||||
<!-- generated from album -->
|
||||
{% extends "album_list.html" %}
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{% if album.zip %}
|
||||
<div class="additionnal-infos">
|
||||
<p><a href="{{ album.zip }}" title="Download a zip archive with all images">Download ZIP</a></p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
|
||||
{% for media in album.medias %}
|
||||
{% if media.type == "image" %}
|
||||
{% if loop.first %}
|
||||
<figure class="gallery__img--main thumbnail" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<a href="{{ media.url }}" itemprop="contentUrl" data-size="{{media.size.width}}x{{media.size.height}}">
|
||||
<img src="{{ theme.url }}/echo/blank.gif" data-echo="{{ media.url }}" alt="{{ media.url }}" itemprop="thumbnail" title="{{ media.exif.datetime }}" />
|
||||
</a>
|
||||
<figcaption itemprop="caption description">{{ media.title }} - {{ media.exif.datetime }}</figcaption>
|
||||
</figure>
|
||||
{% else %}
|
||||
<figure class="gallery__img--secondary thumbnail" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<a href="{{ media.url }}" itemprop="contentUrl" data-size="{{media.size.width}}x{{media.size.height}}">
|
||||
<img src="{{ theme.url }}/echo/blank.gif" data-echo="{{ media.thumbnail }}" alt="{{ media.url }}" itemprop="thumbnail" title="{{ media.exif.datetime }}" />
|
||||
</a>
|
||||
<figcaption itemprop="caption description">{{ media.title }} - {{ media.exif.datetime }}</figcaption>
|
||||
</figure>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if media.type == "video" %}
|
||||
<figure class="gallery__img--secondary thumbnail" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<a href="{{ media.url }}" itemprop="contentUrl" data-type="video" data-video='<div class="video"><div class="video__container"><video controls><source src="{{ media.url }}" type="{{ media.mime }}" /></video></div></div>'>
|
||||
<img src="{{ theme.url }}/echo/blank.gif" data-echo="{{ media.thumbnail }}" alt="{{ media.thumbnail }}" itemprop="thumbnail" title="" />
|
||||
</a>
|
||||
<figcaption itemprop="caption description">{{ media_title }}</figcaption>
|
||||
</figure>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_footer %}
|
||||
{% if album.medias %}
|
||||
<!-- 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 the 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>
|
||||
<script>
|
||||
echo.init({
|
||||
offset: 100,
|
||||
throttle: 250,
|
||||
unload: false
|
||||
});
|
||||
|
||||
var initPhotoSwipeFromDOM = function(gallerySelector) {
|
||||
|
||||
// parse slide data (url, title, size ...) from DOM elements
|
||||
// (children of gallerySelector)
|
||||
var parseThumbnailElements = function(el) {
|
||||
var thumbElements = el.childNodes,
|
||||
numNodes = thumbElements.length,
|
||||
items = [],
|
||||
figureEl,
|
||||
linkEl,
|
||||
size,
|
||||
item;
|
||||
|
||||
for(var i = 0; i < numNodes; i++) {
|
||||
|
||||
figureEl = thumbElements[i]; // <figure> element
|
||||
|
||||
// include only element nodes
|
||||
if(figureEl.nodeType !== 1) {
|
||||
continue;
|
||||
}
|
||||
|
||||
linkEl = figureEl.children[0]; // <a> element
|
||||
|
||||
// create slide object
|
||||
if (linkEl.getAttribute('data-type') == 'video') {
|
||||
item = {
|
||||
html: linkEl.getAttribute('data-video')
|
||||
};
|
||||
} else {
|
||||
size = linkEl.getAttribute('data-size').split('x');
|
||||
item = {
|
||||
src: linkEl.getAttribute('href'),
|
||||
w: parseInt(size[0], 10),
|
||||
h: parseInt(size[1], 10)
|
||||
};
|
||||
}
|
||||
|
||||
if(figureEl.children.length > 1) {
|
||||
// <figcaption> content
|
||||
item.title = figureEl.children[1].innerHTML;
|
||||
}
|
||||
|
||||
if(linkEl.children.length > 0) {
|
||||
// <img> thumbnail element, retrieving thumbnail url
|
||||
item.msrc = linkEl.children[0].getAttribute('data-echo');
|
||||
}
|
||||
|
||||
item.el = figureEl; // save link to element for getThumbBoundsFn
|
||||
items.push(item);
|
||||
}
|
||||
|
||||
return items;
|
||||
};
|
||||
|
||||
// find nearest parent element
|
||||
var closest = function closest(el, fn) {
|
||||
return el && ( fn(el) ? el : closest(el.parentNode, fn) );
|
||||
};
|
||||
|
||||
// triggers when user clicks on thumbnail
|
||||
var onThumbnailsClick = function(e) {
|
||||
e = e || window.event;
|
||||
e.preventDefault ? e.preventDefault() : e.returnValue = false;
|
||||
|
||||
var eTarget = e.target || e.srcElement;
|
||||
|
||||
// find root element of slide
|
||||
var clickedListItem = closest(eTarget, function(el) {
|
||||
return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
|
||||
});
|
||||
|
||||
if(!clickedListItem) {
|
||||
return;
|
||||
}
|
||||
|
||||
// find index of clicked item by looping through all child nodes
|
||||
// alternatively, you may define index via data- attribute
|
||||
var clickedGallery = clickedListItem.parentNode,
|
||||
childNodes = clickedListItem.parentNode.childNodes,
|
||||
numChildNodes = childNodes.length,
|
||||
nodeIndex = 0,
|
||||
index;
|
||||
|
||||
for (var i = 0; i < numChildNodes; i++) {
|
||||
if(childNodes[i].nodeType !== 1) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if(childNodes[i] === clickedListItem) {
|
||||
index = nodeIndex;
|
||||
break;
|
||||
}
|
||||
nodeIndex++;
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(index >= 0) {
|
||||
// open PhotoSwipe if valid index found
|
||||
openPhotoSwipe( index, clickedGallery );
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
// parse picture index and gallery index from URL (#&pid=1&gid=2)
|
||||
var photoswipeParseHash = function() {
|
||||
var hash = window.location.hash.substring(1),
|
||||
params = {};
|
||||
|
||||
if(hash.length < 5) {
|
||||
return params;
|
||||
}
|
||||
|
||||
var vars = hash.split('&');
|
||||
for (var i = 0; i < vars.length; i++) {
|
||||
if(!vars[i]) {
|
||||
continue;
|
||||
}
|
||||
var pair = vars[i].split('=');
|
||||
if(pair.length < 2) {
|
||||
continue;
|
||||
}
|
||||
params[pair[0]] = pair[1];
|
||||
}
|
||||
|
||||
if(params.gid) {
|
||||
params.gid = parseInt(params.gid, 10);
|
||||
}
|
||||
|
||||
return params;
|
||||
};
|
||||
|
||||
var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
|
||||
var pswpElement = document.querySelectorAll('.pswp')[0],
|
||||
gallery,
|
||||
options,
|
||||
items;
|
||||
|
||||
items = parseThumbnailElements(galleryElement);
|
||||
|
||||
// define options (if needed)
|
||||
options = {
|
||||
|
||||
// define gallery index (for URL)
|
||||
galleryUID: galleryElement.getAttribute('data-pswp-uid'),
|
||||
|
||||
getThumbBoundsFn: function(index) {
|
||||
// See Options -> getThumbBoundsFn section of documentation for more info
|
||||
var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
|
||||
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
|
||||
rect = thumbnail.getBoundingClientRect();
|
||||
|
||||
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// PhotoSwipe opened from URL
|
||||
if(fromURL) {
|
||||
if(options.galleryPIDs) {
|
||||
// parse real index when custom PIDs are used
|
||||
// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
|
||||
for(var j = 0; j < items.length; j++) {
|
||||
if(items[j].pid == index) {
|
||||
options.index = j;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// in URL indexes start from 1
|
||||
options.index = parseInt(index, 10) - 1;
|
||||
}
|
||||
} else {
|
||||
options.index = parseInt(index, 10);
|
||||
}
|
||||
|
||||
// exit if index not found
|
||||
if( isNaN(options.index) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if(disableAnimation) {
|
||||
options.showAnimationDuration = 0;
|
||||
}
|
||||
|
||||
// Pass data to PhotoSwipe and initialize it
|
||||
gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
|
||||
gallery.init();
|
||||
};
|
||||
|
||||
// loop through all gallery elements and bind events
|
||||
var galleryElements = document.querySelectorAll( gallerySelector );
|
||||
|
||||
for(var i = 0, l = galleryElements.length; i < l; i++) {
|
||||
galleryElements[i].setAttribute('data-pswp-uid', i+1);
|
||||
galleryElements[i].onclick = onThumbnailsClick;
|
||||
}
|
||||
|
||||
// Parse URL and open gallery if it contains #&pid=3&gid=1
|
||||
var hashData = photoswipeParseHash();
|
||||
if(hashData.pid && hashData.gid) {
|
||||
openPhotoSwipe( hashData.pid , galleryElements[ hashData.gid - 1 ], true, true );
|
||||
}
|
||||
};
|
||||
|
||||
// execute above function
|
||||
initPhotoSwipeFromDOM('.gallery');
|
||||
|
||||
</script>
|
||||
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,396 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="{{ settings.html_language }}">
|
||||
<head>
|
||||
{% block head %}
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
|
||||
<title>{{ album.title }}</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="{{ album.author }}">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="stylesheet" href="{{ theme.url }}/photoswipe.css">
|
||||
<link rel="stylesheet" href="{{ theme.url }}/default-skin/default-skin.css">
|
||||
<link rel="stylesheet" href="{{ theme.url }}/styles.css">
|
||||
<script src="{{ theme.url }}/photoswipe.min.js"></script>
|
||||
<script src="{{ theme.url }}/photoswipe-ui-default.min.js"></script>
|
||||
<script src="{{ theme.url }}/echo/echo.min.js"></script>
|
||||
{% endblock %}
|
||||
{% include 'analytics.html' %}
|
||||
</head>
|
||||
<body>
|
||||
{% include 'gtm.html' %}
|
||||
<div class="container">
|
||||
<h1><a href="{{ album.index_url }}">{{ index_title }}</a></h1>
|
||||
|
||||
{% include 'links.html' %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="content">
|
||||
{% if album.breadcrumb %}
|
||||
<div class="breadcrumb">
|
||||
<h2>
|
||||
{% for url, title in album.breadcrumb %}
|
||||
<a href="{{ url }}">{{ title }}</a>{% if not loop.last %} » {% endif %}
|
||||
{% endfor -%}
|
||||
</h2>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if album.albums %}
|
||||
<div class="album-list">
|
||||
{% for alb in album.albums %}
|
||||
<div class="menu-img thumbnail">
|
||||
<a href="{{ alb.url }}">
|
||||
<img src="{{ alb.thumbnail }}" class="album_thumb" alt="{{ alb.title }}" title="{{ alb.title }}" /></a>
|
||||
<span class="album_title">{{ alb.title }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if album.zip %}
|
||||
<div class="additionnal-infos">
|
||||
<p><a href="{{ album.zip }}" title="Download a zip archive with all images">Download ZIP</a></p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if album.medias %}
|
||||
<div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
|
||||
{% for media in album.medias %}
|
||||
{% if media.type == "image" %}
|
||||
{% if loop.first %}
|
||||
<figure class="gallery__img--main thumbnail" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<a href="{{ media.url }}" itemprop="contentUrl" data-size="{{media.size.width}}x{{media.size.height}}">
|
||||
<img src="{{ theme.url }}/echo/blank.gif" data-echo="{{ media.url }}" alt="{{ media.url }}" itemprop="thumbnail" title="{{ media.exif.datetime }}" />
|
||||
</a>
|
||||
<figcaption itemprop="caption description">{{ media.title }} - {{ media.exif.datetime }}</figcaption>
|
||||
</figure>
|
||||
{% else %}
|
||||
<figure class="gallery__img--secondary thumbnail" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<a href="{{ media.url }}" itemprop="contentUrl" data-size="{{media.size.width}}x{{media.size.height}}">
|
||||
<img src="{{ theme.url }}/echo/blank.gif" data-echo="{{ media.thumbnail }}" alt="{{ media.url }}" itemprop="thumbnail" title="{{ media.exif.datetime }}" />
|
||||
</a>
|
||||
<figcaption itemprop="caption description">{{ media.title }} - {{ media.exif.datetime }}</figcaption>
|
||||
</figure>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if media.type == "video" %}
|
||||
<figure class="gallery__img--secondary thumbnail" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<a href="{{ media.url }}" itemprop="contentUrl" data-type="video" data-video='<div class="video"><div class="video__container"><video controls><source src="{{ media.url }}" type="{{ media.mime }}" /></video></div></div>'>
|
||||
<img src="{{ theme.url }}/echo/blank.gif" data-echo="{{ media.thumbnail }}" alt="{{ media.thumbnail }}" itemprop="thumbnail" title="" />
|
||||
</a>
|
||||
<figcaption itemprop="caption description">{{ media_title }}</figcaption>
|
||||
</figure>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if album.description %}
|
||||
<div id="description" class="row">
|
||||
{{ album.description }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block footer %}
|
||||
<footer>
|
||||
<p>{% if album.author %}© {{ album.author }} - {% endif %}
|
||||
Generated by <a href="{{ sigal_link }}">sigal</a>
|
||||
</p>
|
||||
</footer>
|
||||
{% if album.medias %}
|
||||
<!-- 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 the 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>
|
||||
<script>
|
||||
echo.init({
|
||||
offset: 100,
|
||||
throttle: 250,
|
||||
unload: false
|
||||
});
|
||||
|
||||
var initPhotoSwipeFromDOM = function(gallerySelector) {
|
||||
|
||||
// parse slide data (url, title, size ...) from DOM elements
|
||||
// (children of gallerySelector)
|
||||
var parseThumbnailElements = function(el) {
|
||||
var thumbElements = el.childNodes,
|
||||
numNodes = thumbElements.length,
|
||||
items = [],
|
||||
figureEl,
|
||||
linkEl,
|
||||
size,
|
||||
item;
|
||||
|
||||
for(var i = 0; i < numNodes; i++) {
|
||||
|
||||
figureEl = thumbElements[i]; // <figure> element
|
||||
|
||||
// include only element nodes
|
||||
if(figureEl.nodeType !== 1) {
|
||||
continue;
|
||||
}
|
||||
|
||||
linkEl = figureEl.children[0]; // <a> element
|
||||
|
||||
// create slide object
|
||||
if (linkEl.getAttribute('data-type') == 'video') {
|
||||
item = {
|
||||
html: linkEl.getAttribute('data-video')
|
||||
};
|
||||
} else {
|
||||
size = linkEl.getAttribute('data-size').split('x');
|
||||
item = {
|
||||
src: linkEl.getAttribute('href'),
|
||||
w: parseInt(size[0], 10),
|
||||
h: parseInt(size[1], 10)
|
||||
};
|
||||
}
|
||||
|
||||
if(figureEl.children.length > 1) {
|
||||
// <figcaption> content
|
||||
item.title = figureEl.children[1].innerHTML;
|
||||
}
|
||||
|
||||
if(linkEl.children.length > 0) {
|
||||
// <img> thumbnail element, retrieving thumbnail url
|
||||
item.msrc = linkEl.children[0].getAttribute('data-echo');
|
||||
}
|
||||
|
||||
item.el = figureEl; // save link to element for getThumbBoundsFn
|
||||
items.push(item);
|
||||
}
|
||||
|
||||
return items;
|
||||
};
|
||||
|
||||
// find nearest parent element
|
||||
var closest = function closest(el, fn) {
|
||||
return el && ( fn(el) ? el : closest(el.parentNode, fn) );
|
||||
};
|
||||
|
||||
// triggers when user clicks on thumbnail
|
||||
var onThumbnailsClick = function(e) {
|
||||
e = e || window.event;
|
||||
e.preventDefault ? e.preventDefault() : e.returnValue = false;
|
||||
|
||||
var eTarget = e.target || e.srcElement;
|
||||
|
||||
// find root element of slide
|
||||
var clickedListItem = closest(eTarget, function(el) {
|
||||
return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
|
||||
});
|
||||
|
||||
if(!clickedListItem) {
|
||||
return;
|
||||
}
|
||||
|
||||
// find index of clicked item by looping through all child nodes
|
||||
// alternatively, you may define index via data- attribute
|
||||
var clickedGallery = clickedListItem.parentNode,
|
||||
childNodes = clickedListItem.parentNode.childNodes,
|
||||
numChildNodes = childNodes.length,
|
||||
nodeIndex = 0,
|
||||
index;
|
||||
|
||||
for (var i = 0; i < numChildNodes; i++) {
|
||||
if(childNodes[i].nodeType !== 1) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if(childNodes[i] === clickedListItem) {
|
||||
index = nodeIndex;
|
||||
break;
|
||||
}
|
||||
nodeIndex++;
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(index >= 0) {
|
||||
// open PhotoSwipe if valid index found
|
||||
openPhotoSwipe( index, clickedGallery );
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
// parse picture index and gallery index from URL (#&pid=1&gid=2)
|
||||
var photoswipeParseHash = function() {
|
||||
var hash = window.location.hash.substring(1),
|
||||
params = {};
|
||||
|
||||
if(hash.length < 5) {
|
||||
return params;
|
||||
}
|
||||
|
||||
var vars = hash.split('&');
|
||||
for (var i = 0; i < vars.length; i++) {
|
||||
if(!vars[i]) {
|
||||
continue;
|
||||
}
|
||||
var pair = vars[i].split('=');
|
||||
if(pair.length < 2) {
|
||||
continue;
|
||||
}
|
||||
params[pair[0]] = pair[1];
|
||||
}
|
||||
|
||||
if(params.gid) {
|
||||
params.gid = parseInt(params.gid, 10);
|
||||
}
|
||||
|
||||
return params;
|
||||
};
|
||||
|
||||
var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
|
||||
var pswpElement = document.querySelectorAll('.pswp')[0],
|
||||
gallery,
|
||||
options,
|
||||
items;
|
||||
|
||||
items = parseThumbnailElements(galleryElement);
|
||||
|
||||
// define options (if needed)
|
||||
options = {
|
||||
|
||||
// define gallery index (for URL)
|
||||
galleryUID: galleryElement.getAttribute('data-pswp-uid'),
|
||||
|
||||
getThumbBoundsFn: function(index) {
|
||||
// See Options -> getThumbBoundsFn section of documentation for more info
|
||||
var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
|
||||
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
|
||||
rect = thumbnail.getBoundingClientRect();
|
||||
|
||||
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// PhotoSwipe opened from URL
|
||||
if(fromURL) {
|
||||
if(options.galleryPIDs) {
|
||||
// parse real index when custom PIDs are used
|
||||
// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
|
||||
for(var j = 0; j < items.length; j++) {
|
||||
if(items[j].pid == index) {
|
||||
options.index = j;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// in URL indexes start from 1
|
||||
options.index = parseInt(index, 10) - 1;
|
||||
}
|
||||
} else {
|
||||
options.index = parseInt(index, 10);
|
||||
}
|
||||
|
||||
// exit if index not found
|
||||
if( isNaN(options.index) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if(disableAnimation) {
|
||||
options.showAnimationDuration = 0;
|
||||
}
|
||||
|
||||
// Pass data to PhotoSwipe and initialize it
|
||||
gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
|
||||
gallery.init();
|
||||
};
|
||||
|
||||
// loop through all gallery elements and bind events
|
||||
var galleryElements = document.querySelectorAll( gallerySelector );
|
||||
|
||||
for(var i = 0, l = galleryElements.length; i < l; i++) {
|
||||
galleryElements[i].setAttribute('data-pswp-uid', i+1);
|
||||
galleryElements[i].onclick = onThumbnailsClick;
|
||||
}
|
||||
|
||||
// Parse URL and open gallery if it contains #&pid=3&gid=1
|
||||
var hashData = photoswipeParseHash();
|
||||
if(hashData.pid && hashData.gid) {
|
||||
openPhotoSwipe( hashData.pid , galleryElements[ hashData.gid - 1 ], true, true );
|
||||
}
|
||||
};
|
||||
|
||||
// execute above function
|
||||
initPhotoSwipeFromDOM('.gallery');
|
||||
|
||||
</script>
|
||||
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% include 'piwik.html' %}
|
||||
</body>
|
||||
</html>
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<div class="album-list">
|
||||
{% for alb in album.albums %}
|
||||
<div class="menu-img thumbnail">
|
||||
<a href="{{ alb.url }}">
|
||||
<img src="{{ alb.thumbnail }}" class="album_thumb"
|
||||
alt="{{ alb.title }}" title="{{ alb.title }}" /></a>
|
||||
<span class="album_title">{{ alb.title }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
56
sigal/themes/photoswipe/templates/base.html
Normal file
56
sigal/themes/photoswipe/templates/base.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!doctype html>
|
||||
<html lang="{{ settings.html_language }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
|
||||
<title>{{ album.title }}</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="{{ album.author }}">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="stylesheet" href="{{ theme.url }}/photoswipe.css">
|
||||
<link rel="stylesheet" href="{{ theme.url }}/default-skin/default-skin.css">
|
||||
<link rel="stylesheet" href="{{ theme.url }}/styles.css">
|
||||
<script src="{{ theme.url }}/photoswipe.min.js"></script>
|
||||
<script src="{{ theme.url }}/photoswipe-ui-default.min.js"></script>
|
||||
<script src="{{ theme.url }}/echo/echo.min.js"></script>
|
||||
{% block extra_head %}{% endblock extra_head %}
|
||||
{% include 'analytics.html' %}
|
||||
</head>
|
||||
<body>
|
||||
{% include 'gtm.html' %}
|
||||
<div class="container">
|
||||
<h1><a href="{{ album.index_url }}">{{ index_title }}</a></h1>
|
||||
|
||||
{% include 'links.html' %}
|
||||
|
||||
<div class="content">
|
||||
{% if album.breadcrumb %}
|
||||
<div class="breadcrumb">
|
||||
<h2>
|
||||
{% for url, title in album.breadcrumb %}
|
||||
<a href="{{ url }}">{{ title }}</a>{% if not loop.last %} » {% endif %}
|
||||
{% endfor -%}
|
||||
</h2>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
{% if album.description %}
|
||||
<div id="description" class="row">
|
||||
{{ album.description }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>{% if album.author %}© {{ album.author }} - {% endif %}
|
||||
Generated by <a href="{{ sigal_link }}">sigal</a>
|
||||
</p>
|
||||
</footer>
|
||||
{% block extra_footer %}{% endblock %}
|
||||
</div>
|
||||
{% include 'piwik.html' %}
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user