Add LightGallery to sliders

diff --git a/app/static/src/js/modules/lightsliderpage-init.js b/app/static/src/js/modules/lightsliderpage-init.js
index 0221d471c2f9e126550f225e38c46a9ad3db604f..b9cc712fae98e8d30e39222a672c1bf808720ac7 100644 (file)
--- a/app/static/src/js/modules/lightsliderpage-init.js
+++ b/app/static/src/js/modules/lightsliderpage-init.js
@@ -46,6 +46,11 @@ LightSliderPageInit.prototype.init = function() {
                     container = $(el),
                     children = container.children();
 
+                    el.lightGallery({
+                        selector: '.slider-page .lslide',
+                        download: false
+                    });
+
                     children.each(function () {
                         var childHeight = $(this).height();
                         if (childHeight > maxHeight) {

diff --git a/app/templates/base.html b/app/templates/base.html
index 09a5e8406eeb77650bffe26d2a2d06b0acd9d830..ae095072b4f0797153e0ffc282ebf34636295b85 100644 (file)
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -34,6 +34,7 @@
     {% compress css %}
     <link rel="stylesheet" href="{% static "vendors/font-awesome/css/font-awesome.css" %}">
     <link rel="stylesheet" href="{% static "vendors/lightslider/dist/css/lightslider.css" %}">
+    <link rel="stylesheet" href="{% static "vendors/lightgallery/dist/css/lightgallery.css" %}">
     <link rel="stylesheet" href="{% static "vendors/pushy/css/pushy.css" %}">
     <link rel="stylesheet" href="{% static "vendors/video.js/dist/video-js.css" %}">
     <link rel="stylesheet" href="{% static "css/index.min.css" %}">

diff --git a/app/templates/core/inc/slider.html b/app/templates/core/inc/slider.html
index 34b2130c87947f89aa6a325783a3e47c45f5760b..16eba10afaf7e74ab9d437266c28467f99e4d661 100644 (file)
--- a/app/templates/core/inc/slider.html
+++ b/app/templates/core/inc/slider.html
@@ -2,7 +2,7 @@
 <div class="page__slider">
     <ul class="slider-page" data-slider-page>
         {% for image in slider_images %}
-            <li class="slider-page__slide">
+            <li class="slider-page__slide" data-src="{{ MEDIA_URL }}{{ image.file }}">
                 <div class="slider-page__wrapper">
                     <img title="{{ image.title }}" alt="{{ image.title }} {{ image.description }} {{ image.credits }}" class="slider-page__img" src="{{ MEDIA_URL}}{% thumbnail image.file 0 520 %}" alt="" />
                     <div class="slider-page__caption">

diff --git a/app/templates/includes/footer_scripts.html b/app/templates/includes/footer_scripts.html
index d8603f1f1f223a8c68a2a3e648943bd83b65bace..d8341263650a9c0d1bdf8f8dbb8a60e14b9367fb 100644 (file)
--- a/app/templates/includes/footer_scripts.html
+++ b/app/templates/includes/footer_scripts.html
@@ -6,6 +6,7 @@
     <script src="{% static "vendors/sticky-kit/jquery.sticky-kit.js" %}"></script>
     <script src="{% static "vendors/jquery-throttle-debounce/jquery.ba-throttle-debounce.js" %}"></script>
     <script src="{% static "vendors/lightslider/dist/js/lightslider.js" %}"></script>
+    <script src="{% static "vendors/lightgallery/dist/js/lightgallery.js" %}"></script>
     <script src="{% static "vendors/imagesloaded/imagesloaded.pkgd.js" %}"></script>
     <script src="{% static "vendors/pushy/js/pushy.js" %}"></script>
     <script src="{% static "vendors/video.js/dist/video.js" %}"></script>