Get Started

Pop Any Article v3.2 is distributed as a single install package that includes both the System plugin (popup engine) and the Editor Button plugin (shortcode builder for the article editor).

After downloading the package ZIP, go to System → Install → Extensions, open the Upload Package File tab, choose the file, and click Upload & Install.

• Package file: pkg_popanyarticle_v3.2.zip
• Compatible with: Joomla 4.x, 5.x, and 6.x
• CLI install: php cli/joomla.php extension:install --path=/path/to/pkg_popanyarticle_v3.2.zip

On success, Joomla installs and enables both plugins automatically. You can also install the individual plugin ZIPs from the packages folder inside the build if needed.

After installation, confirm both plugins are enabled:

1. Go to System → Manage → Plugins
2. Search for Pop Any Article
3. Enable System - Pop Any Article (required)
4. Enable Editor Button - Pop Any Article (recommended for the article editor)

Click System - Pop Any Article to open plugin settings. The default Modern (2026) theme is recommended for new sites.

When editing an article, look for the Pop Any Article button in the editor toolbar (TinyMCE / JCE / etc.). It opens a tabbed shortcode builder with live preview.

The Editor Button - Pop Any Article plugin adds a toolbar button while editing articles. Use it instead of typing shortcodes by hand.

Features

• Tabbed builder for text links, buttons, and image triggers
• Live shortcode preview as you change options
• Template gallery (simple link, ibtn buttons, image overlay, hash/lazy/gallery packs)
• Controls for popup size, overlay styling, hash/deep links, lazy load, gallery rel, and showtitle
• One-click insert into the active editor

Requirements

The editor button only appears when the System - Pop Any Article plugin is installed. If the button is missing, enable both plugins and clear Joomla cache.

Plugin parameters

The editor plugin has no front-end settings. All popup behaviour is controlled by the system plugin and by values set in each shortcode.

Core popup behaviour is configured under System - Pop Any Article → Plugin tab.

