From 5f47cdc9d7de7fbb097a1d799ab71151d814fa9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Fri, 31 Aug 2018 17:10:29 +0200
Subject: [PATCH] Turn content sliders into lightbox galleries

---
 .../Resources/Private/Assets/js/app.js        |  5 ---
 .../Private/Partials/ContentSlider.html       | 31 ++++++++++++++-----
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/app.js b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/app.js
index db809e3f..dd2bfdb8 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/app.js
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/app.js
@@ -238,11 +238,6 @@ new Vue({
                 prevArrow: sliderPrevArrow,
                 nextArrow: sliderNextArrow
             });
-            $('.slider--content').on('click', '.slider__thumb', function (e) {
-                e.preventDefault();
-                let slideIndex = $(this).data('slide');
-                $(this).closest('.slider').find('.slider__items').slick('slickGoTo', slideIndex);
-            });
         },
         initHeaderSlider () {
             $('.slider--header').not('.slider--disabled').slick({
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/ContentSlider.html b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/ContentSlider.html
index 4e42657b..5aa2abf4 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/ContentSlider.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/ContentSlider.html
@@ -1,21 +1,38 @@
 {namespace v=FluidTYPO3\Vhs\ViewHelpers}
+<f:comment>
+    This content element was implemented as a slider initially and has been turned into a lightbox gallery.
+    ToDo: Adjust naming accordingly
+</f:comment>
 <div class="slider slider--content">
-    <div id="carousel-{id}" class="slider__items">
-        <f:for each="{images}" as="image" iteration="iteration">
-            <f:link.typolink parameter="{image.originalResource.link}" class="slider__item">
-                <img class="slider__image" src="{f:uri.image(src: image.uid, treatIdAsReference: 1, crop: image.crop, width: '770', height: '430c+100')}" alt="{image.alternative}" title="{image.title}">
-            </f:link.typolink>
-        </f:for>
+    <div class="slider__items">
+        <f:alias map="{image: images.0}">
+            <a href="#" data-trigger="gallery-{id}">
+                <f:image image="{image}" crop="{image.crop}" width="770" height="430c+100"
+                         class="slider__image" alt="{image.alternative}" title="{image.title}"/>
+            </a>
+        </f:alias>
     </div>
     <f:if condition="{thumbnails}">
         <f:if condition="{images -> f:count()} > 1">
             <div class="slider__thumbs hidden-sm hidden-xs">
                 <f:for each="{images}" as="image" iteration="iteration">
                     <f:if condition="{iteration.cycle} <= 5">
-                        <a href="#" class="slider__thumb" data-slide="{iteration.index}"><img src="{f:uri.image(src: image.uid, treatIdAsReference: 1, crop: image.crop, width: '150', height: '85c+100')}" class="img-responsive" alt="{image.alternative}" title="{image.title}"></a>
+                        <a href="{f:uri.image(image: image, crop: image.crop, maxWidth: '2560')}"
+                           data-fancybox="gallery-{id}" class="slider__thumb">
+                            <f:image image="{image}" crop="{image.crop}" width="150" height="85c+100"
+                                     class="img-responsive" alt="{image.alternative}" title="{image.title}"/>
+                        </a>
                     </f:if>
                 </f:for>
             </div>
         </f:if>
     </f:if>
+    <div class="slider__zoom" style="display: none">
+        <f:for each="{images}" as="image" iteration="iteration">
+            <f:if condition="{iteration.cycle} > 5">
+                <a data-fancybox="gallery-{id}" href="{f:uri.image(image: image, crop: image.crop, maxWidth: '2560')}"
+                   title="{image.title}">{iteration.index}</a>
+            </f:if>
+        </f:for>
+    </div>
 </div>