From f0793f5518b7fba66b5ceffe4f94dac56f9f08e1 Mon Sep 17 00:00:00 2001
From: khashashin <khashashin@gmail.com>
Date: Thu, 14 Sep 2017 14:53:19 +0200
Subject: [PATCH] added slickLightbox function to mobile view

---
 publichealth/home/templates/home/photo_gallery.html |  2 +-
 publichealth/static/css/main.scss                   |  1 -
 publichealth/static/css/modules/_banner.scss        |  2 --
 publichealth/static/js/main.js                      | 10 +++++++++-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/publichealth/home/templates/home/photo_gallery.html b/publichealth/home/templates/home/photo_gallery.html
index a4c75e1..9b1f1a9 100644
--- a/publichealth/home/templates/home/photo_gallery.html
+++ b/publichealth/home/templates/home/photo_gallery.html
@@ -18,7 +18,7 @@
   {% for val in block.value %}
 		<div class="item">
 			{% image val.image fill-700x400 as entry_thumb %}
-			<image style="background-image:url({{ entry_thumb.url }})">
+			<image data-src="{{ entry_thumb.url }}" data-caption="{{ val.caption }}" style="background-image:url({{ entry_thumb.url }})">
 		</div>
   {% endfor %}
 {% endfor %}
diff --git a/publichealth/static/css/main.scss b/publichealth/static/css/main.scss
index 320f585..48304c3 100644
--- a/publichealth/static/css/main.scss
+++ b/publichealth/static/css/main.scss
@@ -42,7 +42,6 @@ $slider-nav: 200px;
 
 .arrow:before {
     font-size: 45px;
-    /* border: 2px solid grey; */
     padding: 58px 0 88px 0;
     background-color: rgba(128, 128, 128, 0.57);
     margin: 0;
diff --git a/publichealth/static/css/modules/_banner.scss b/publichealth/static/css/modules/_banner.scss
index 6b01f87..9ee43c3 100644
--- a/publichealth/static/css/modules/_banner.scss
+++ b/publichealth/static/css/modules/_banner.scss
@@ -128,7 +128,6 @@ $banner-height: 700px;
       background-size: cover;
       background-position: center;
       opacity: 1;
-
     }
     .carousel-caption {
       background-color: white;
@@ -217,5 +216,4 @@ $gallery-height: 550px;
     .carousel-caption { left: 0px; right: 0px; overflow-x: hidden; }
     .carousel-inner { margin-bottom: 0px; }
   }
-  //#banner { margin-top: 100px; }
 }
diff --git a/publichealth/static/js/main.js b/publichealth/static/js/main.js
index c061eb9..c3ca638 100644
--- a/publichealth/static/js/main.js
+++ b/publichealth/static/js/main.js
@@ -30,9 +30,12 @@ $(document).ready(function() {
 		}).slickLightbox({
 		  src: 'data-src',
 		  itemSelector: 'img',
-    	caption: 'caption'
+    	caption: 'caption',
+			captionPosition: 'bottom'
 		});
 	}
+
+	// Slider navigation
 	$('.slider-nav').slick({
 		slidesToShow: 3,
 		slidesToScroll: 1,
@@ -40,6 +43,7 @@ $(document).ready(function() {
 		asNavFor: '.carousel-gallery',
 		centerMode: true,
 		focusOnSelect: true,
+		// Responsive settings
 		responsive: [
 		{
 			breakpoint: 768,
@@ -62,6 +66,10 @@ $(document).ready(function() {
 	],
 		prevArrow: '<span class="arrow left glyphicon glyphicon-chevron-left" aria-hidden="true">Previous</span>',
 		nextArrow: '<span class="arrow right glyphicon glyphicon-chevron-right" aria-hidden="true">Next</span>',
+	}).slickLightbox({
+		src: 'data-src',
+		itemSelector: 'img',
+		caption: 'caption'
 	});