WordPress Integration

Last updated: March 2, 2026

This article covers how to add Zoomora to a WordPress site — including enqueueing the assets, initialising the plugin, and using it with the block editor, classic editor, and Elementor.

Enqueueing the Assets

The recommended way to load Zoomora in WordPress is via functions.php using wp_enqueue_style() and wp_enqueue_script().

Option A — CDN (No Download Required)

Load Zoomora directly from jsDelivr:

function my_theme_enqueue_zoomora() {
    wp_enqueue_style(
        'zoomora',
        'https://cdn.jsdelivr.net/npm/zoomora/dist/zoomora.css',
        [],
        '1.2.1'
    );

    wp_enqueue_script(
        'zoomora',
        'https://cdn.jsdelivr.net/npm/zoomora/dist/zoomora.umd.min.js',
        [],
        '1.2.1',
        true // Load in footer
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_zoomora' );

Option B — Self-Hosted (Recommended for Production)

Download the dist files, place them in your theme, and enqueue locally:

function my_theme_enqueue_zoomora() {
    wp_enqueue_style(
        'zoomora',
        get_template_directory_uri() . '/assets/zoomora/zoomora.css',
        [],
        '1.2.1'
    );

    wp_enqueue_script(
        'zoomora',
        get_template_directory_uri() . '/assets/zoomora/zoomora.umd.min.js',
        [],
        '1.2.1',
        true // Load in footer
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_zoomora' );

For a child theme, replace get_template_directory_uri() with get_stylesheet_directory_uri().

Initialising Zoomora

After enqueueing the script, initialise Zoomora with an inline script. Add this to the same functions.php function after enqueueing:

wp_add_inline_script( 'zoomora', '
    document.addEventListener("DOMContentLoaded", function() {
        new Zoomora({
            transition: "fade",
            showCounter: true,
            showThumbnails: true,
            closeOnBackgroundClick: true
        });
    });
' );

The DOMContentLoaded listener ensures Zoomora initialises only after the page HTML is fully parsed.

Adding Images in the Block Editor (Gutenberg)

In the block editor, use the HTML block or add custom HTML to your image markup. The easiest approach is the Image block with custom CSS class and manual data attributes added via the Additional CSS Class field or a Custom HTML block:

Using a Custom HTML Block

Insert a Custom HTML block and add your image with the required attributes:

<img src="/wp-content/uploads/photo-thumb.jpg"
     data-src="/wp-content/uploads/photo-full.jpg"
     data-zoomora="my-gallery"
     data-caption="My photo caption"
     alt="Photo description"
     class="zoomora-trigger">

Using a Gallery Block

WordPress gallery blocks generate standard <img> tags. To use Zoomora with them, add a filter to append data-zoomora and data-src attributes to gallery images in functions.php:

function my_theme_zoomora_gallery_images( $html, $attachment_id ) {
    $full_src = wp_get_attachment_image_url( $attachment_id, 'full' );
    $html = str_replace(
        '<img ',
        '<img data-src="' . esc_url( $full_src ) . '" data-zoomora="wp-gallery" ',
        $html
    );
    return $html;
}
add_filter( 'wp_get_attachment_image', 'my_theme_zoomora_gallery_images', 10, 2 );

Adding Images in the Classic Editor

In the classic editor, switch to the Text tab and add your image with the required attributes directly:

<img src="https://yoursite.com/wp-content/uploads/photo-thumb.jpg"
     data-src="https://yoursite.com/wp-content/uploads/photo-full.jpg"
     data-zoomora="post-gallery"
     data-caption="Photo caption"
     alt="Photo">

Using with Elementor

In Elementor, use an Image widget or HTML widget:

Image Widget

Add an Image widget
In the Link field, set the link to the full-size image URL
Switch to the Advanced tab → Custom Attributes
Add the following attributes:
- data-src → full image URL
- data-zoomora → your gallery name
- data-caption → your caption (optional)

HTML Widget

For full control, use an HTML widget and paste your markup directly:

<img src="https://yoursite.com/wp-content/uploads/photo-thumb.jpg"
     data-src="https://yoursite.com/wp-content/uploads/photo-full.jpg"
     data-zoomora="elementor-gallery"
     data-caption="Photo caption"
     alt="Photo">

Using with a Plugin

If you prefer not to edit functions.php, you can create a simple plugin file instead. Create a file called zoomora-loader.php in wp-content/plugins/zoomora-loader/ with the following content:

<?php
/**
 * Plugin Name: Zoomora Loader
 * Description: Loads the Zoomora lightbox plugin
 * Version: 1.0.0
 */

function zoomora_enqueue_assets() {
    wp_enqueue_style(
        'zoomora',
        'https://cdn.jsdelivr.net/npm/zoomora/dist/zoomora.css',
        [],
        '1.2.1'
    );

    wp_enqueue_script(
        'zoomora',
        'https://cdn.jsdelivr.net/npm/zoomora/dist/zoomora.umd.min.js',
        [],
        '1.2.1',
        true
    );

    wp_add_inline_script( 'zoomora', '
        document.addEventListener("DOMContentLoaded", function() {
            new Zoomora();
        });
    ' );
}
add_action( 'wp_enqueue_scripts', 'zoomora_enqueue_assets' );

Activate the plugin from WordPress Admin → Plugins and Zoomora will be available across your entire site.

Important Notes

No jQuery dependency. Zoomora is pure vanilla JavaScript and does not require jQuery. It will not conflict with WordPress’s bundled jQuery.

Load the script in the footer. Always pass true as the fifth argument to wp_enqueue_script() to load Zoomora in the footer. This ensures it loads after your content and avoids render-blocking.

Avoid conflicts with other lightbox plugins. If your theme or another plugin already loads a lightbox (Fancybox, Lightbox2, etc.), they may conflict if they both target the same elements. Dequeue the conflicting plugin or limit Zoomora’s selector to specific elements only.

Next Step

Now that Zoomora is running in WordPress, read Configuration Overview to explore all available options and customise the behaviour to suit your project.

Quick Links