rik/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Alter photo gallery with direct linking to slideshow

Browse Source
This commit is contained in:
Rik Veenboer
2017-01-17 15:37:00 +00:00
parent 531469c9fe
commit 0b2b339793
7 changed files with 41 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -1,5 +1,7 @@
/private
/.jekyll-metadata
/_asset
/_site
/_python
/_php
/Gemfile.lock

3
_config.yml
View File

@@ -45,4 +45,5 @@ photo_sizes:
- [96, 96]
exclude:
- LICENSE
- README
- README
array: []

7
_includes/gallery.html
View File

@@ -5,6 +5,11 @@
<a href="/{{ site.baseurl }}/gallery/{{ include.gallery }}/">[ gallery ]</a><br />
{% endunless %}
{% for photo in photos %}
<a href="/{{ site.baseurl }}/{{ photo.url }}" style="display: inline-block; margin: 3px; text-decoration: none;"><img alt="Photo: {{ photo.title }}" height="96" src="{{ site.asset_prefix }}/gallery/{{ include.gallery }}/{{ photo.name | remove:'.md' }}~96x96.jpg" title="{{ photo.title }}" width="96" style="padding: 1px;" /></a>
{% if false != gallery.slideshow %}
{% capture url %}{{ include.gallery }}/slideshow.html#{{ photo.name }}{% endcapture %}
{% else %}
{% capture url %}{{ photo.url }}{% endcapture %}
{% endif %}
<a href="/{{ site.baseurl }}/gallery/{{ url }}" style="display: inline-block; margin: 3px; text-decoration: none;"><img alt="Photo: {{ photo.title }}" height="96" src="{{ site.asset_prefix }}/gallery/{{ include.gallery }}/{{ photo.name | remove:'.md' }}~96x96.jpg" title="{{ photo.title }}" width="96" style="padding: 1px;" /></a>
{% endfor %}
</div>

2
_includes/header.html
View File

@@ -49,7 +49,7 @@
superSearch({
searchFile: '/blog/atom.xml'
});
}
}
</script>
</head>
<body class="layout-{{ page.layout }}{% if page.body_class %} {{ page.body_class }}{% endif %}">

7
_layouts/gallery-index.html
View File

@@ -45,7 +45,12 @@ layout: default
<div class="list-gallery">
{% for photo in page.photos %}
<span itemprop="image" itemscope itemtype="http://schema.org/Photograph">
<a href="/{{ site.baseurl }}/{{ photo.url }}" itemprop="url">
{% if false != page.slideshow %}
{% capture url %}slideshow.html#{{ photo.name }}{% endcapture %}
{% else %}
{% capture url %}/{{ site.baseurl }}/{{ photo.url }}{% endcapture %}
{% endif %}
<a href="{{ url }}" itemprop="url">
<img alt="Photo: {{ photo.title }}" height="200" src="{{ site.asset_prefix }}/gallery/{{ page.gallery }}/{{ photo.name }}~200x200.jpg" title="{{ photo.title }}" width="200" />
</a>
</span>

8
_layouts/gallery-photo.html
View File

@@ -51,10 +51,14 @@ layout: default
{% else %}
{% assign file='640w' %}
{% endif %}
{% if false != page.slideshow %}
{% capture url %}slideshow.html#{{ photo.name }}{% endcapture %}
{% else %}
{% capture url %}{{ photo_url }}~{{ file }}.jpg{% endcapture %}
{% endif %}
<p style="text-align: center;">
<a href="{{ photo_url }}~{{ file }}.jpg"><img alt="Photo: {{ photo.title }}" src="{{ photo_url }}~{{ file }}.jpg" style="max-width:630px;" /></a>
<a href="{{ url }}"><img alt="Photo: {{ photo.title }}" src="{{ photo_url }}~{{ file }}.jpg" style="max-width:630px;" /></a>
</p>
{% if photo.description %}
<div itemprop="description">
{{ photo.description }}

28
_layouts/gallery-slideshow.html
View File

@@ -43,8 +43,10 @@
<body>
<section>
<h1>{{ page.title }}</h1>
{% assign photo_names = site.array %}
{% for photo in page.photos %}
<div class="photo" style="border-radius:2px;display:inline-block;margin:4px;overflow:hidden;">
{% assign photo_names = photo_names | push:photo.name %}
{% capture photo_url %}{{ site.asset_prefix }}/gallery/{{ page.gallery }}/{{ photo.name }}{% endcapture %}
{% if photo.width %}
{% assign width=photo.width %}
@@ -52,17 +54,18 @@
{% assign width=640 %}
{% endif %}
{% assign sizes=''|split:'' %}
{% assign height=width %}
{% assign file='640w' %}
{% assign label='640x360' %}
{% for size in site.photo_sizes %}
{% if size[0] == width %}
{% assign height=size[1] %}
{% if width != 640 %}
{% capture label %}{{ width }}x{{ height }}{% endcapture %}
{% assign file=label %}
{% endif %}
{% endif %}
{% endfor %}
{% capture label %}{{ width }}x{{ height }}{% endcapture %}
{% if width == 640 %}
{% assign file='640w' %}
{% else %}
{% assign file=label %}
{% endif %}
{% endfor %}
<a href="{{ photo_url }}~{{ file }}.jpg" data-size="{{ label }}">
<img src="{{ photo_url }}~200x200.jpg" height="100" alt="{{ photo.title }}" width="100" data-size="200x200" />
</a>
@@ -178,7 +181,6 @@
dom.addEvent('click', function (e) {
openPhotoSwipe(i);
e.preventDefault();
});
@@ -190,8 +192,14 @@
mdom : imgdom
});
});
openPhotoSwipe(0);
index = 0
var photos = ['{{ photo_names | join:"', '" }}'];
if (window.location.hash) {
var hash = window.location.hash.substring(1)
index = Math.max(photos.indexOf(hash), 0)
}
openPhotoSwipe(index)
});
</script>
</body>