plugin
Popup and iframesPop any Article
Plugin to popup a Joomla Article
DemoExample 1 - Text Image Overlay on Hover to Article Popup
Hover each portrait to preview the overlay. Defaults come from plugin settings; each shortcode can override colors, overlayeffect, overlayspeed, and imgradius.
{popart class="imgmargin-10" alt="Sandra Clarke" overlaytext="Sandra Clarke" overlaybgcolor="#1f2937" overlaytextborder="2" overlaytextcolor="#fff" overlayopacity="0.88" overlayeffect="fade" image="images/corporate/large/sandra-clarke.jpg" article="243" popwidth="900px" popheight="580px"}{/popart}
{popart class="imgmargin-10" alt="Richard Moore" overlaytext="Richard Moore" overlaybgcolor="#ef4444" overlaytextcolor="#fff" overlayopacity="0.88" overlayeffect="slide-up" overlayspeed="350" image="images/corporate/large/richard-moore.jpg" article="242" popwidth="900px" popheight="580px"}{/popart}
{popart class="imgmargin-10" alt="Stephane Bernard" icon="fa-user" overlaytext="Stephane" overlaybgcolor="#10b981" overlaytextborder="2" overlaytextcolor="#fff" overlayopacity="0.88" overlayeffect="zoom" image="images/corporate/large/stephane-bernard.jpg" article="244" popwidth="900px" popheight="580px"}{/popart}
{popart class="imgmargin-10" alt="Steve Martin" icon="fa-comment" overlaytext="Steve Martin" overlayfontsize="16px" overlaybgcolor="#f59e0b" overlaytextborder="2" overlaytextcolor="#fff" overlayopacity="0.9" overlayeffect="blur" overlayposition="bottom" image="images/corporate/large/steve-martin.jpg" article="245" popwidth="900px" popheight="580px"}{/popart}DemoIcon Overlay to Article Popup
{popart overlay="true" class="imgmargin-10" icon="fa-info-circle" overlaytext="Details" overlaybgcolor="#111827" overlaytextborder="2" overlaytextcolor="#fff" overlayfontsize="15px" overlayopacity="0.82" overlayposition="top" image="images/corporate/large/stephane-bernard.jpg" article="244" popwidth="900px" popheight="580px"}{/popart}
{popart overlay="true" class="imgmargin-10" alt="Steve Martin" overlaytext="Steve Martin" overlaybgcolor="#f59e0b" overlaytextborder="2" overlaytextcolor="#fff" overlayopacity="0.88" image="images/corporate/large/steve-martin.jpg" article="245" popwidth="900px" popheight="580px"}{/popart}
{popart overlay="true" class="imgmargin-10" alt="Sandra Clarke" overlaytext="Sandra Clarke" overlaybgcolor="#10b981" overlaytextcolor="#fff" overlayopacity="0.88" image="images/corporate/large/sandra-clarke.jpg" article="243" popwidth="900px" popheight="580px"}{/popart}
{popart overlay="true" class="imgmargin-10" icon="fa-plus" alt="Richard Moore" overlaytext="Read More" overlaytextborder="2" overlaybgcolor="#ef4444" overlaytextcolor="#fff" overlayopacity="0.9" overlayposition="bottom" image="images/corporate/large/richard-moore.jpg" article="242" popwidth="900px" popheight="580px"}{/popart}DemoExample 2 - Simple Image to Article Popup
Clean image triggers with rounded corners and a subtle hover zoom. Size defaults to the plugin image width/height unless you set imgwidth and imgheight.
{popart class="imgmargin-10" alt="Team collaboration" image="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=480&h=320&fit=crop&auto=format&q=80" imgwidth="320px" imgheight="220px" imgradius="18px" article="243" popwidth="900px" popheight="580px"}{/popart}DemoExample 2.1 - Image Floated Left in Content
Lorem Ipsum 
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
{popart class="imgmargin-10 imgleft" alt="Workspace" image="https://images.unsplash.com/photo-1497366216548-37526070297c?w=480&h=320&fit=crop&auto=format&q=80" imgwidth="300px" imgheight="220px" imgradius="16px" article="242" popwidth="900px" popheight="580px"}{/popart}DemoExample 2.2 - Overlay Image Floated Right in Content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
{popart class="imgmargin-10 imgright" overlaytext="Sandra Clarke" overlaybgcolor="#1819ed" overlaytextborder="2" overlaytextcolor="#fff" overlayopacity="0.9" overlayeffect="slide-left" alt="Sandra Clarke" image="images/corporate/large/sandra-clarke.jpg" imgwidth="280px" imgheight="280px" article="243" popwidth="900px" popheight="580px"}{/popart}DemoExample 3 - Overlay Hover Effects
Compare hover animations using overlayeffect: fade, slide-up, slide-right, and zoom. Use overlayspeed="450" to slow or speed up the animation.
{popart class="imgmargin-10" alt="Fade effect" overlaytext="Fade" overlayeffect="fade" overlaybgcolor="#1819ed" overlaytextcolor="#fff" overlayopacity="0.88" image="images/corporate/large/sandra-clarke.jpg" article="243" popwidth="900px" popheight="580px"}{/popart}
{popart class="imgmargin-10" alt="Slide up" overlaytext="Slide Up" overlayeffect="slide-up" overlaybgcolor="#0ea5e9" overlaytextcolor="#fff" overlayopacity="0.88" image="images/corporate/large/richard-moore.jpg" article="242" popwidth="900px" popheight="580px"}{/popart}
{popart class="imgmargin-10" alt="Slide right" overlaytext="Slide Right" overlayeffect="slide-right" overlaybgcolor="#8b5cf6" overlaytextcolor="#fff" overlayopacity="0.88" image="images/corporate/large/stephane-bernard.jpg" article="244" popwidth="900px" popheight="580px"}{/popart}
{popart class="imgmargin-10" alt="Zoom effect" overlaytext="Zoom" overlayeffect="zoom" overlaybgcolor="#f97316" overlaytextcolor="#fff" overlayopacity="0.88" image="images/corporate/large/steve-martin.jpg" article="245" popwidth="900px" popheight="580px"}{/popart}DemoExample 4 - Larger Rounded Image Grid
Larger Unsplash triggers in a responsive grid. Disable image zoom per item with imagezoom="false".
{popart class="imgmargin-10" alt="Team meeting" overlaytext="Open Article" overlayeffect="slide-up" overlaybgcolor="rgba(24,25,237,0.88)" overlaytextcolor="#fff" image="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=480&h=320&fit=crop&auto=format&q=80" imgwidth="300px" imgheight="220px" imgradius="20px" article="244" popwidth="900px" popheight="580px"}{/popart}
{popart class="imgmargin-10" alt="Modern office" overlaytext="Workspace" overlayeffect="fade" overlaybgcolor="rgba(15,23,42,0.82)" overlaytextcolor="#fff" image="https://images.unsplash.com/photo-1497366216548-37526070297c?w=480&h=320&fit=crop&auto=format&q=80" imgwidth="300px" imgheight="220px" imgradius="20px" imagezoom="false" article="245" popwidth="900px" popheight="580px"}{/popart}
{popart class="imgmargin-10" alt="Collaboration" overlaytext="Collaborate" overlayeffect="blur" overlaybgcolor="rgba(16,185,129,0.85)" overlaytextcolor="#fff" image="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=480&h=320&fit=crop&auto=format&q=80" imgwidth="300px" imgheight="220px" imgradius="20px" article="243" popwidth="900px" popheight="580px"}{/popart}DemoExample 5 - Image Gallery with Next / Prev (rel)
Group image triggers with the same rel attribute. Open any portrait, then use arrows to browse the rest without closing the popup.
{popart class="imgmargin-10" rel="team-gallery" alt="Sandra Clarke" overlaytext="Sandra Clarke" overlayeffect="slide-up" overlaybgcolor="#1819ed" overlaytextcolor="#fff" overlayopacity="0.88" image="images/corporate/large/sandra-clarke.jpg" imgwidth="280px" imgheight="280px" imgradius="18px" article="243" popwidth="1000px" popheight="640px"}{/popart}
{popart class="imgmargin-10" rel="team-gallery" alt="Richard Moore" overlaytext="Richard Moore" overlayeffect="slide-up" overlaybgcolor="#ef4444" overlaytextcolor="#fff" overlayopacity="0.88" image="images/corporate/large/richard-moore.jpg" imgwidth="280px" imgheight="280px" imgradius="18px" article="242" popwidth="1000px" popheight="640px"}{/popart}
{popart class="imgmargin-10" rel="team-gallery" alt="Stephane Bernard" overlaytext="Stephane" overlayeffect="slide-up" overlaybgcolor="#10b981" overlaytextcolor="#fff" overlayopacity="0.88" image="images/corporate/large/stephane-bernard.jpg" imgwidth="280px" imgheight="280px" imgradius="18px" article="244" popwidth="1000px" popheight="640px"}{/popart}
{popart class="imgmargin-10" rel="team-gallery" alt="Steve Martin" overlaytext="Steve Martin" overlayeffect="slide-up" overlaybgcolor="#f59e0b" overlaytextcolor="#fff" overlayopacity="0.88" image="images/corporate/large/steve-martin.jpg" imgwidth="280px" imgheight="280px" imgradius="18px" article="245" popwidth="1000px" popheight="640px"}{/popart}DemoExample 6 - Lazy-Loaded Image Popups
Image triggers with lazy="true" defer article HTML until first open. A loading spinner appears inside the popup while content is fetched via AJAX.
{popart class="imgmargin-10" lazy="true" alt="Lazy — Sandra" overlaytext="Lazy load" overlayeffect="fade" overlaybgcolor="rgba(24,25,237,0.88)" overlaytextcolor="#fff" image="images/corporate/large/sandra-clarke.jpg" imgwidth="280px" imgheight="280px" imgradius="18px" article="243" popwidth="1000px" popheight="640px"}{/popart}
{popart class="imgmargin-10" lazy="true" alt="Lazy — Richard" overlaytext="Lazy load" overlayeffect="fade" overlaybgcolor="rgba(239,68,68,0.88)" overlaytextcolor="#fff" image="images/corporate/large/richard-moore.jpg" imgwidth="280px" imgheight="280px" imgradius="18px" article="242" popwidth="1000px" popheight="640px"}{/popart}
{popart class="imgmargin-10" lazy="true" alt="Lazy — Stephane" overlaytext="Lazy load" overlayeffect="fade" overlaybgcolor="rgba(16,185,129,0.88)" overlaytextcolor="#fff" image="images/corporate/large/stephane-bernard.jpg" imgwidth="280px" imgheight="280px" imgradius="18px" article="244" popwidth="1000px" popheight="640px"}{/popart}DemoExample 7 - Hash Links on Image Triggers
Image popups can use deep links too. Click a portrait, then copy the URL — it includes a hash like #popart-243 or your custom hashslug.
Try opening #sandra-profile or #popart-242 directly in the URL bar after visiting this page once.
{popart class="imgmargin-10" hash="true" hashslug="sandra-profile" alt="Sandra Clarke" overlaytext="Shareable link" overlayeffect="zoom" overlaybgcolor="#1819ed" overlaytextcolor="#fff" overlayopacity="0.9" image="images/corporate/large/sandra-clarke.jpg" imgwidth="280px" imgheight="280px" imgradius="20px" article="243" popwidth="1000px" popheight="640px"}{/popart}
{popart class="imgmargin-10" hash="true" alt="Richard Moore" overlaytext="#popart-242" overlayeffect="zoom" overlaybgcolor="#ef4444" overlaytextcolor="#fff" overlayopacity="0.9" image="images/corporate/large/richard-moore.jpg" imgwidth="280px" imgheight="280px" imgradius="20px" article="242" popwidth="1000px" popheight="640px"}{/popart}DemoExample 8 - Gallery + Lazy Load + Hash (Full Feature Set)
Portrait grid combining rel grouping, AJAX lazy loading, and shareable hashes — the complete workflow for image-based article series.
{popart class="imgmargin-10" rel="premium-gallery" lazy="true" hash="true" alt="Sandra Clarke" overlaytext="1 / 4" icon="fa-user" overlayeffect="slide-up" overlaybgcolor="rgba(24,25,237,0.9)" overlaytextcolor="#fff" image="images/corporate/large/sandra-clarke.jpg" imgwidth="260px" imgheight="260px" imgradius="18px" article="243" popwidth="1040px" popheight="700px"}{/popart}
{popart class="imgmargin-10" rel="premium-gallery" lazy="true" hash="true" alt="Richard Moore" overlaytext="2 / 4" icon="fa-user" overlayeffect="slide-up" overlaybgcolor="rgba(239,68,68,0.9)" overlaytextcolor="#fff" image="images/corporate/large/richard-moore.jpg" imgwidth="260px" imgheight="260px" imgradius="18px" article="242" popwidth="1040px" popheight="700px"}{/popart}
{popart class="imgmargin-10" rel="premium-gallery" lazy="true" hash="true" alt="Stephane Bernard" overlaytext="3 / 4" icon="fa-user" overlayeffect="slide-up" overlaybgcolor="rgba(16,185,129,0.9)" overlaytextcolor="#fff" image="images/corporate/large/stephane-bernard.jpg" imgwidth="260px" imgheight="260px" imgradius="18px" article="244" popwidth="1040px" popheight="700px"}{/popart}
{popart class="imgmargin-10" rel="premium-gallery" lazy="true" hash="true" alt="Steve Martin" overlaytext="4 / 4" icon="fa-user" overlayeffect="slide-up" overlaybgcolor="rgba(245,158,11,0.9)" overlaytextcolor="#fff" image="images/corporate/large/steve-martin.jpg" imgwidth="260px" imgheight="260px" imgradius="18px" article="245" popwidth="1040px" popheight="700px"}{/popart}