How to Popup Images Using a Custom Module in Beaver Builder

Posted by Ronald Huereca / March 4, 2019 /

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' );

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  );
	}
}

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,
	});
});

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
Developer at MediaRon
Ronald Huereca is the CEO of MediaRon LLC and enjoys WordPress plugin and theme development.

Connect with the Author

Posted in

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top