added vanilla js slideshow to jrnl template for smaller photos

3 files changed, 8 insertions, 3 deletions

diff --git a/app/posts/templates/posts/jrnl_detail.html b/app/posts/templates/posts/jrnl_detail.html
index e34a825..ee5590b 100644
--- a/app/posts/templates/posts/jrnl_detail.html
+++ b/app/posts/templates/posts/jrnl_detail.html
@@ -27,7 +27,7 @@
                 </div>
             </header>
             <div class="e-content entry-content post-body" itemprop="articleBody">
-                {{object.body_html|safe|smartypants}}
+                {{object.body_html|safe|smartypants|widont}}
             </div>
         {%if wildlife or object.field_notes.all or object.books.all %}<div class="entry-footer">{%if wildlife %}
             <aside id="wildlife">
@@ -117,5 +117,10 @@
 {% block js %}
 <script src="/media/js/leaflet-master/leaflet-mod.js"></script>
 <script src="/media/js/detail.min.js"></script>
+<script src="/media/js/fslightbox.js"></script>
+<script>
+    fsLightbox.props.type = "image";
+    fsLightbox.props.showThumbsOnMount = true;
+</script>
 {{ block.super }}
 {%endblock%}
diff --git a/templates/lib/img_cluster.html b/templates/lib/img_cluster.html
index 8117298..e405db1 100644
--- a/templates/lib/img_cluster.html
+++ b/templates/lib/img_cluster.html
@@ -1,6 +1,6 @@
 {% load get_image_by_size %}{%if cluster_class != "picwide"%}<span class="{{cluster_class}}">{%endif%}
 {% if caption %}<figure {%if cluster_class != "picwide"%}class="{{cluster_class}}"{%endif%}>{%endif%}
-    <a href="{%get_image_by_size image "original"%}" title="view larger image">
+    <a data-fslightbox href="{%get_image_by_size image "original"%}" title="view larger image">
         <img {%if cluster_class == "picwide"%} class="picwide"
                         sizes="(max-width: 1439px) 100vw, (min-width: 1440px) 1440px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.slug %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}
                         {% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size.slug%}"{%endif%}{%endfor%}
diff --git a/templates/lib/img_picwide.html b/templates/lib/img_picwide.html
index 871a97e..8f25a84 100644
--- a/templates/lib/img_picwide.html
+++ b/templates/lib/img_picwide.html
@@ -1,5 +1,5 @@
 {% load get_image_by_size %}{% if caption or exif or image.photo_credit_source %}<figure{%if not is_cluster %} class="picwide" id="{{image.id}}"{%endif%}>{%else%}{%if not is_cluster %}<div class="picwide" id="{{image.id}}">{%endif%}{%endif%}
-        <a itemscope itemtype="http://schema.org/ImageObject" href="{%get_image_by_size image "original"%}" title="view larger image">
+        <a data-fslightbox itemscope itemtype="http://schema.org/ImageObject" href="{%get_image_by_size image "original"%}" title="view larger image">
             <img class="u-photo" itemprop="contentUrl" sizes="(max-width: 1439px) 100vw, (min-width: 1440px) 1440px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.slug %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size.slug %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}Scott Gilbertson{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}>
         </a>
 {% if caption or exif or image.photo_credit_source %}<figcaption>{% endif %}{% if caption %}{{image.caption|safe}}{% endif %}{% if exif %} | <small>Camera: {{image.exif_make}} {{image.exif_model}} with {{image.exif_lens}}</small>{% endif %}{% if image.photo_credit_source %}{%if caption or exif %} | {%endif%}image by {% if image.photo_credit_url %}<a href="{{image.photo_credit_url}}" itemprop="author">{%endif%}{{image.photo_credit_source}}{% if image.photo_credit_url %}</a>{%endif%}{%endif%}{% if caption or exif or image.photo_credit_source %}</figcaption>