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
|
Options
|
Example
|
Description
|
|
Text
|
text="Click Here"
|
The text you would like to click for the popup to appear.
|
|
Popup Width
|
popwidth="400px"
|
The maximum width for the popup. The default width will be set to 500px if you don't add the option into the shortcode.
|
|
Popup Height
|
popheight="300px"
|
The maximum height for the popup. The default height will be set to 500px if you don't add the option into the shortcode.
|
|
URL
|
url="https://www.youtube.com/embed/VIDEO_ID"
|
The URL to display in an iframe (for videos, external pages, etc.).
|
|
Class
|
class="my-custom-class"
|
Add custom CSS class to the popup link for styling.
|
Animation Options (Inline Parameters)
These parameters override the global plugin settings for individual popups:
|
Options
|
Example
|
Description
|
|
Open Effect
|
open_effect="fade"
|
Override opening animation: "none", "fade", or "elastic".
|
|
Close Effect
|
close_effect="elastic"
|
Override closing animation: "none", "fade", or "elastic".
|
|
Open Speed
|
open_speed="500"
|
Override opening speed in milliseconds.
|
|
Close Speed
|
close_speed="500"
|
Override closing speed in milliseconds.
|
|
Fit to View
|
fittoview="1"
|
Override fit to view setting: "1" for ON, "0" for OFF.
|
Option for Image and Overlay
|
Options
|
Example
|
Description
|
|
Image
|
image="images/corporate/small/1.jpg"
|
The image you would like to click for the popup to appear.
|
|
Image Width
|
imgwidth="300px"
|
Custom width for the image thumbnail.
|
|
Image Height
|
imgheight="200px"
|
Custom height for the image thumbnail.
|
|
Alt Tags
|
alt="Image Alt Tag"
|
The alternative text for the image. Add it for best SEO results.
|
|
Overlay Text
|
overlaytext="Sandra Clarke"
|
The text you would like to show for image overlay.
|
|
Overlay Background Color
|
overlaybgcolor="#333333"
|
The background color you would like to have for image overlay.
|
|
Overlay Opacity
|
overlayopacity="0.7"
|
The background color opacity you would like to have for image overlay. Ranges from (0.1 to 0.9)
|
|
Overlay Text Color
|
overlaytextcolor="#ffffff"
|
The color of overlay text. The default is #ffffff (white)
|
|
Overlay Padding
|
overlaypadding="10px"
|
The padding around the overlay text and icon.
|
|
Overlay Text Font Size
|
overlayfontsize="18px"
|
The font size of overlay text.
|
|
Overlay Text Border
|
overlaytextborder="2"
|
The thickness of border you would like to have around the overlay text. The default it 0.
|
|
Overlay Always Visible
|
overlay="true"
|
If you want to show the overlay without hovering then you can set overlay to true
|
FontAwesome Icons and Classes
|
Options
|
Example
|
Description
|
|
Icons
|
icon="fa-info-circle"
|
The icon you would like to show inside the button or image overlay. Supports Font Awesome icons. You can use formats like "fa-comment", "fas fa-plus", "far fa-star", etc. Browse Icons |
|
Class
|
class="imgmargin-10" |
You can assign your own class or any of our predefined class. |
Predefined Classes
| Type |
Class Name |
| Red Button |
ibtn ibtn-red |
| Orange Button |
ibtn ibtn-orange |
| Blue Button |
ibtn ibtn-blue |
| Grey Button |
ibtn ibtn-grey |
| Green Button |
ibtn ibtn-green |
| Yellow Button |
ibtn ibtn-yellow |
| Violet Button |
ibtn ibtn-violet |
| Dark Blue Button |
ibtn ibtn-dark-blue |
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!
