Easy Popup

Installation

After downloading the EasyPopup_UNZIP.zip file, UNZIP it. You will be able to find a installation file and a ReadMe.txt file.

• For Joomla 4.x, 5.x, and 6.x install : plg_sys_popup_X.x.zip

Go to Extensions > Extension Manager and click on the Upload Package File Tab.

Click on browse to choose the correct installation file and click on "Upload and Install"

Setup

After installation go to Extensions > Plugin Manager. On the Search Bar type System - Easy Popup. Now click on the System - Easy Popup to configure the plugin. Upon clicking you will be able to see the following with default "Plugin Settings" Tab opened.

In the plugin tab set status to "Enabled" and do the settings for other tabs. You can also use the "Shortcode Examples" tab to quickly copy ready-to-use shortcodes.

Plugin Settings

In the plugin settings you can control the different types of closing and opening with the popup speed. These are global settings that apply to all popups unless overridden by inline parameters.

• Opening Effect : The effect in which the popup will appear/open/show when the image or text is clicked. We have 3 effects : None, Fade and Elastic.
• Fit to View When set to ON the popup will be responsive and fit to tablets and mobile devices.
• Closing Effect : The effect in which the popup will close/hide. Options: None, Fade, and Elastic.
• Opening Speed The time in milliseconds which will take the popup to show. Default is 1000ms.
• Closing Speed The time in milliseconds which will take the popup to hide. Default is 1000ms.

Note: You can override these global settings for individual popups using inline parameters in the shortcode (e.g., open_effect="fade", close_effect="elastic", open_speed="500", close_speed="500", fittoview="1").

Styling Settings

The popup styling will remain same for all the popups that you will have in the website. You can't have different popup styling in a single website, but you can customize individual popup dimensions and some effects using inline parameters.

• Background Color : Select the background color of the popup using the color picker. The opacity can be set using the picker. The field supports rgba format.
• Background Pattern Style : Choose a pattern from a list of 10 predefined pattern styles. Set to none if you don't want any background patterns.
• Popup Background Color: Option to choose the background color of the popup using color picker.
• Popup Text Color: Choose the color of the text inside the popup.
• Close button Style: Choose close button style from the list of 10 predefined styles.
• Font Awesome : Set it to Yes if you want to use icons for text and images for the buttons or image overlay. The plugin will automatically load Font Awesome if it's not already present on your site. You can also set it to No if font awesome is already loading into your website through your template or any other extension that you are using. You can check it by going to the source code in browser and searching for the word "font-awesome".
• Extra CSS Styles: Define the extra CSS styles you would like to add for the plugin.

Shortcode Examples

The plugin includes a built-in Shortcode Examples tab in the plugin configuration with 20+ ready-to-use shortcode examples. Simply navigate to the tab, find the example you need, and click the "Copy" button to copy it to your clipboard.

The examples include:

• Simple text popups
• Image popups with overlays
• Video popups (YouTube, Vimeo)
• Animation effects
• Custom dimensions
• Button-styled popups
• Gallery popups
• HTML content popups
• Contact forms
• And many more...

After copying, paste the shortcode into any Joomla article, module, or component and customize the values as needed.

Plugin Shortcodes

You can add the plugin shortcode inside any joomla article, modules or components depending upon your requirements. Using the plugin you can popup text, image, iframe, youtube videos upon clicking a text or an image.

General Options

Animation Options (Inline Parameters)

These parameters override the global plugin settings for individual popups:

Option for Image and Overlay

FontAwesome Icons and Classes

Predefined Classes

Examples

Simple Text Popup with Custom Animation

Shortcode

{popup text="Fade Animation Popup" open_effect="fade" close_effect="fade" open_speed="500" close_speed="500" popwidth="500px" popheight="300px"}Your popup content goes here{/popup}

Text to HTML Popup

Shortcode

{popup text="Simple Text Popup" popwidth="500px" popheight="300px"} <img style="float:left;margin-right:5px;" src="/images/corporate/small/1.jpg"/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.{/popup}

Icon with Text to HTML Popup

Shortcode

{popup text="Icon Text Popup" icon="fa-plus" popwidth="500px" popheight="300px"}Your content here{/popup}

Image Popup with Custom Size

Shortcode

{popup image="images/photo.jpg" alt="Photo Description" imgwidth="300px" imgheight="200px"}Your content here{/popup}

Image with Advanced Overlay

Shortcode

{popup image="images/photo.jpg" overlaytext="View Image" icon="fa-eye" overlaybgcolor="#000" overlaytextcolor="#fff" overlayopacity="0.8" overlaypadding="10px" overlayfontsize="16px" overlaytextborder="2"}Your content here{/popup}

YouTube Video Popup

Shortcode

{popup url="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" text="Watch Video" icon="fa-play" popwidth="853px" popheight="480px"}{/popup}

Vimeo Video Popup

Shortcode

{popup url="https://player.vimeo.com/video/VIDEO_ID" text="Watch on Vimeo" popwidth="800px" popheight="450px"}{/popup}

Button Style Popup

Shortcode

{popup class="ibtn ibtn-yellow" icon="fa-comment" text="Click Me" popwidth="600px" popheight="300px"}Your content here{/popup}

Tip: For more examples, check the "Shortcode Examples" tab in the plugin configuration!

How to

How to add font awesome icons to buttons and images?

Go to the font awesome website (Font Awesome) and choose the icon you would like to display. For example if you are looking for a info icon, then get the class for it by clicking on it. icon="fa-info" has to be added into the plugin syntax to show info icon.

The plugin supports multiple Font Awesome formats:

• icon="fa-comment" (short format)
• icon="fas fa-plus" (solid style)
• icon="far fa-star" (regular style)
• icon="fab fa-facebook" (brands style)

How to override global settings for individual popups?

You can override the global plugin settings (opening effect, closing effect, speeds, fit to view) for individual popups by adding inline parameters to the shortcode:

{popup text="Custom Popup" open_effect="fade" close_effect="elastic" open_speed="500" close_speed="800" fittoview="1"}Your content{/popup}

How to write shortcode faster?

Use the built-in Shortcode Examples tab in the plugin configuration! Simply navigate to Extensions > Plugins > System - Easy Popup, click on the "Shortcode Examples" tab, find the example you need, and click the "Copy" button. Then paste it into your article or module and customize the values as needed.

You can also copy the shortcode directly from the examples in the "Plugin Shortcodes" tab above and set the values as per your requirements.