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,7 +93,26 @@ $banner-height: 700px;
   padding-top: 0 !important;
   padding-bottom: 0em;
 
-  .carousel-inner {
+  h3, p, button {
+    color: #333;
+    text-shadow: none;
+    text-align: left;
+  }
+
+  p {
+    font-size: 90%;
+    -webkit-hyphens: manual;
+    -ms-hyphens: manual;
+    hyphens: manual;
+  }
+  footer p {
+    color: black;
+    text-align: left;
+    font-size: 110%;
+    margin-top: 2em;
+  }
+}
+.carousel-inner {
   padding-bottom: 2.5em;
 
   .item  {
@@ -135,25 +154,6 @@ $banner-height: 700px;
       }
     }
   }
-  }
-  h3, p, button {
-    color: #333;
-    text-shadow: none;
-    text-align: left;
-  }
-
-  p {
-    font-size: 90%;
-    -webkit-hyphens: manual;
-    -ms-hyphens: manual;
-    hyphens: manual;
-  }
-  footer p {
-    color: black;
-    text-align: left;
-    font-size: 110%;
-    margin-top: 2em;
-  }
 }
 .arrow {
   color: white;
@@ -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,8 +5,9 @@ $(document).ready(function() {
 		return this.hostname && this.hostname !== location.hostname;
 	}).attr('target', '_blank');
 
+	if ($('#carousel-banner').length) {
 		// Initialise front page carousel component
-	$('.carousel-inner.slick').slick({
+		$('.carousel-inner').slick({
 			autoplay: true,
 			autoplaySpeed: '10000',
 			dots: true,
@@ -18,6 +19,27 @@ $(document).ready(function() {
 			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() {
 	// 	var hue = Math.floor(Math.random() * 360);

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