Fullscreen Image Gallery 2.4 turns a folder of photos (or a list of slides) into a clean grid. When someone clicks a picture, it opens in a true fullscreen lightbox — like a slideshow on the whole screen.

What do you get?

One install package with three parts:

1. Module — show a gallery in a sidebar, footer, or any module position
2. Content plugin — put a gallery inside an article with a shortcode like {fullscreen folder="images/my-photos"}
3. Editor button — a toolbar button that builds the shortcode for you (no typing required)

Who is this for?

• Photographers and portfolios
• Hotels, restaurants, and travel sites
• Schools, clubs, and event pages
• Anyone who wants a simple “click photo → big fullscreen view” gallery

Works with

• Joomla 4, 5, and 6
• Phones, tablets, and desktops
• JPG, PNG, GIF, and WebP images
• Optional videos (MP4, YouTube, Vimeo) on individual slides

Tip: Start with the Module if you want settings in the admin. Use the Plugin if you want the gallery inside article text.

Step 1 — Download

1. After purchase, download pkg_fullscreen_gallery_2.4.zip (recommended) — or the separate module / plugin zips.
2. Keep the zip file; do not unzip it unless the store told you to.

Step 2 — Install in Joomla

1. Log in to the Joomla administrator.
2. Go to System → Install → Extensions (on older menus: Extensions → Manage → Install).
3. Open the Upload Package File tab.
4. Choose pkg_fullscreen_gallery_2.4.zip.
5. Click Upload & Install.
6. Wait for the green success message.

Step 3 — Turn the plugins on

1. Go to System → Plugins (or Extensions → Plugins).
2. Search for Fullscreen.
3. Enable these two plugins:
   • Content - Fullscreen Image Gallery
   • Editor Button - Fullscreen Image Gallery

If a plugin shows a red X, click it so it becomes a green check.

Step 4 — Put your images on the site

1. Go to Content → Media.
2. Create a folder, for example fullscreen-demo (files live under images/).
3. Upload your photos (JPG/PNG/WebP work best).

Quick start A — Module (easiest for beginners)

1. Go to Content → Site Modules → New.
2. Choose Fullscreen Image Gallery.
3. Title: anything, e.g. Photo Gallery.
4. On the Content tab set Image Source to From folder.
5. Pick your image folder.
6. Choose a Position (ask your template docs if unsure — try sidebar-right or a main content position).
7. Set Status to Published.
8. On Menu Assignment, choose which pages show it.
9. Save. Open the front of the site and click a photo.

Quick start B — Shortcode in an article

1. Edit any article.
2. Click the editor button Fullscreen Gallery (or type a shortcode).
3. Example: {fullscreen folder="images/fullscreen-demo" columns="3"}
4. Save the article and view it on the site.

Need help? support.joomlax.com

Open a Fullscreen Image Gallery module: Content → Site Modules → edit your module. Settings are grouped into tabs.

Content tab

• Image Source
  • From folder — loads every image in that folder automatically (great for big sets).
  • Individual slides — you pick each image, caption, category, and optional video.
• Image Folder — the folder under images/ (example: fullscreen-demo).
• Folder Categories (folder mode)
  • None — no filter pills.
  • Filename prefix — name files like Nature__lake.jpg (category = Nature).
  • Subfolders — put photos in Nature/, City/, etc.
• Auto Captions from Filename — turns 01-mountain-lake.jpg into caption “Mountain Lake”.
• Slides (individual mode) — for each slide you can set:
  • Image / poster
  • Video URL (MP4, YouTube, or Vimeo)
  • Alt text
  • Caption
  • Category (for filters)
• Sort Order — A→Z, Z→A, or Random.
• Load More (initial count) — show only the first N images, then a “Load more” button. Use 0 to show all.

Look & Feel tab

• Theme — Modern 2026, Minimal, or Dark.
• Accent Color — colour for filters and active controls.
• Gallery Width — e.g. 100% or 960px.
• Columns — 1 to 6 columns on desktop.
• Gap — space between thumbnails (pixels).
• Masonry Layout — Pinterest-style uneven heights.
• Thumb Aspect Ratio — Auto (natural) or fixed (1:1, 4:3, 16:9…).
• Show Category Filters — filter pills when categories exist.
• Zoom on Hover — slight zoom when the mouse is over a thumb.
• Resize Thumbnails By — Width, Height, or Both + sizes.
• WebP Thumbnails — smaller, faster thumbnail files.
• Schema.org ImageGallery — SEO structured data (JSON-LD).
• Protect Images — reduces right-click / drag on gallery media (not bulletproof).

Lightbox tab

• True Fullscreen (OS) — uses the browser Fullscreen API so the image can cover the whole monitor.
• Slideshow Autoplay + Delay — auto-advance photos.
• Slideshow Progress Bar — thin bar while autoplay runs.
• Image Fit Mode — Contain (whole image visible) or Cover (fills the screen).
• Thumbnail Filmstrip — small strip of thumbs inside the lightbox (off by default).
• Download Button — let visitors download the image.
• Share Button — copy link; with social menu: WhatsApp, X, Facebook.
• Pinch / Scroll Zoom — mouse wheel zoom + two-finger pinch on phones.
• Deep Link Hash — URL becomes #jx-fig-123-4 so you can share a specific slide.
• Backdrop / control / caption colours and thumb borders.

