Drupal Popup Image Functionality for fields and inline images

Recently We got an interesting requirement to implement very smooth image zoom functionality. Really it was very smooth zoom behavior when they show it in the demo.

We searched a lot of jquery plugins to match the behaviors and finally found the plugin called Magnific Popup. It has the exact same zooming effect and behaviors. And one more interesting part is this there is available a Drupal module that is implemented in this library for drupal.

We decided to use the module for our solutions, unfortunately, it supports Images which is uploaded through Fields, We need this in CKEDITOR images too. Actually, we need this as a Checkbox to Enable / Disable the Feature on Image upload in CKEDITOR. So that users can have the option to enable it wherever they need.

First, we have installed the Drupal magnific popup module and configured it to enable image fields which will enable the features of the image fields. Then decided to implement/extend the functionality to the CKEDITOR images. It goes well. And we going to give back this implementation to the Drupal community as a patch for the magnific popup module.

A few small interesting tweaks are also there in the implementation. Which is applying the smooth transition effect and Zoom out the images on Scroll

Actually, when the user enabled the option on image upload we just added a special class in the image element, So the rendered image will always have the class. We can initialize the effect for the class. The below code shows you that.

$(context).find('.ckeditor-magnific-popup').once('mfp-processed').each(function () {
 var mag = $(this).magnificPopup({
   type: 'image',
   mainClass: 'mfp-with-zoom', // this class is for CSS animation below
   closeOnContentClick: true,
   callbacks: {},
   zoom: {
     enabled: true, // By default it's false, so don't forget to enable it
     duration: 300, // duration of the effect, in milliseconds
     easing: 'ease-in-out', // CSS transition easing function
     // The "opener" function should return the element from which popup will be zoomed in
     // and to which popup will be scaled down
     // By defailt it looks for an image tag:
     opener: function (openerElement) {
       // openerElement is the element on which popup was initialized, in this case its <a> tag
       // you don't need to add "opener" option if this code matches your needs, it's defailt one.
       return openerElement.is('img') ? openerElement : openerElement.find('img');
     }
   }
 });
});

Above code we enabled the zoom options while initialization and some extra CSS will add smooth transitions to the zoom effect.

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
 opacity: 0;
 -webkit-backface-visibility: hidden;
 /* ideally, transition speed should match zoom duration */
 -webkit-transition: all 0.3s ease-out;
 -moz-transition: all 0.3s ease-out;
 -o-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out; }

.mfp-with-zoom.mfp-ready .mfp-container {
 opacity: 1; }

.mfp-with-zoom.mfp-ready.mfp-bg {
 opacity: 0.9; }

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
 opacity: 0; }

And the small js code will do the Close zoom on the scroll

// Close Magnific Popup on scroll
$('body').on('mousewheel DOMMouseScroll touchmove', function (e) {
 if ($('.mfp-close').length > 0) {
   $('.mfp-close').click();
 }
});

Touchmove event will trigger this on touch devices.

Conclusion:

Atlast, it was a great experience to play with the Magnific popup library and module One more thing I took reference from The Editor advanced Image module which gives extra options (class, id, attributes) to the Editor image. Implemented it in the same way they did. I hope it gives you a few new things to you.