How to Popup Images Using a Custom Module in Beaver Builder

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.