Op-207 fix fancybox zoom (#711)

* Revert "Remove afterShow callback for mod_collection fancybox (#707)" This reverts commit e64a9f2. * Properly fix fancybox compatibility issue And rename file so it seems less specific to Hart Co-authored-by: Colin de Roos <colin@driebit.nl>
driebit · Sep 2, 2022 · 5a54c1e · 5a54c1e
1 parent 2081e38
commit 5a54c1e
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git 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;
+	}
+}
diff --git a/...ginger_collection/lib/js/beeldenzoeker.js → ...er_collection/lib/js/images-collection.js b/...ginger_collection/lib/js/beeldenzoeker.js → ...er_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
@@ -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"