changed gallery, added slider and preview

publichealth/home/templates/home/photo_gallery.html

@@ -13,3 +13,14 @@
   {% endfor %}
 {% endfor %}
 </div>
+<div class="carousel-inner slider-nav">
+{% for block in page.gallery %}
+  {% for val in block.value %}
+		<div class="item">
+			{% image val.image fill-700x400 as entry_thumb %}
+			{% image val.image original as entry_photo %}
+			<image data-src="{{ entry_photo.url }}" style="background-image:url({{ entry_thumb.url }})">
+		</div>
+  {% endfor %}
+{% endfor %}
+</div>

publichealth/static/css/main.scss

@@ -14,3 +14,16 @@ body {
 @include mid-screen($screen-sm-min, $screen-md-min) {
   body { margin-top: 200px; }
 }
+$slider-nav: 200px;
+.slider-nav {
+  padding-bottom: 2.5em;
+
+  .item  {
+    height: $slider-nav;
+
+    img {
+      width: 90%;
+      height: $slider-nav;
+    }
+  }
+}

publichealth/static/css/modules/_banner.scss

@@ -193,9 +193,10 @@ $banner-height: 700px;
 }
 
 // Carousel gallery
-$gallery-height: 400px;
+
+$gallery-height: 550px;
 .carousel-inner {
-  padding-bottom: 2.5em;
+  padding-bottom: 0;
 
   .item  {
     height: $gallery-height;

publichealth/static/css/paper/bootstrap.css

@@ -6238,7 +6238,7 @@ button.close {
 .carousel {
   position: relative;
 }
-.carousel-inner {
+/*.carousel-inner {
   position: relative;
   overflow: hidden;
   width: 100%;
@@ -6313,7 +6313,7 @@ button.close {
 }
 .carousel-inner > .active.right {
   left: 100%;
-}
+}*/
 .carousel-control {
   position: absolute;
   top: 0;

publichealth/static/js/main.js

@@ -22,14 +22,11 @@ $(document).ready(function() {
 	} else if ($('.carousel-gallery').length) {
 		// Load gallery component
 		$('.carousel-gallery').slick({
-			autoplay: false,
+			slidesToShow: 1,
-			dots: false,
+			slidesToScroll: 1,
-			fade: false,
+			arrows: false,
-			infinite: true,
+			fade: true,
-		  slidesToShow: 1,
+			asNavFor: '.slider-nav'
-		  centerMode: true,
-			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',
@@ -37,7 +34,16 @@ $(document).ready(function() {
 		  // useHistoryApi: 'true'
 		});
 	}
-
+	$('.slider-nav').slick({
+		slidesToShow: 3,
+		slidesToScroll: 1,
+		asNavFor: '.carousel-gallery',
+		dots: true,
+		centerMode: true,
+		focusOnSelect: true,
+		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>',
+	});
 
 
 	// Pastel colors on live news