Get Started

Fade Container 2.0 is a modern Joomla site module that turns selected articles into a polished fade rotator. Choose a magazine layout and theme, enable autoplay with a progress bar, and let visitors open a quick-view modal or jump straight to the article.

Version 2.0 is a full rebuild: vanilla JavaScript (no jQuery), Web Asset Manager assets, three layouts, five themes, and a native dialog preview.

Key highlights:

• Joomla 4, 5 & 6 compatible
• Layouts: Stacked Fade, Split Magazine, Spotlight Overlay
• Themes: Editorial, Modern, Card, Minimal, Dark
• Accent colour, radius, and optional CSS overrides
• Quick-view modal or direct article links
• Accessible controls with keyboard and reduced-motion support

Download

After purchase, download mod_fade_container_2.0.zip from your store account or the download email.

Install

1. Log in to the Joomla administrator
2. Go to System > Install > Extensions
3. Upload mod_fade_container_2.0.zip
4. Go to Content > Site Modules > New
5. Select Fade Container
6. Configure categories, layout, and theme, then assign the module
7. Clear Joomla and browser caches

If you are upgrading from 1.x, re-check module params after install — legacy Fancybox/bxSlider options are replaced by the new Display and Motion settings.

Open your Fade Container module and use the Content Settings tab.

• Categories — select one or more article categories
• Order Results — published, created, modified, ordering, hits, or random
• Order Direction — ascending or descending
• Number of Articles — how many slides to load
• Featured Articles — Show, Only, or Hide
• Filter by Tags — optional tag filter
• Exclude Current Article — hide the article being viewed
• Trigger Plugin Events — run content prepare / display events on items

Tip: For portfolio demos, start with a category that already has intro images.

Layout

• Stacked Fade — image above the excerpt (classic card)
• Split Magazine — image and text side by side
• Spotlight Overlay — full-bleed image with text on a gradient scrim

Theme

• Editorial — warm paper surface with serif titles
• Modern — clean sans-serif product look
• Card — soft gradient shell and rounded card feel
• Minimal — borderless, underline-style read more
• Dark — ink panel for night-mode pages

Display controls

• Accent Colour and Corner Radius
• Show Images + Intro / Full / None image field
• Excerpt Length, title, category, author, date, read more
• Open Behaviour — Quick-view modal or Open article page
• Theme CSS Override — scope with #jx-fc-{moduleId}

Use the Motion Settings tab to control how slides advance.

• Autoplay — cycle slides automatically
• Autoplay Delay — pause between slides in milliseconds
• Transition Speed — fade duration in milliseconds
• Pause on Hover — stop while the pointer or focus is inside the module
• Progress Bar — visual countdown under the active slide
• Prev / Next Controls — arrow buttons
• Pager Dots — jump to a specific slide

Visitors can also use keyboard arrows when the module is focused. Autoplay pauses while a quick-view dialog is open and when the browser tab is hidden. Reduced-motion preferences disable autoplay animation.

Core

• Article-powered fade rotator
• Stacked, split magazine, and spotlight layouts
• Editorial, Modern, Card, Minimal, and Dark themes
• Accent colour and radius controls
• Native quick-view modal or article links
• Autoplay with progress bar
• Prev/next, pager dots, and keyboard navigation

Content & platform

• Category, featured, tag, and exclude-current filters
• Intro / full image selection and excerpt length
• Optional content plugin events
• Joomla 4 / 5 / 6 with Web Asset Manager
• Vanilla JS — no jQuery
• Accessible labels and reduced-motion support

• Which Joomla versions are supported?

  • Joomla 4, 5, and 6. PHP 8.1+ is recommended.

• Do I need jQuery?

  • No. Version 2.0 is vanilla JavaScript.

• Which layout should I use on a homepage?

  • Split Magazine for case studies and news. Spotlight Overlay for hero-style highlights. Stacked Fade for sidebars and narrower positions.

• Can visitors preview without leaving the page?

  • Yes — set Open Behaviour to Quick-view modal.

• How do I match my brand colours?

  • Set Accent Colour and Radius, then optionally add CSS scoped to #jx-fc-{moduleId}.

• Can I show only featured articles?

  • Yes. Set Featured Articles to Only under Content Settings.

• Where can I get help?

  • Visit joomlax.com or the support area linked from your store account.

No slides appear

• Confirm the module is published and assigned to the menu item
• Check that selected categories contain published articles
• Lower filters (featured only / tags) if they exclude every article
• Clear Joomla cache and hard-refresh the browser

Images missing

• Set Show Images to Show and Article Image to Intro or Full
• Confirm articles have an intro/full image set in the Images and Links tab

Old styles or scripts still loading

• Hard-refresh so fade-container.css / .js load the latest version query string
• Remove leftover template CSS targeting old .fcontainer / Fancybox classes

Modal does not open

• Confirm Open Behaviour is Quick-view modal
• Check the browser console for JavaScript errors from other extensions

Still stuck?

• Review Joomla error logs
• Contact support via joomlax.com