• Article Title Inside Popup: Show or hide the article title/header bar globally. Override per shortcode with showtitle="true" or showtitle="false".
• Opening / Closing Effect: None, Fade, Zoom (Modern), Slide up, Slide down, or Elastic. Zoom and slide effects are optimised for the Modern theme.
• Opening / Closing Speed: Duration in milliseconds (defaults: 380 ms open, 280 ms close). Values above 500 ms are capped automatically in Modern theme.
• Fit To View: When ON, the popup resizes to fit inside the viewport on tablets and phones.
• Hash / Deep Links: When ON, opening a popup updates the URL hash (e.g. #popart-285). Visitors can bookmark or share the link. Override with hash="false" on a shortcode.
• Lazy Load Popup Content: When ON, article HTML is fetched via AJAX on first open instead of embedding it in the page. Override with lazy="false".
• Gallery Next / Prev Arrows: When ON, triggers that share the same rel value become a navigable gallery with on-screen arrows and keyboard support.
• Gallery Swipe on Mobile: When ON, swipe left/right on touch devices to move between gallery items in the same rel group.
• Font Awesome: Set to No if your template already loads Font Awesome.

Global styling applies to all popups on the site unless overridden by shortcode dimensions or classes.

• Popup Theme: Modern (2026) — blur overlay, rounded panel, coordinated open/close animation. Classic (Legacy) — original Fancybox look with pattern backgrounds and image close buttons.
• Background Color: Overlay dim colour (RGBA supported in Modern theme).
• Background Pattern Style: Classic theme only — 10 predefined overlay patterns.
• Popup Background / Text Color: Colours inside the popup panel.
• Close Button Style: Classic theme only — choose from 10 predefined close button images.
• Extra CSS Styles: Add custom CSS rules for triggers or popups.

Modern-theme options (width, blur, accent colour, close button position, pill button styling) are documented in the Modern Popup Design tab.

Available when Popup Theme is set to Modern (2026).

• Default Popup Width / Max Height: e.g. 860px and 85vh. Used when shortcodes omit popwidth / popheight (depending on Width/Height Mode).
• Width / Height Mode: Control whether omitted shortcode sizes fall back to plugin defaults. Explicit popwidth / popheight in a shortcode always wins.
• Popup Viewport Margin: Space between the panel and the browser edge (pixels).
• Popup Corner Radius, Border Color, Content Padding: Panel appearance.
• Overlay Blur: Backdrop blur behind the popup (e.g. 10px).
• Accent Color: Links, focus rings, and highlight colour inside the popup.
• Close Button: Position (top-right / top-left), size, offsets, radius, background, icon, and border colours.
• Modern Button Styling: When ON, applies 2026 pill styling and gradient colours to ibtn trigger buttons on the page.

Default settings for image-based triggers. Each option can be overridden in the shortcode.

• Default Image Width / Height / Corner Radius: Used when imgwidth, imgheight, or imgradius are omitted.
• Zoom Image on Hover: Slightly scale the image when the pointer is over the trigger.
• Default Overlay Hover Effect: fade, slide-up, slide-down, slide-left, slide-right, zoom, or blur. Override with overlayeffect.
• Overlay Animation Speed: Milliseconds. Override with overlayspeed.
• Overlay Text Position: center, bottom, or top. Override with overlayposition.
• Default Overlay Background, Text Color, Opacity, Font Size: Override per shortcode with overlaybgcolor, overlaytextcolor, overlayopacity, overlayfontsize.

Add {popart ...}{/popart} shortcodes in articles, modules, or custom HTML. Use the editor button or copy examples from the plugin's Shortcode Examples tab.

General options

Image & overlay options

Predefined button classes (ibtn)

Examples

Simple text link

{popart text="Click Here" article="285"}{/popart}

Coloured pill buttons

{popart class="ibtn ibtn-blue" text="Button 1" article="285" popwidth="860px" popheight="500px"}{/popart}
{popart class="ibtn ibtn-green" text="Button 2" article="284" popwidth="860px" popheight="500px"}{/popart}

Hide popup header for one trigger

{popart class="ibtn ibtn-green" text="No header" article="285" showtitle="false" popwidth="860px" popheight="500px"}{/popart}

Shareable deep link

{popart class="ibtn ibtn-blue" text="Shareable popup" article="285" hash="true" hashslug="welcome-popup"}{/popart}

Gallery with navigation

{popart text="Part 1" article="285" rel="my-gallery"}{/popart}
{popart text="Part 2" article="284" rel="my-gallery"}{/popart}
{popart text="Part 3" article="283" rel="my-gallery"}{/popart}

Lazy-loaded popup

{popart text="Lazy load article" article="285" lazy="true" popwidth="860px" popheight="500px"}{/popart}

Image with hover overlay

{popart image="images/sample.jpg" alt="Preview" article="285" overlaytext="Read article" icon="fa-eye" overlayeffect="slide-up" overlaybgcolor="#1819ed" overlaytextcolor="#fff"}{/popart}

Gallery + lazy load + hash combined

{popart text="Chapter 1" article="285" rel="series" lazy="true" hash="true" class="ibtn ibtn-dark-blue" popwidth="920px" popheight="560px"}{/popart}
{popart text="Chapter 2" article="284" rel="series" lazy="true" hash="true" class="ibtn ibtn-dark-blue" popwidth="920px" popheight="560px"}{/popart}

Clear floats after image triggers

{popart image="images/a.jpg" article="285"}{/popart}
{popart image="images/b.jpg" article="284"}{/popart}
{clearfix}

How do I build shortcodes without typing them?

Edit any article and click the Pop Any Article button in the editor toolbar. Choose a template, adjust options in the tabs, and click insert. A live preview shows the shortcode before it is added.

How do I hide the article title in the popup?

Either set Article Title Inside Popup → Hide in plugin settings for all popups, or add showtitle="false" on a single shortcode. Use showtitle="true" to force the header when the global setting is Hide.

How do shareable popup links work?

With Hash / Deep Links enabled, opening a popup updates the URL to e.g. #popart-285. Copy that URL — reloading the page opens the same popup. Use hashslug="custom-name" for a readable hash.

How do I create a popup gallery?

Give multiple shortcodes the same rel value (e.g. rel="portfolio"). When one popup is open, visitors can use arrow keys, on-screen arrows, or swipe on mobile to move between articles in the group.

When should I use lazy loading?

Enable lazy load when a page has many popups or large articles. Content is fetched on first click, keeping the initial page HTML lighter. Use lazy="false" on a shortcode when you need content embedded immediately.

How do I add Font Awesome icons?

Add icon="fa-search" (Font Awesome 4 syntax) to a text or image shortcode. Ensure Font Awesome is set to Yes in plugin settings, or that your template already loads Font Awesome.

How do I get a Joomla article ID?

Go to Content → Articles. The ID column shows each article's numeric ID. Use that number in article="…".

Modern vs Classic theme — which should I use?

Modern (2026) is recommended for new sites: blur overlay, rounded panel, smooth zoom animations, and updated ibtn button styling. Classic keeps the legacy Fancybox appearance with pattern backgrounds and image-based close buttons.