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: '

' }, @@ -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('
'); + + $('.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"