Using 3rd party plug-ins

espenmn · October 11, 2017, 2:55pm

I made an add on : https://github.com/espenmn/medialog.magneticpopup

( scroll to bottom: Pop up images in Plone 5? and read )

espenmn/medialog.magneticpopup/blob/master/src/medialog/magneticpopup/profiles/default/registry.xml

<?xml version="1.0"?>
<registry>

  <records prefix="plone.bundles/magneticpopup"
            interface='Products.CMFPlone.interfaces.IBundleRegistry'>
    <value key="enabled">True</value>
    <value key="jscompilation">++plone++magneticpopup/magnetic-popup.js</value>
    <value key="csscompilation">++plone++magneticpopup/magnetic-popup.css</value>
    <value key="last_compilation">2019-11-26 00:00:00</value>
    <value key="compile">False</value>
    <value key="depends">jquery</value>
  </records>

  <records interface="medialog.magneticpopup.interfaces.IMagneticPopupSettings">
      <value key="image_size">large</value>
      <value key="popup_classes">img.image-popup, figure img, img.image-inline, img.image-left, img.image-right</value>
  </records>    
 
</registry>

and

github.com

espenmn/medialog.magneticpopup/blob/master/src/medialog/magneticpopup/browser/static/magnetic-popup.js

require([
    'jquery',
    '++plone++magneticpopup/jquery.magnific-popup-min'
], function($) {
   var el = document.querySelector('body');
   var image_size = el.getAttribute('data-popup-imagesize');
   var popup_classes = el.getAttribute('data-popup-imageclasses');
   $(popup_classes).magnificPopup({
    type: 'image',
    cursor: 'mfp-zoom-out-cur', 
    mainClass: 'mfp-with-zoom', 
    gallery: {
			enabled: true,
			navigateByImgClick: true,
			preload: [0,1] // Will preload 0 - before current, and 1 after the current image
	},
    zoom: {
    enabled: true, // By default it's false, so don't forget to enable it
    duration: 200, // duration of the effect, in milliseconds
    easing: 'ease-in-out', // CSS transition easing function

This file has been truncated. show original

might help

PS: Notice that require([ does NOT include .js (jquery.magnetic-popup-min, not query.magnetic-popup.min.js )