From 5a54c1ebc5830b214d92809df958246de168f54e Mon Sep 17 00:00:00 2001
From: Colin de Roos <8250462+cdfa@users.noreply.github.com>
Date: Fri, 2 Sep 2022 10:50:44 +0200
Subject: [PATCH] Op-207 fix fancybox zoom (#711)

* Revert "Remove afterShow callback for mod_collection fancybox (#707)"

This reverts commit e64a9f2e30a09f6721a68069083029438402045d.

* Properly fix fancybox compatibility issue

And rename file so it seems less specific to Hart

Co-authored-by: Colin de Roos <colin@driebit.nl>
---
 .../lib/css/src/blocks/_fancybox.scss         | 32 +++++++++++++++++++
 ...{beeldenzoeker.js => images-collection.js} | 11 +++++++
 .../templates/_script.tpl                     |  2 +-
 3 files changed, 44 insertions(+), 1 deletion(-)
 rename modules/mod_ginger_collection/lib/js/{beeldenzoeker.js => images-collection.js} (75%)

diff --git a/modules/mod_ginger_collection/lib/css/src/blocks/_fancybox.scss b/modules/mod_ginger_collection/lib/css/src/blocks/_fancybox.scss
index 13c42c1f4..54239a159 100644
--- a/modules/mod_ginger_collection/lib/css/src/blocks/_fancybox.scss
+++ b/modules/mod_ginger_collection/lib/css/src/blocks/_fancybox.scss
@@ -30,3 +30,35 @@
     from { opacity: 1; }
     to   { opacity: 0; }
 }
+
+.zoom-help {
+	display: flex;
+    align-items: center;
+    justify-content: center;
+	width: 70px;
+    height: 70px;
+	position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 100;
+    background: rgba($black,0.5);
+    transform: translate(-50%, -50%);
+    color: $white;
+    animation: fadeOut 2s 1;
+    animation-fill-mode: forwards;
+    animation-delay: 1s;
+    pointer-events: none;
+
+	&:before {
+		@extend .has-icon;
+		@extend .icon--search:before;
+		font-size: 30px;
+	}
+
+	&:after {
+		content: '+';
+		height: 10px;
+		position: absolute;
+		top: 18px;
+	}
+}
\ No newline at end of file
diff --git a/modules/mod_ginger_collection/lib/js/beeldenzoeker.js b/modules/mod_ginger_collection/lib/js/images-collection.js
similarity index 75%
rename from modules/mod_ginger_collection/lib/js/beeldenzoeker.js
rename to modules/mod_ginger_collection/lib/js/images-collection.js
index 17deea92d..853d1f12e 100644
--- a/modules/mod_ginger_collection/lib/js/beeldenzoeker.js
+++ b/modules/mod_ginger_collection/lib/js/images-collection.js
@@ -19,6 +19,7 @@ $(document).ready(function () {
         'scrolling': false,
         "padding": 0,
         'type': 'image',
+        'clickContent': false,
         'tpl': {
             error: '<p class="fancybox-error"></p>'
         },
@@ -36,6 +37,16 @@ $(document).ready(function () {
         beforeLoad: function () {
             /* You can use callbacks to customize or disable title */
             this.title = false;
+        },
+        afterShow: function () {
+            $('.fancybox-inner').prepend('<div class="zoom-help"></div>');
+
+            $('.fancybox-image')
+                .parent()
+                .zoom({
+                    magnify: 1.25,
+                    on: 'click'
+                });
         }
     });
 });
diff --git a/modules/mod_ginger_collection/templates/_script.tpl b/modules/mod_ginger_collection/templates/_script.tpl
index a451fa26c..68769c628 100644
--- a/modules/mod_ginger_collection/templates/_script.tpl
+++ b/modules/mod_ginger_collection/templates/_script.tpl
@@ -1,7 +1,7 @@
 {% lib
     "js/jquery.zoom.min.js"
     "js/back-to-top.js"
-    "js/beeldenzoeker.js"
+    "js/images-collection.js"
     "js/loadmore.js"
     "js/search/components/filters-edge.js"
     "js/search/components/filters-license.js"