Gallery fix

bower.json

@@ -15,7 +15,7 @@
   ],
   "dependencies": {
     "bootstrap-sass": "bootstrap-sass-official#^3.3.7",
-    "slick-carousel": "^1.6.0",
+    "slick-carousel": "^1.4.1",
     "slick-lightbox": "^0.2.10"
   }
 }

publichealth/home/templates/home/article_page.html

@@ -1,8 +1,14 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags %}
+{% load static wagtailcore_tags %}
 
 {% block body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %}
 
+{% block extra_css %}
+		<link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-carousel/slick/slick.scss' %}">
+		<link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-carousel/slick/slick-theme.scss' %}">
+		<link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-lightbox/src/styles/slick-lightbox.sass' %}">
+{% endblock %}
+
 {% block content %}
 <section id="news-details" class="article-page">
   <div class="container">

publichealth/home/templates/home/photo_gallery.html

@@ -1,38 +1,15 @@
 {% load compress static wagtailcore_tags wagtailimages_tags %}
-{% compress js %}
-<script src="{% static 'libs/jquery/dist/jquery.js' %}"></script>
-<script src="{% static 'libs/slick-carousel/slick/slick.min.js' %}"></script>
-<script src="{% static 'libs/slick-lightbox/dist/slick-lightbox.js' %}"></script>
-<script type="text/javascript" src="{% static 'js/main.js' %}"></script>
-{% endcompress %}
-
-{% block extra_css %}
-		<link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-carousel/slick/slick.scss' %}">
-    <link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-carousel/slick/slick-theme.scss' %}">
-    <link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-lightbox/src/styles/slick-lightbox.sass' %}">
-{% endblock %}
 
 <!-- Gallery Template -->
 
-<div id="lazy" class="row">
+<div class="carousel-inner carousel-gallery slick" role="listbox">
 {% for block in page.gallery %}
   {% for val in block.value %}
-
+		<div class="item">
-  {% image val.image height-400 as carouselimagedata %}
+			{% image val.image fill-700x400 as entry_thumb %}
-  <a class="thumbnail" href="{{ carouselimagedata.url }}" data-caption="{{ val.caption }}">
+			{% image val.image original as entry_photo %}
-    {% image val.image height-400 %}
+			<image data-src="{{ entry_photo.url }}" style="background-image:url({{ entry_thumb.url }})">
-  </a>
+		</div>
-
   {% endfor %}
 {% endfor %}
 </div>
-
-<script type="text/javascript">
-  $('#lazy').slickLightbox({
-    src: 'src',
-    itemSelector: 'img',
-    lazy: true,
-    useHistoryApi: 'true'
-  });
-  console.log($('#lazy').slickLightbox);
-</script>

publichealth/static/css/modules/_banner.scss

@@ -93,49 +93,6 @@ $banner-height: 700px;
   padding-top: 0 !important;
   padding-bottom: 0em;
 
-  .carousel-inner {
-    padding-bottom: 2.5em;
-
-    .item  {
-      height: $banner-height;
-      position: relative;
-      background-color: white;
-
-      img {
-        width: 100%;
-        height: $banner-height;
-        overflow: hidden;
-        display: block;
-        background-size: cover;
-        background-position: center;
-        opacity: 1;
-
-      }
-      .carousel-caption {
-        background-color: white;
-        padding: 2em;
-        bottom: -2em;
-        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-
-        h3 {
-          margin-top: 0;
-        }
-        p:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-    .slick-dots {
-      bottom: 50px;
-
-      li {
-        margin: 0;
-        button {
-          box-shadow: none;
-        }
-      }
-    }
-  }
   h3, p, button {
     color: #333;
     text-shadow: none;
@@ -155,6 +112,49 @@ $banner-height: 700px;
     margin-top: 2em;
   }
 }
+.carousel-inner {
+  padding-bottom: 2.5em;
+
+  .item  {
+    height: $banner-height;
+    position: relative;
+    background-color: white;
+
+    img {
+      width: 100%;
+      height: $banner-height;
+      overflow: hidden;
+      display: block;
+      background-size: cover;
+      background-position: center;
+      opacity: 1;
+
+    }
+    .carousel-caption {
+      background-color: white;
+      padding: 2em;
+      bottom: -2em;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+
+      h3 {
+        margin-top: 0;
+      }
+      p:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  .slick-dots {
+    bottom: 50px;
+
+    li {
+      margin: 0;
+      button {
+        box-shadow: none;
+      }
+    }
+  }
+}
 .arrow {
   color: white;
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
@@ -192,6 +192,21 @@ $banner-height: 700px;
   color: inherit;
 }
 
+// Carousel gallery
+$gallery-height: 400px;
+.carousel-inner {
+  padding-bottom: 2.5em;
+
+  .item  {
+    height: $gallery-height;
+
+    img {
+      width: 100%; // TODO: reduce width to try to use the Variable Width slick configuration
+      height: $gallery-height;
+    }
+  }
+}
+
 @include max-screen(1000px) {
   .slick-dots { display: none !important; }
 }

publichealth/static/js/main.js

@@ -5,18 +5,40 @@ $(document).ready(function() {
 		return this.hostname && this.hostname !== location.hostname;
 	}).attr('target', '_blank');
 
-	// Initialise front page carousel component
+	if ($('#carousel-banner').length) {
-	$('.carousel-inner.slick').slick({
+		// Initialise front page carousel component
-		autoplay: true,
+		$('.carousel-inner').slick({
-		autoplaySpeed: '10000',
+			autoplay: true,
-		dots: true,
+			autoplaySpeed: '10000',
-		infinite: true,
+			dots: true,
-		speed: 1000,
+			infinite: true,
-		fade: true,
+			speed: 1000,
-		cssEase: 'linear',
+			fade: true,
-		prevArrow: '<span class="arrow left glyphicon glyphicon-chevron-left" aria-hidden="true">Previous</span>',
+			cssEase: 'linear',
-		nextArrow: '<span class="arrow right glyphicon glyphicon-chevron-right" aria-hidden="true">Next</span>',
+			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>',
+		});
+
+	} else if ($('.carousel-gallery').length) {
+		// Load gallery component
+		$('.carousel-gallery').slick({
+			autoplay: false,
+			dots: false,
+			fade: false,
+			infinite: true,
+		  slidesToShow: 1,
+		  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',
+		  // lazy: true,
+		  // useHistoryApi: 'true'
+		});
+	}
+
+
 
 	// Pastel colors on live news
 	// $('.feedpage-body .panel').each(function() {

publichealth/templates/base.html

@@ -33,6 +33,7 @@
             <script src="{% static 'libs/jquery/dist/jquery.js' %}"></script>
             <script src="{% static 'libs/bootstrap-sass/assets/javascripts/bootstrap.min.js' %}"></script>
             <script src="{% static 'libs/slick-carousel/slick/slick.min.js' %}"></script>
+            <script src="{% static 'libs/slick-lightbox/dist/slick-lightbox.js' %}"></script>
         {% endblock %}
 
         {% compress js %}