Merge pull request #348 from saimn/reorganize-templates
Reorganize templates
This commit is contained in:
Simon Conseil
GitHub
@@ -32,6 +32,9 @@ header h1 a {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
}
|
||||
.sidebar footer span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
text-align: center;
|
||||
|
||||
@@ -1,2 +1,82 @@
|
||||
<!-- generated from album -->
|
||||
{% extends "album_list.html" %}
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
{% set numbers = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine"] %}
|
||||
{% set column_size = settings.colorbox_column_size %}
|
||||
{% set nb_columns = (9 / column_size)|int %}
|
||||
{% set column_size_t = numbers[column_size] %}
|
||||
|
||||
{% macro img_description(media) -%}
|
||||
{% if media.big %} data-big="{{ media.big_url }}"{% endif %}
|
||||
{% if media.exif %}
|
||||
{% if media.exif.datetime %}
|
||||
data-date=", {{ media.exif.datetime }}"
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{%- endmacro %}
|
||||
|
||||
<div id="gallery">
|
||||
{% for media in album.medias %}
|
||||
{% if loop.index % nb_columns == 1 %}
|
||||
<div id="albums" class="row">
|
||||
{% endif%}
|
||||
{% if media.type == "image" %}
|
||||
<div class="{{ column_size_t }} columns thumbnail">
|
||||
{% if 'sigal.plugins.media_page' in settings.plugins %}
|
||||
<a href="{{ media.url}}.html" class="gallery"
|
||||
title="{{ media.title }}"
|
||||
data-href="{{ media.url }}" {{ img_description(media) }}>
|
||||
{% else %}
|
||||
<a href="{{ media.url }}" class="gallery" title="{{ media.title }}"
|
||||
{{ img_description(media) }}>
|
||||
{% endif %}
|
||||
<img src="{{ media.thumbnail }}" alt="{{ media.url }}"
|
||||
title="{{ media.title }}" /></a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if media.type == "video" %}
|
||||
{% set mhash = media.url|replace('.', '')|replace(' ', '') %}
|
||||
<div class="{{ column_size_t }} columns thumbnail">
|
||||
{% if 'sigal.plugins.media_page' in settings.plugins %}
|
||||
<a href="{{ media.url }}.html" data-href="#{{ mhash }}"
|
||||
{% else %}
|
||||
<a href="#{{ mhash }}" class="gallery" inline='yes' title="{{ media.url }}"
|
||||
{% endif %}
|
||||
{% if media.big %} data-big="{{ media.big_url }}"{% endif %}>
|
||||
<img src="{{ media.thumbnail }}" alt="{{ media.url }}"
|
||||
title="{{ media.title }}" /></a>
|
||||
</div>
|
||||
<!-- This contains the hidden content for the video -->
|
||||
<div style='display:none'>
|
||||
<div id="{{ mhash }}">
|
||||
<video controls>
|
||||
<source src='{{ media.url }}' type='{{ media.mime }}' />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if loop.last or loop.index % nb_columns == 0 %}
|
||||
</div>
|
||||
{% endif%}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if album.zip %}
|
||||
<div id="additionnal-infos" class="row">
|
||||
<p><a href="{{ album.zip }}"
|
||||
title="Download a zip archive with all images">Download ZIP</a></p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block footer %}
|
||||
<script src="{{ theme.url }}/js/jquery-2.2.1.min.js"></script>
|
||||
<script src="{{ theme.url }}/js/jquery.colorbox-min.js"></script>
|
||||
<script src="{{ theme.url }}/js/jquery.touchSwipe.min.js"></script>
|
||||
|
||||
{% if 'sigal.plugins.media_page' in settings.plugins %}
|
||||
<script src="{{ theme.url }}/js/app-with-media-page.js"></script>
|
||||
{% else %}
|
||||
<script src="{{ theme.url }}/js/app.js"></script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,22 +1,10 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<header>
|
||||
{% if album.breadcrumb %}
|
||||
<h2>
|
||||
{% for url, title in album.breadcrumb %}
|
||||
<a href="{{ url }}">{{ title }}</a>{% if not loop.last %} » {% endif %}
|
||||
{% endfor -%}
|
||||
</h2>
|
||||
<hr>
|
||||
{% endif %}
|
||||
</header>
|
||||
|
||||
{% set numbers = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine"] %}
|
||||
{% set column_size = settings.colorbox_column_size %}
|
||||
{% set nb_columns = (9 / column_size)|int %}
|
||||
{% set column_size_t = numbers[column_size] %}
|
||||
|
||||
{% if album.albums %}
|
||||
{% for alb in album.albums %}
|
||||
{% if loop.index % nb_columns == 1 %}
|
||||
<div id="albums" class="row">
|
||||
@@ -31,89 +19,4 @@
|
||||
</div>
|
||||
{% endif%}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if album.medias %}
|
||||
{% macro img_description(media) -%}
|
||||
{% if media.big %} data-big="{{ media.big_url }}"{% endif %}
|
||||
{% if media.exif %}
|
||||
{% if media.exif.datetime %}
|
||||
data-date=", {{ media.exif.datetime }}"
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{%- endmacro %}
|
||||
|
||||
<div id="gallery">
|
||||
{% for media in album.medias %}
|
||||
{% if loop.index % nb_columns == 1 %}
|
||||
<div id="albums" class="row">
|
||||
{% endif%}
|
||||
{% if media.type == "image" %}
|
||||
<div class="{{ column_size_t }} columns thumbnail">
|
||||
{% if 'sigal.plugins.media_page' in settings.plugins %}
|
||||
<a href="{{ media.url}}.html" class="gallery"
|
||||
title="{{ media.title }}"
|
||||
data-href="{{ media.url }}" {{ img_description(media) }}>
|
||||
{% else %}
|
||||
<a href="{{ media.url }}" class="gallery" title="{{ media.title }}"
|
||||
{{ img_description(media) }}>
|
||||
{% endif %}
|
||||
<img src="{{ media.thumbnail }}" alt="{{ media.url }}"
|
||||
title="{{ media.title }}" /></a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if media.type == "video" %}
|
||||
{% set mhash = media.url|replace('.', '')|replace(' ', '') %}
|
||||
<div class="{{ column_size_t }} columns thumbnail">
|
||||
{% if 'sigal.plugins.media_page' in settings.plugins %}
|
||||
<a href="{{ media.url }}.html" data-href="#{{ mhash }}"
|
||||
{% else %}
|
||||
<a href="#{{ mhash }}" class="gallery" inline='yes' title="{{ media.url }}"
|
||||
{% endif %}
|
||||
{% if media.big %} data-big="{{ media.big_url }}"{% endif %}>
|
||||
<img src="{{ media.thumbnail }}" alt="{{ media.url }}"
|
||||
title="{{ media.title }}" /></a>
|
||||
</div>
|
||||
<!-- This contains the hidden content for the video -->
|
||||
<div style='display:none'>
|
||||
<div id="{{ mhash }}">
|
||||
<video controls>
|
||||
<source src='{{ media.url }}' type='{{ media.mime }}' />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if loop.last or loop.index % nb_columns == 0 %}
|
||||
</div>
|
||||
{% endif%}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if album.zip %}
|
||||
<div id="additionnal-infos" class="row">
|
||||
<p><a href="{{ album.zip }}"
|
||||
title="Download a zip archive with all images">Download ZIP</a></p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if album.description %}
|
||||
<div id="description" class="row">
|
||||
{{ album.description }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block footer %}
|
||||
{% if album.medias %}
|
||||
<script src="{{ theme.url }}/js/jquery-2.2.1.min.js"></script>
|
||||
<script src="{{ theme.url }}/js/jquery.colorbox-min.js"></script>
|
||||
<script src="{{ theme.url }}/js/jquery.touchSwipe.min.js"></script>
|
||||
|
||||
{% if 'sigal.plugins.media_page' in settings.plugins %}
|
||||
<script src="{{ theme.url }}/js/app-with-media-page.js"></script>
|
||||
{% else %}
|
||||
<script src="{{ theme.url }}/js/app.js"></script>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -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>
|
||||
@@ -27,23 +26,27 @@
|
||||
{{ index_title }}
|
||||
{% endif %}
|
||||
</a></h1>
|
||||
{% if settings.links %}
|
||||
<nav id="menu">
|
||||
<ul>
|
||||
{% for title, link in settings.links %}
|
||||
<li><a href="{{ link }}">{{ title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
{% include 'links.html' %}
|
||||
{% include 'footer.html' %}
|
||||
</div>
|
||||
</div>
|
||||
<div id="main" role="main" class="nine columns offset-by-three">
|
||||
<header>
|
||||
{% include 'breadcrumb.html' %}
|
||||
{% if album.breadcrumb %}
|
||||
<hr>
|
||||
{% endif %}
|
||||
</header>
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
{% if album.description %}
|
||||
<div id="description" class="row">
|
||||
{{ album.description }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% block footer %}{% endblock %}
|
||||
{% include 'piwik.html' %}
|
||||
</body>
|
||||
|
||||
9
sigal/themes/default/templates/breadcrumb.html
Normal file
9
sigal/themes/default/templates/breadcrumb.html
Normal file
@@ -0,0 +1,9 @@
|
||||
{% 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 %}
|
||||
@@ -1,7 +1,16 @@
|
||||
<footer>
|
||||
<p>{% if album.author %}© {{ album.author }} - {% endif %}
|
||||
Generated by <a href="{{ sigal_link }}">sigal</a>
|
||||
{% if 'sigal.plugins.feeds' in settings.plugins %}
|
||||
{% if settings.rss_feed %}<br><a href={{ settings.rss_feed.feed_url }}>RSS Feed</a>{% endif %}
|
||||
{% if settings.atom_feed %}<br><a href={{ settings.atom_feed.feed_url }}>Atom Feed</a>{% endif %}{% endif %}</p>
|
||||
</footer>
|
||||
<footer>
|
||||
<p>
|
||||
{% if album.author %}
|
||||
<span>© {{ album.author }}</span>
|
||||
{% endif %}
|
||||
<span>Generated by <a href="{{ sigal_link }}">sigal</a></span>
|
||||
{% if 'sigal.plugins.feeds' in settings.plugins %}
|
||||
{% if settings.rss_feed %}
|
||||
<span><a href={{ settings.rss_feed.feed_url }}>RSS Feed</a></span>
|
||||
{% endif %}
|
||||
{% if settings.atom_feed %}
|
||||
<span><a href={{ settings.atom_feed.feed_url }}>Atom Feed</a></span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
9
sigal/themes/default/templates/links.html
Normal file
9
sigal/themes/default/templates/links.html
Normal file
@@ -0,0 +1,9 @@
|
||||
{% if settings.links %}
|
||||
<nav id="menu">
|
||||
<ul>
|
||||
{% for title, link in settings.links %}
|
||||
<li><a href="{{ link }}">{{ title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
@@ -172,6 +172,9 @@ footer a:hover {
|
||||
border-bottom: 1px solid;
|
||||
text-decoration: none;
|
||||
}
|
||||
footer span:not(:last-child):after {
|
||||
content: ' - ';
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 980px) {
|
||||
.container {
|
||||
|
||||
@@ -3,21 +3,17 @@
|
||||
{% block extra_head %}
|
||||
{# We will always want to show the first image when we're on an album page #}
|
||||
{# Start loading now for faster document complete instead of waiting for js to load it #}
|
||||
{% if album.medias %}
|
||||
<style>
|
||||
body::after{
|
||||
position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
|
||||
content:url({{ album.medias[0].url }});
|
||||
}</style>
|
||||
{% endif %}
|
||||
|
||||
{% if settings.show_map and album.show_map %}
|
||||
<link rel="stylesheet" href="{{ theme.url }}/leaflet/leaflet.css" />
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% if album.medias %}
|
||||
<div class="icons">
|
||||
{% if settings.show_map and album.show_map %}
|
||||
<a class="gallery-map-toggle"><img src="{{ theme.url }}/img/map.png"
|
||||
@@ -26,14 +22,12 @@
|
||||
<a id="fullscreen"><img src="{{ theme.url }}/img/fullscreen.png"
|
||||
title="Fullscreen" alt="Fullscreen (f)" /></a>
|
||||
</div>
|
||||
<div id="gallery"></div>
|
||||
{% endif %}
|
||||
<div id="gallery"></div>
|
||||
|
||||
{% if album.zip %}
|
||||
<div id="additionnal-infos" class="row">
|
||||
<p>
|
||||
<a href="{{ album.zip }}"
|
||||
title="Download a zip archive with all images">Download ZIP</a>
|
||||
<p><a href="{{ album.zip }}"
|
||||
title="Download a zip archive with all images">Download ZIP</a>
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -68,7 +62,7 @@
|
||||
{%- endif -%}
|
||||
{% endif %}
|
||||
{%- endmacro %}
|
||||
{% if album.medias %}
|
||||
|
||||
<script src="{{ theme.url }}/jquery-3.3.1.min.js"></script>
|
||||
{% if settings.show_map and album.show_map %}
|
||||
<script src="{{ theme.url }}/leaflet/leaflet.js"></script>
|
||||
@@ -246,10 +240,9 @@
|
||||
Galleria.configure({
|
||||
imageCrop: false,
|
||||
transition: "fade",
|
||||
thumbnails: 'lazy'
|
||||
thumbnails: "lazy"
|
||||
});
|
||||
Galleria.run("#gallery", {dataSource: data});
|
||||
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -15,7 +15,6 @@
|
||||
|
||||
{% block content %}
|
||||
<div id="albums">
|
||||
<!-- <h1>Albums</h1> -->
|
||||
<ul>
|
||||
{% for alb in album.albums %}
|
||||
<li><a href="{{ alb.url }}">
|
||||
@@ -25,4 +24,10 @@
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if album.description %}
|
||||
<div id="description">
|
||||
{{ album.description }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -21,22 +21,9 @@
|
||||
<header>
|
||||
<h1><a href="{{ album.index_url }}">{{ index_title }}</a></h1>
|
||||
|
||||
{% if settings.links %}
|
||||
<nav id="menu">
|
||||
<ul>
|
||||
{% for title, link in settings.links %}
|
||||
<li><a href="{{ link }}">{{ title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
{% include 'links.html' %}
|
||||
{% include 'breadcrumb.html' %}
|
||||
{% if album.breadcrumb %}
|
||||
<h2>
|
||||
{%- for url, title in album.breadcrumb -%}
|
||||
<a href="{{ url }}">{{ title }}</a>
|
||||
{%- if not loop.last %} » {% endif -%}
|
||||
{% endfor -%}
|
||||
</h2>
|
||||
<hr>
|
||||
{% endif %}
|
||||
</header>
|
||||
|
||||
214
sigal/themes/photoswipe/static/app.js
Normal file
214
sigal/themes/photoswipe/static/app.js
Normal file
@@ -0,0 +1,214 @@
|
||||
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');
|
||||
@@ -84,18 +84,18 @@ figcaption {
|
||||
padding:2em 0;
|
||||
}
|
||||
|
||||
.menu {
|
||||
#menu {
|
||||
width: 100%;
|
||||
background: #F7F7F7 none repeat scroll 0 0;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
#menu ul {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.menu li {
|
||||
#menu li {
|
||||
display: inline;
|
||||
list-style: none; /* pour enlever les puces sur IE7 */
|
||||
}
|
||||
@@ -204,6 +204,9 @@ footer {
|
||||
footer p {
|
||||
text-align: center;
|
||||
}
|
||||
footer span:not(:last-child):after {
|
||||
content: ' - ';
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
h1 {
|
||||
|
||||
@@ -1,2 +1,103 @@
|
||||
<!-- generated from album -->
|
||||
{% extends "album_list.html" %}
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block extra_head %}
|
||||
<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>
|
||||
<link rel="stylesheet" href="{{ theme.url }}/photoswipe.css">
|
||||
<link rel="stylesheet" href="{{ theme.url }}/default-skin/default-skin.css">
|
||||
{% endblock extra_head %}
|
||||
|
||||
{% 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" %}
|
||||
<figure class="gallery__img--{{ "main" if loop.first else "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.url if loop.first else media.thumbnail }}"
|
||||
alt="{{ media.url }}" itemprop="thumbnail" title="{{ media.exif.datetime }}" />
|
||||
</a>
|
||||
<figcaption itemprop="caption description">{{ media.title }} - {{ media.exif.datetime }}</figcaption>
|
||||
</figure>
|
||||
{% 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 %}
|
||||
<!-- 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 src="{{ theme.url }}/app.js"></script>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,404 +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>
|
||||
|
||||
{% if settings.links %}
|
||||
<div class="menu">
|
||||
<ul>
|
||||
{% for title, link in settings.links %}
|
||||
<li><a href="{{ link }}">{{ title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% 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>
|
||||
{% endif %}
|
||||
|
||||
{% 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>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
38
sigal/themes/photoswipe/templates/base.html
Normal file
38
sigal/themes/photoswipe/templates/base.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<!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">
|
||||
{% block extra_head %}{% endblock extra_head %}
|
||||
<link rel="stylesheet" href="{{ theme.url }}/styles.css">
|
||||
{% 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">
|
||||
{% include 'breadcrumb.html' %}
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
{% if album.description %}
|
||||
<div id="description" class="row">
|
||||
{{ album.description }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% include 'footer.html' %}
|
||||
{% block extra_footer %}{% endblock %}
|
||||
</div>
|
||||
{% include 'piwik.html' %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -1 +1,4 @@
|
||||
Title: in"title"
|
||||
Order: 01
|
||||
|
||||
in"description
|
||||
|
||||
Reference in New Issue
Block a user