Advanced tab

• Module Class Suffix — extra CSS class for your template.
• Additional CSS — your own CSS rules.

Plugin defaults

Go to System → Plugins → Content - Fullscreen Image Gallery. These defaults apply when a shortcode does not set that option (theme, columns, WebP, fit mode, schema, protect, auto captions, and more).

Simple setup checklist

1. Upload photos to Media.
2. Create module → From folder → pick folder.
3. Pick theme + columns.
4. Publish on the right pages.
5. Click a photo on the front-end to test the lightbox.

Shortcodes only work when the Content - Fullscreen Image Gallery plugin is enabled.

Easiest way: Editor button

1. Edit an article.
2. Click Fullscreen Gallery in the editor toolbar.
3. Fill in folder, columns, gap, theme, optional masonry.
4. Click Insert shortcode.

Basic shortcodes (copy & paste)

1) Whole folder

{fullscreen folder="images/fullscreen-demo" columns="3"}

2) With theme + masonry

{fullscreen folder="images/fullscreen-demo" columns="3" theme="dark" masonry="1"}

3) Custom thumb size + gap

{fullscreen folder="images/fullscreen-demo" thumbwidth="480" gap="12"}

4) Named images + titles

{fullscreen image="images/a.jpg,images/b.jpg" title="Sunrise,City night"}

5) Categories + filters

{fullscreen image="images/a.jpg,images/b.jpg" title="Lake,Tower" category="Nature,City" filters="1"}

6) Load more (show 6 first)

{fullscreen folder="images/fullscreen-demo" initial="6"}

7) Cover fit + deep link hash

{fullscreen folder="images/fullscreen-demo" fit="cover" hash="1"}

8) Video slide (poster image + video URL)

{fullscreen image="images/poster.jpg" video="https://www.youtube.com/watch?v=VIDEO_ID" title="Trailer"}

Useful attributes

Important rules

• Paths are relative to the site root: images/my-folder (usually no leading slash).
• Shortcodes inside <pre> or <code> stay as text (good for documentation).
• If nothing shows, make sure the content plugin is enabled and the folder really exists.

Grid & layout

• Responsive CSS grid (1–6 columns)
• Optional masonry layout
• Themes: Modern 2026, Minimal, Dark + accent colour
• Aspect-ratio lock for uniform thumbs
• Hover zoom, lazy loading, loading skeletons
• Responsive srcset thumbnails (multiple sizes)
• WebP thumbnail generation + cache under images/fullscreen/
• Category filter pills
• Load more / pagination for large folders

Lightbox experience

• True OS fullscreen (Fullscreen API)
• Previous / next, keyboard arrows, swipe on touch
• Play / pause slideshow + progress bar
• Download button
• Share: copy link + WhatsApp / X / Facebook
• Scroll zoom + pan, plus pinch-zoom on mobile
• Optional filmstrip
• Fit modes: contain or cover
• Deep-link hash to open a specific image
• Prefetch next/prev for smoother browsing
• Focus trap + screen-reader announcements (“Image 3 of 12”)

Content & media

• Folder mode or individual slides
• Auto captions from filenames
• Folder categories from filename prefix or subfolders
• Alt text, captions, categories per slide
• Video slides: MP4, YouTube, Vimeo
• Optional right-click / drag protect
• Schema.org ImageGallery JSON-LD for SEO

Module vs plugin vs editor button

• Module — full settings UI, positions, menu assignment
• Content plugin — shortcodes inside articles and HTML modules
• Editor button — insert a shortcode from a friendly popup

Technical

• Joomla 4 / 5 / 6 services architecture
• Vanilla JavaScript (no jQuery required for the lightbox)
• Works on modern PHP versions used by current Joomla installs

Basics

What is Fullscreen Image Gallery used for?

It shows a grid of photos. Click one to open a fullscreen lightbox with next/previous controls — great for portfolios, hotels, events, and school galleries.

Do I need both the module and the plugin?

No. Install the package once. Use the module for sidebars/positions, the plugin for galleries inside articles. Many sites use both.

Which Joomla versions work?

Joomla 4, 5, and 6.

Is it mobile friendly?

Yes. The grid shrinks on small screens, and the lightbox supports swipe and pinch-zoom.

What image types are supported?

JPG, JPEG, PNG, GIF, and WebP. Optional WebP conversion for generated thumbnails.

Setup

Where do I put my photos?

Usually under images/ using Content → Media. Example folder: images/holiday-2026.

Module or shortcode — which should a beginner use?

Start with the module. It has forms and switches. Use shortcodes when you want a gallery in the middle of article text.

How do I create a module gallery?

1. Content → Site Modules → New → Fullscreen Image Gallery
2. Choose From folder or Individual slides
3. Pick position + pages → Publish → Save

How do I add a gallery inside an article?

Enable the content plugin, then use the editor button or paste: {fullscreen folder="images/fullscreen-demo" columns="3"}

