How to Popup Images Using a Custom Module in Beaver Builder

person feeding the beaver
Photo by Martin Krchnacek on Unsplash

I’m in love with Beaver Builder, but one area where I was struggling was how to popup images in a lightbox with Beaver Builder with my custom modules. Here’s a quick tutorial showing you how.

First, let’s assume the constants are set

In the beginning of my module creation, I set the base URLs. You’ll change these to reflect your module.

define( 'MEDIARON_BEAVER_BUILDER_DIR', plugin_dir_path( __FILE__ ) );
define( 'MEDIARON_BEAVER_BUILDER_URL', plugins_url( '/', __FILE__ ) );
define( 'MEDIARON_BEAVER_BUILDER_VERSION', '1.1.0' );Code language: PHP (php)

Inside my module’s constructor, I set the path to my custom JavaScript (which I’ll share in a moment) that adds the lightbox CSS/JavaScript.

Enqueue the CSS/JavaScript in your module

My example module constructor is below:

<?php
class MediaRon_Restaurant_Menu_Item_Add_Module extends FLBuilderModule {
	public function __construct()
	{
		parent::__construct(array(
			'name'            => __( 'Restaurant Menu Item', 'mediaron-bb-modules' ),
			'description'     => __( 'Add menu item for a restaurant', 'mediaron-bb-modules' ),
			'category'        => __( 'Restaurant', 'mediaron-bb-modules' ),
			'group'           => __( 'MediaRon Modules', 'mediarion-bb-modules' ),
			'dir'             => MEDIARON_BEAVER_BUILDER_DIR . 'modules/restaurant-menu-item/',
			'url'             => MEDIARON_BEAVER_BUILDER_URL . 'modules/restaurant-menu-item/',
			'editor_export'   => true, // Defaults to true and can be omitted.
			'enabled'         => true, // Defaults to true and can be omitted.
			'partial_refresh' => false, // Defaults to false and can be omitted.
		));

		$this->add_css( 'jquery-magnificpopup' );
		$this->add_js('mediaron-restaurant-items-for-beaver-builder', MEDIARON_BEAVER_BUILDER_URL . 'modules/restaurant-menu-item/js/frontend.js', array( 'jquery', 'jquery-magnificpopup' ), MEDIARON_BEAVER_BUILDER_VERSION  );
	}
}Code language: PHP (php)

All I do is add my own JavaScript with a dependency for jquery-magnificpopup and add the CSS using the same handle.

Finally, the JavaScript

And here’s the JavaScript to get it done.

jQuery(function() {
	jQuery('.mediaron-restaurant-item-photo-lightbox').magnificPopup({
		type: 'image',
		closeOnContentClick: true,
		closeBtnInside: false,
	});
});Code language: JavaScript (javascript)

You’d replace the selector (in my case .mediaron-restaurant-item-photo-lightbox) with your own and you should be set.

Any questions? Leave a comment below and I’ll be sure to respond.

Ronald Huereca
Ronald Huereca

Ronald Huereca

Ronald has been part of the WordPress community since 2006, starting off writing and eventually diving into WordPress plugin development and writing tutorials and opinionated pieces.

No stranger to controversy and opinionated takes on tough topics, Ronald writes honestly when he covers a topic.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Ronald Huereca
MediaRon - Ronald Huereca

Ronald created MediaRon in 2011 and has more than fifteen years of releasing free and paid WordPress plugins.

Quick Links

Say Hi