Slider for pages implementation

diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js
index 3b03730ef68aa81cf2a1b5000236381df4093032..f1b5fbd3b642f7264975ebc762bb72b69921f35b 100644 (file)
--- a/app/static/src/js/index.js
+++ b/app/static/src/js/index.js
@@ -10,6 +10,7 @@ var Search = require('./modules/search');
 var Summary = require('./modules/summary');
 var OverflowInit = require('./modules/overflow-init');
 var StickyKitInit = require('./modules/sticky-kit-init');
+var LightSliderInit = require('./modules/lightslider-init');
 
 //
 // Init all the modules
@@ -23,3 +24,4 @@ window[Search] = new Search();
 window[Summary] = new Summary();
 window[OverflowInit] = new OverflowInit();
 window[StickyKitInit] = new StickyKitInit();
+window[LightSliderInit] = new LightSliderInit();

diff --git a/app/static/src/js/modules/lightslider-init.js b/app/static/src/js/modules/lightslider-init.js
new file mode 100644 (file)
index 0000000..0534187
--- /dev/null
+++ b/app/static/src/js/modules/lightslider-init.js
@@ -0,0 +1,31 @@
+var LightSliderInit = function() {
+
+    //
+    // Init
+    //
+    this.init();
+
+};
+
+LightSliderInit.prototype.init = function() {
+
+    var that = this;
+
+    $('[data-slider-page]').lightSlider({
+        autoWidth: true,
+        item: 4,
+        pager: false,
+        responsive: [
+            {
+                breakpoint: 752,
+                settings: {
+                    autoWidth: false,
+                    item: 1
+                }
+            }
+        ]
+    });
+
+};
+
+module.exports = LightSliderInit;

diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index b82ae6ad03571055d5bf6fbe49f5d94344f28718..c877e6b1e425db3f7d207c36c7121b476c77ab6f 100755 (executable)
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -8,6 +8,9 @@
 @import 'boxes/article-box';
 @import 'boxes/page-box';
 
+// Sliders
+@import 'sliders/slider-page';
+
 // Page modules
 @import 'breadcrumb';
 @import 'pagination';

diff --git a/app/static/src/sass/modules/sliders/_slider-page.scss b/app/static/src/sass/modules/sliders/_slider-page.scss
new file mode 100644 (file)
index 0000000..bd6c823
--- /dev/null
+++ b/app/static/src/sass/modules/sliders/_slider-page.scss
@@ -0,0 +1,54 @@
+$module: ".slider-page";
+
+#{$module} {
+
+    //
+    // Layout
+    //
+
+    &.lightSlider {
+
+        @include margin-top(3);
+        @include margin-bottom(3);
+
+        @include mq($until: sm) {
+            @include margin-top(1);
+        }
+
+    }
+
+    //
+    // Slides
+    //
+
+    &__slide {
+        visibility: hidden;
+        .lightSlider & {
+            visibility: visible;
+        }
+
+    }
+
+    //
+    // Images
+    //
+
+    &__img {
+
+        @include mq($until: sm) {
+            width: 100%;
+        }
+
+    }
+
+    &__caption {
+
+        font-weight: weight(light);
+        @include font-size(xs);
+        @include line-height(1.25);
+
+        text-align: center;
+
+    }
+
+}

diff --git a/app/static/src/sass/vendors/_all.scss b/app/static/src/sass/vendors/_all.scss
index c27525ffcde28c05b134be760f0c2b37aa205854..ad347e0c47f8907604fb373135e3ea085eeb6a3e 100755 (executable)
--- a/app/static/src/sass/vendors/_all.scss
+++ b/app/static/src/sass/vendors/_all.scss
@@ -1 +1,2 @@
 @import "slick";
+@import "lightslider";

diff --git a/app/static/src/sass/vendors/_lightslider.scss b/app/static/src/sass/vendors/_lightslider.scss
new file mode 100644 (file)
index 0000000..25c59e7
--- /dev/null
+++ b/app/static/src/sass/vendors/_lightslider.scss
@@ -0,0 +1,11 @@
+.lSAction {
+
+    > a {
+        opacity: 1;
+        @include transition(all 0.15s ease-in-out);
+        &:hover {
+            width: 60px;
+        }
+    }
+
+}

diff --git a/app/templates/core/inc/slider.html b/app/templates/core/inc/slider.html
index 522598ddaa25654e1df63b945ae947b95a2e875e..3fe426c59909e0898ab1902960f4b05562714ed7 100644 (file)
--- a/app/templates/core/inc/slider.html
+++ b/app/templates/core/inc/slider.html
@@ -1,5 +1,17 @@
-{% for image in slider_images %}
-{{ image.description }}<br/>
-<img src="{{ MEDIA_URL}}{{ image.file }}" alt="" /><br/>
-{{ image.credits }}<br/>
-{% endfor %}
+{% load mezzanine_tags %}
+<ul class="slider-page" data-slider-page>
+    {% for image in slider_images %}
+        <li class="slider-page__slide">
+            <img title="{{ image.title }}" alt="{{ image.title }} {{ image.description }} {{ image.credits }}" class="slider-page__img" src="{{ MEDIA_URL}}{% thumbnail image.file 0 520 %}" alt="" /><br />
+            <div class="slider-page__caption">
+                {{ image.title }}
+                {% if image.description %}
+                    | {{ image.description }}
+                {% endif %}
+                {% if image.credits %}
+                    | {{ image.credits }}
+                {% endif %}
+            </div>
+        </li>
+    {% endfor %}
+</ul>

diff --git a/app/templates/includes/footer_scripts.html b/app/templates/includes/footer_scripts.html
index fe192a9e65baca0a2e3e59f1ca26e27af044116f..c4d82a3ea9209ebdf9a29e204786fb16099b5b7c 100644 (file)
--- a/app/templates/includes/footer_scripts.html
+++ b/app/templates/includes/footer_scripts.html
@@ -1,10 +1,11 @@
 {% load mezzanine_tags i18n staticfiles %}
 
 {% compress js %}
-    <script src="{% static "vendors/jquery/dist/jquery.min.js" %}"></script>
+    <script src="{% static "vendors/jquery/jquery.js" %}"></script>
     <script src="{% static "vendors/overflow.js/js/overflow.js" %}"></script>
     <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 "js/index.min.js" %}"></script>
 {% block extra_js %}{% endblock %}
 {% editable_loader %}