diff --git a/_config.yml b/_config.yml index 57cbdc4bdb..bf703f71fb 100644 --- a/_config.yml +++ b/_config.yml @@ -517,6 +517,11 @@ math: # To install 3.x: https://github.com/theme-next/theme-next-fancybox3 fancybox: false +# A JavaScript library for zooming images like Medium. +# Do not enable both `fancybox` and `mediumzoom`. +# Dependencies: https://github.com/theme-next/theme-next-mediumzoom +mediumzoom: false + # Polyfill to remove click delays on browsers with touch UIs. # Dependencies: https://github.com/theme-next/theme-next-fastclick fastclick: false @@ -1005,6 +1010,12 @@ vendors: fancybox: fancybox_css: + # Internal version: 1.0.4 + # See: https://github.com/francoischalifour/medium-zoom + # Example: + # mediumzoom: //cdn.jsdelivr.net/npm/medium-zoom@1/dist/medium-zoom.min.js + mediumzoom: + # Internal version: 1.0.6 # See: https://github.com/ftlabs/fastclick # Example: diff --git a/layout/_partials/head/head.swig b/layout/_partials/head/head.swig index fa6ed20f00..ff0527eb25 100644 --- a/layout/_partials/head/head.swig +++ b/layout/_partials/head/head.swig @@ -98,6 +98,7 @@ back2top: {{ theme.back2top | json_encode }}, copycode: {{ theme.codeblock.copy_button | json_encode }}, fancybox: {{ theme.fancybox }}, + mediumzoom: {{ theme.mediumzoom }}, fastclick: {{ theme.fastclick }}, lazyload: {{ theme.lazyload }}, tabs: {{ theme.tabs.enable }}, diff --git a/layout/_scripts/vendors.swig b/layout/_scripts/vendors.swig index 42ae238061..e2fe9a7aff 100644 --- a/layout/_scripts/vendors.swig +++ b/layout/_scripts/vendors.swig @@ -27,6 +27,10 @@ {% set js_vendors.fancybox = 'fancybox/source/jquery.fancybox.pack.js' %} {% endif %} +{% if theme.mediumzoom %} + {% set js_vendors.mediumzoom = 'mediumzoom/medium-zoom.min.js' %} +{% endif %} + {% if theme.canvas_nest.enable %} {% if theme.canvas_nest.onmobile %} {% set canvas_nest_uri = url_for(theme.vendors._internal + '/canvas-nest/canvas-nest.min.js') %} diff --git a/source/js/next-boot.js b/source/js/next-boot.js index 28ecca10e2..ca83cc85ea 100644 --- a/source/js/next-boot.js +++ b/source/js/next-boot.js @@ -7,7 +7,7 @@ $(document).ready(function() { * Need to add config option in Front-End at 'layout/_partials/head.swig' file. */ CONFIG.fastclick && NexT.utils.isMobile() && window.FastClick.attach(document.body); - CONFIG.lazyload && NexT.utils.lazyLoadPostsImages(); + CONFIG.lazyload && window.lozad('.post-body img').observe(); NexT.utils.registerESCKeyEvent(); @@ -27,6 +27,7 @@ $(document).ready(function() { }); CONFIG.fancybox && NexT.utils.wrapImageWithFancyBox(); + CONFIG.mediumzoom && window.mediumZoom('.post-body img'); CONFIG.copycode.enable && NexT.utils.registerCopyCode(); CONFIG.tabs && NexT.utils.registerTabsTag(); diff --git a/source/js/utils.js b/source/js/utils.js index 1628145ce3..c4e2aeae3d 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -3,7 +3,7 @@ NexT.utils = { /** - * Wrap images with fancybox support. + * Wrap images with fancybox. */ wrapImageWithFancyBox: function() { $('.content img') @@ -45,10 +45,6 @@ NexT.utils = { }); }, - lazyLoadPostsImages: function() { - lozad('.content img').observe(); - }, - /** * One-click copy code support. */