From 01afa5aa3feb5f2231de99a1303b80f617b3b32a Mon Sep 17 00:00:00 2001
From: root <root@studio.camp>
Date: Sat, 23 Dec 2017 12:19:35 +0000
Subject: [PATCH] related photos

---
 content/templates/base.html                   | 34 ++++++-----
 .../templates/photologue/gallery_detail.html  | 15 +++--
 .../templates/photologue/photo_detail.html    | 61 +++++++++----------
 3 files changed, 57 insertions(+), 53 deletions(-)

diff --git a/content/templates/base.html b/content/templates/base.html
index 0f351af..0aa4559 100644
--- a/content/templates/base.html
+++ b/content/templates/base.html
@@ -51,25 +51,31 @@
     <script src="{% static "js/jquery.bxslider.js" %}"></script>
     <script type="text/javascript">
       $(document).ready(function(){
-        var slider = $('.slider1').bxSlider({
+        slider = $('.slider1').bxSlider({
           adaptiveHeight : true,
           pager : false,
         });
 
-
-      $(document).keydown(function(e){
-        if (e.keyCode == 39) // Right arrow 
-            {
-            slider.goToNextSlide();
-                return false;
-            }
-       else if (e.keyCode == 37) // left arrow
-            {
-                 slider.goToPrevSlide();
-                return false;
-           }
+        document.querySelectorAll('.select-image').forEach(function(a) {
+            a.onclick = function(event) {
+                event.preventDefault();
+                slider.goToSlide(this.dataset.id)
+            };
+        });
+
+        $(document).keydown(function(e){
+            if (e.keyCode == 39) // Right arrow 
+                {
+                    slider && slider.goToNextSlide();
+                    return false;
+                }
+            else if (e.keyCode == 37) // left arrow
+                {
+                    slider && slider.goToPrevSlide();
+                    return false;
+               }
+            });
         });
-      });
     </script>
 
   </body>
diff --git a/content/templates/photologue/gallery_detail.html b/content/templates/photologue/gallery_detail.html
index c1d8368..807b295 100644
--- a/content/templates/photologue/gallery_detail.html
+++ b/content/templates/photologue/gallery_detail.html
@@ -4,16 +4,15 @@
 {% block title %}{{ gallery.title }}{% endblock %}
 
 {% block content %}
-	<div class="row col-lg-12">
+    <div class="row col-lg-12">
         <h1 class="page-header">{{ gallery.title }}</h1>
         <p class="muted"><small>{% trans "Published" %} {{ gallery.date_added }}</small></p>
         {% if gallery.description %}{{ gallery.description|safe }}{% endif %}
-	    {% for photo in gallery.public %}
-	        <a href="{{ photo.get_absolute_url }}">
-	             <img src="{{ photo.get_thumbnail_url }}" class="thumbnail" alt="{{ photo.title }}">
-	        </a>
-	    {% endfor %}
+        {% for photo in gallery.public %}
+            <a href="{{ photo.get_absolute_url }}">
+                 <img src="{{ photo.get_thumbnail_url }}" class="thumbnail" alt="{{ photo.title }}">
+            </a>
+        {% endfor %}
         <div><a href="{% url 'photologue:gallery-list' %}" class="btn btn-default">{% trans "View all galleries" %}</a></div>
-	</div>
-
+    </div>
 {% endblock %}
diff --git a/content/templates/photologue/photo_detail.html b/content/templates/photologue/photo_detail.html
index 771992c..d3177f9 100644
--- a/content/templates/photologue/photo_detail.html
+++ b/content/templates/photologue/photo_detail.html
@@ -7,43 +7,42 @@
 {% for gallery in object.public_galleries %}
     <div class="row">
         <div class="medium-9 columns">
-        {% if gallery.content.exists %}
-        <h6 class="page-header"><a href="{{ gallery.content.all.0.get_absolute_url }}">Back to {{ gallery.content.all.0.title }}</a></h6>
-        {% endif %}
-		  <h5>{{ gallery.title }}</h5>
-              <ul class="slider1">
-                    {% for photo.pk in gallery.public %}
-                        <li>  
-                            <img src="{{ photo.get_display_url }}" alt="{{ photo.title }}">
-                            <br /> <p>{{ photo.caption|safe }} <a href="{{ photo.image.url }}"> Link to original file </a> </p>
-                        </li>
-                        {% for photo in gallery.public %}
-                        <li>  
-                            <img src="{{ photo.get_display_url }}" alt="{{ photo.title }}">
-                            <br /> <p>{{ photo.caption|safe }} <a href="{{ photo.image.url }}" target="_blank" > Link to original file </a> </p>
-                        </li>
-                        {% endfor %}
-                    {% endfor %}
-                 </ul>            
-        }
+            {% if gallery.content.exists %}
+            <h6 class="page-header"><a href="{{ gallery.content.all.0.get_absolute_url }}">Back to {{ gallery.content.all.0.title }}</a></h6>
+            {% endif %}
+            <h5>{{ gallery.title }}</h5>
+            <ul class="slider1">
+                {% for photo in gallery.public %}
+                <li id="slide-{{photo.slug}}">
+                    <img src="{{ photo.get_display_url }}" alt="{{ photo.title }}">
+                    <p>
+                        {{ photo.caption|safe }}
+                        {% if photo.caption %}<br>{%endif%}
+                        <a href="{{ photo.image.url }}" target="_blank" >Link to original file</a>
+                    </p>
+
+                </li>
+                {% endfor %}
+            </ul>
         </div>
         <div class="medium-3 columns">
             {% if object.public_galleries %}
+                <br>
                 <p>{% trans "Other photos" %}:</p>
-                <table>
+                <div>
                         {% for photo in gallery.public %}
-                        <tr>
-                        <td><a href="{{ photo.get_absolute_url }}">
-                        <img src="{{ photo.get_thumbnail_url }}" class="thumbnail" alt="{{ photo.title }}"></a></td>
-                        <td>
-                        <p>{{ photo.caption|safe }} {{ photo.count }} </p>
-                        </td>
-                        </tr>
-	                    {% endfor %}
-				</table>
-			{% endif %}
-            {% endfor %}
+                        <div style="float: left; padding: 4px">
+                            <a href="{{ photo.get_absolute_url }}" class="select-image" data-id="{{forloop.counter}}">
+                                <img src="{{ photo.get_thumbnail_url }}" class="thumbnail" alt="{{ photo.title }}">
+                            </a>
+                        </div>
+                        {% endfor %}
+                </div>
+            {% endif %}
         </div>
     </div>
+{% endfor %}
+<script>
+</script>
 
 {% endblock %}