The editor button is missing. Why?

Enable Editor Button - Fullscreen Image Gallery under System → Plugins. Also make sure your editor shows the button bar.

Images, captions, categories

Can I resize thumbnails?

Yes. In the module Look & Feel tab set resize by width/height/both and enter sizes. Shortcodes can use thumbwidth / thumbheight.

Can I add captions?

Yes. In slides mode type a caption per image. In folder mode turn on Auto Captions from Filename, or pass title="…" in a shortcode.

How do category filters work?

Give slides a category name, or in folder mode use Nature__lake.jpg / subfolders. Filters appear as pills above the grid when enabled.

Can I use a masonry layout?

Yes. Enable Masonry in the module, or add masonry="1" to the shortcode.

What does Load more do?

If you set an initial count (e.g. 8), only 8 thumbs show first. Visitors click Load more for the rest. Useful for 50+ photos.

Does it support WebP?

Yes. Enable WebP Thumbnails. The gallery creates cached WebP thumbs when the server supports it.

Can I protect images from right-click?

Yes, turn on Protect Images. It blocks simple right-click/drag. Determined users can still download images another way.

What is Schema.org ImageGallery?

Optional SEO markup (JSON-LD) that describes your gallery to search engines. Leave it on unless you already add your own schema.

Can I style the gallery to match my website?

Yes. Change accent colour, lightbox colours, borders, and use Additional CSS for fine-tuning.

Can I control the order of images?

Yes — A→Z, Z→A, or Random. In slides mode you can also reorder rows in the subform.

Does the gallery support hover effects?

Yes — optional zoom-on-hover for thumbnails.

Lightbox

What is “True Fullscreen”?

It asks the browser to expand over the whole screen (not only the browser window). Visitors can exit with Esc.

How do I start a slideshow?

Enable Slideshow Autoplay, or press Space / the play button in the lightbox. A progress bar can show the countdown.

Contain vs Cover?

Contain shows the whole photo (may have empty edges). Cover fills the screen (edges may crop).

Can visitors download or share?

Yes, if those buttons are enabled. Share can copy a deep link and open WhatsApp / X / Facebook.

What is a deep link hash?

When enabled, the URL updates like #jx-fig-211-3 so opening that link jumps to image 3.

Can I add video?

Yes on individual slides (or with shortcode video="…"). Supports MP4 files and YouTube/Vimeo links. Use an image as the poster/thumbnail.

Does zoom work on phones?

Yes — two-finger pinch, and scroll-wheel zoom on desktop when zoom is enabled.

Will keyboard users be okay?

Yes — arrows move slides, Esc closes, Tab stays trapped inside the lightbox while it is open, and screen readers hear “Image n of m”.

Performance

Where are resized images stored?

Cached under images/fullscreen/. You can delete that cache folder to rebuild thumbs.

Will it slow my site down?

Thumbs are resized and cached, images lazy-load, and next/prev images can prefetch while viewing. For huge folders, use Load more.

Nothing appears

• Module: is it Published? Correct position? Assigned to this menu item?
• Shortcode: is Content - Fullscreen Image Gallery enabled?
• Clear Joomla cache: System → Clear Cache, then refresh the page (Ctrl+F5).

Shortcode shows as plain text

• Enable the content plugin.
• Check spelling: {fullscreen …} (not square brackets).
• Do not put the live shortcode only inside <pre>/<code> if you want it to run — those blocks stay as examples on purpose.

Images missing / empty gallery

• Confirm files exist in Media Manager under the folder you chose.
• Use paths like images/my-folder (relative to the site root).
• Supported files: jpg, jpeg, png, gif, webp.
• Check folder permissions so PHP can read the files.

Thumbnails look wrong or old

• Delete cached files in images/fullscreen/ and reload.
• Make sure images/fullscreen/ is writable by the server.
• Confirm PHP GD (or Imagick) is available for resizing.

WebP not created

• Your PHP build must support WebP (imagewebp).
• Ask hosting if WebP is enabled, or turn WebP Thumbnails off.

Lightbox will not open

• Open the browser console (F12) and look for JavaScript errors from other scripts.
• Hard-refresh to load the latest fullscreen-gallery.js.
• Temporarily disable other lightbox/gallery plugins to test conflicts.

Fullscreen exits immediately / looks cropped

• Some browsers block fullscreen unless the click started it — click a thumb again.
• Try Fit Mode Contain if Cover crops too much.
• Esc exits native fullscreen by design.

Filters not showing

• You need categories on slides, or folder category mode with matching filenames/subfolders.
• “Show Category Filters” must be Yes (or shortcode filters="1").

Video does not play

• Use a full YouTube/Vimeo URL or a direct .mp4 link.
• Provide a poster image so the grid has something to click.
• Some sites block embeds — test the video URL in a new browser tab.

Editor button missing

• Enable Editor Button - Fullscreen Image Gallery.
• In the article editor, expand the editor buttons if your template hides them.

Still stuck?

• Note your Joomla version and Fullscreen Image Gallery version (should be 2.4).
• Contact support.joomlax.com with a screenshot and the shortcode/module settings you used.