Merge pull request #18 from khashashin/gallery

added slickLightbox function to mobile view

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 %}

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;

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; }
 }

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'
 	});