Gallery with Popup window for Gutenberg in WordPress.
But, as it turned out, it is convenient to only upload images to the gallery. And other aspects of working with images cause inconvenience during processing.
And the gallery itself for the front office displays just a list of pictures, even without the popup window, which has long been a must have on all sites. This, of course, is about the boxed version of wordpress, with the standard twentytwentytwo theme at the moment.
So, the task is to bolt a popup window to this gallery with minimal processing of a list of ready images for the front office. To solve it we need a plugin that will process the list of images and load them into Fancybox library with usual js script. We will take the latest Fancybox version at the moment v4
So, here is the code for a ready-made plugin that will simply load js scripts to handle the DOM model:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<?php /** * The plugin bootstrap file * * This file is read by WordPress to generate the plugin information in the plugin * admin area. This file also includes all of the dependencies used by the plugin, * registers the activation and deactivation functions, and defines a function * that starts the plugin. * * * @wordpress-plugin * Plugin Name: popup-gallery * Plugin URI: https://webproggi.com/ * Description: Set popup option for gallery * Version: 1.0.0 * Author: Webproggi * Author URI: https://webproggi.com/ * License: GPL-2.0+ * License URI: http://www.gnu.org/licenses/gpl-2.0.txt */ // If this file is called directly, abort. if ( ! defined( 'WPINC' ) ) { die; } /** * Class PopupGallery */ class PopupGallery { public static $instance; /** * PopupGallery constructor. */ private function __construct() { add_action('init', [$this, 'run']); } public function enqueueMain() { $jsName = 'js/fancybox.umd.js'; $jsPath = sprintf('%s%s', plugin_dir_path(__FILE__), $jsName); wp_enqueue_script('popup-gallery', sprintf('%s%s', plugin_dir_url(__FILE__), $jsName), array( 'jquery' ), filemtime($jsPath)); $jsName = 'js/popup-gallery.js'; $jsPath = sprintf('%s%s', plugin_dir_path(__FILE__), $jsName); wp_enqueue_script('popup-gallery-src', sprintf('%s%s', plugin_dir_url(__FILE__), $jsName), [], filemtime($jsPath)); $cssName = 'css/fancybox.css'; $cssPath = sprintf('%s%s', plugin_dir_path(__FILE__), $cssName); wp_enqueue_style('popup-gallery', sprintf('%s%s', plugin_dir_url(__FILE__), $cssName), [], filemtime($cssPath)); $cssName = 'css/style.css'; $cssPath = sprintf('%s%s', plugin_dir_path(__FILE__), $cssName); wp_enqueue_style('popup-gallery-style', sprintf('%s%s', plugin_dir_url(__FILE__), $cssName), [], filemtime($cssPath)); } /** * @return PopupGallery */ public static function getInstance() { if (!self::$instance instanceof self) { self::$instance = new self(); } return self::$instance; } public function run() { $this->enqueueMain(); } } PopupGallery::getInstance(); |
The js itself looks like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
jQuery(document).ready(function() { jQuery('figure.wp-block-gallery figure.wp-block-image').each(function( index ) { let innerImg = jQuery(this).find('img'); let a = innerImg.attr( "srcset" ); let imgPathArrayDrty = a.split(", "); let imgPathArray = imgPathArrayDrty[0].split(" "); // take last array with large image let wrapperA = "<a data-fancybox='gallery' class='" + jQuery(this).attr("class") + "' href='" + imgPathArray[0] + "'>" + innerImg[0].outerHTML + "</a>"; jQuery(this).replaceWith(wrapperA); }); Fancybox.bind('[data-fancybox="gallery"]', { }); }); |
You can see from it, that we take the figure element and replace it with the desired structure of the reference element a.
The structure before:
The structure after:
As a result, we have this popup window when you click on a gallery item.
This option of page processing with the help of js can be used, but rarely. Since the block structure may change depending on some parameters of the gallery when editing the record. And for each such change you will need to modify the code handler.
And of course it will be much easier if you just download a well-tested plugin Classic Editor
You can download the plugin here: popup-gallery