Easy Cloud Zoom 2.0 turns a folder of product photos (or a list of images) into a modern zoom gallery. Visitors hover or tap to magnify details — ideal for shops, catalogues, and portfolios.

What do you get?

One install package with two parts:

1. System plugin — renders {cloudzoom …} shortcodes in articles and modules
2. Editor button — toolbar button that builds the shortcode for you

Highlights in 2.0

• Lens or inner zoom (vanilla JS — no jQuery)
• Thumbnail strip on the right, left, top, or bottom
• Themes: Modern 2026, Minimal, Dark + accent colour
• Optional browser-chrome frame (Pop Any–style)
• WebP resize cache under images/cloud_zoom_cache/
• Legacy {cloud-zoom}…{end-cloud-zoom} shortcodes still work

Works with

• Joomla 4, 5, and 6
• Phones, tablets, and desktops
• JPG, PNG, GIF, and WebP images

Tip: Use the editor button for the fastest start. Put product photos in a Media folder such as images/cloud.

Step 1 — Download

1. After purchase, download pkg_cloud_zoom_2.0.zip (recommended).
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.
3. Open the Upload Package File tab.
4. Choose pkg_cloud_zoom_2.0.zip.
5. Click Upload & Install and wait for the green success message.

Step 3 — Enable the plugins

1. Go to System → Plugins.
2. Search for Cloud Zoom.
3. Enable:
   • System - Easy Cloud Zoom
   • Editor Button - Easy Cloud Zoom

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

Step 4 — Add your images

1. Go to Content → Media.
2. Create a folder, for example cloud (files live under images/).
3. Upload product photos (JPG/PNG/WebP work best).
4. Optional: name files like Shoes__running-sneaker.jpg so captions look clean.

Quick start — Shortcode in an article

1. Edit any article.
2. Click the editor button Cloud Zoom (or type a shortcode).
3. Example: {cloudzoom folder="images/cloud" title="Product Zoom" thumbs="right" mode="lens"}
4. Save and view the article on the site.

Need help? support.joomlax.com

Open System → Plugins → System - Easy Cloud Zoom. Settings are grouped into tabs. Shortcode attributes override these defaults for that gallery only.

Look & Feel

• Theme — Modern 2026, Minimal, or Dark.
• Accent Colour — active thumb border and controls (default #1819ed).
• Browser Chrome — optional traffic-light frame around the gallery (off by default).
• Gallery Width — e.g. 100% or 800px.
• Thumbnail Position — right, left, top, bottom, or none.
• Show Title — caption under the main image.
• Soft Focus — subtle filter on the main image.

Zoom

• Zoom Mode — Lens (magnifier box) or Inner (zoom fills the frame).
• Zoom Scale — how far the image enlarges (e.g. 2.5).

Images

• Sort Images — A→Z, Z→A, or Random.
• Resize Main Image By — Height, Width, or Both + sizes.
• Thumb Width / Height — square crop size for crisp thumbnails (default 160).
• WebP Cache — store resized files as WebP when the server supports it.
• Load Minified Assets — smaller CSS/JS for production.

Shortcodes tab

Shows ready-to-copy examples you can paste into articles.

Simple setup checklist

1. Upload photos to Media.
2. Enable System - Easy Cloud Zoom.
3. Insert a shortcode (or use the editor button).
4. Hover the main image to test zoom; click thumbs to switch products.

Place shortcodes in articles, Custom HTML modules, or any content that supports plugins.

Modern shortcode (recommended)

{cloudzoom folder="images/cloud" title="Product Zoom" thumbs="right" mode="lens" theme="modern-2026"}

Attributes

• folder — path under the site root (e.g. images/cloud).
• image / src — single image, or comma-separated list instead of a folder.
• title — caption for the first image (others use the filename).
• thumbs — right | left | top | bottom | none.
• mode — lens or inner.
• theme — modern-2026, minimal, or dark.
• scale — zoom strength (e.g. 2.5).
• accent — colour hex (e.g. #1819ed).
• browser — 1 to show the browser chrome frame, 0 to hide it.

More examples

{cloudzoom folder="images/cloud" title="Inner Zoom" thumbs="bottom" mode="inner"}

{cloudzoom folder="images/cloud" title="Dark Studio" thumbs="left" mode="lens" theme="dark"}

{cloudzoom folder="images/cloud" title="Minimal" thumbs="top" mode="lens" theme="minimal"}

{cloudzoom image="images/cloud/Watch__steel-chronograph.jpg,images/cloud/Shoes__running-sneaker.jpg" title="Selected products" thumbs="right"}

Legacy shortcode (still supported)

{cloud-zoom}images/cloud/{title}Legacy Cloud Zoom{end-cloud-zoom}

Editor button

In the article editor, click Cloud Zoom. Fill in folder, title, thumbs, mode, and theme, then insert. No need to memorise attributes.

Note: Shortcodes inside <pre> / <code> blocks are left as plain text (handy for documentation demos).

Layout options

• Right (default) — vertical strip beside the main image; great for product pages.
• Left — same strip on the left side.
• Top / Bottom — horizontal filmstrip above or below the main image.
• None — main zoom only, no thumbs.

Scrolling & navigation

• When there are many thumbs, use the ↑ / ↓ (or ← / →) buttons to scroll the strip.
• The native scrollbar is hidden; navigation buttons control scrolling.
• Keyboard: focus the gallery and use arrow keys to change the active image.

Responsive behaviour

• On phones (about 720px and below), left/right strips stack under the main image and scroll horizontally.
• Chevrons rotate so they match the scroll direction.
• Image height is capped so galleries stay usable on short landscape screens.

Captions from filenames

Files named Category__Title.jpg show a clean caption (e.g. Shoes__running-sneaker.jpg → “Running Sneaker”). The shortcode title overrides the first image only.

Lens mode

A square magnifier follows the pointer (or finger). Best when you want a classic product-zoom feel.

{cloudzoom folder="images/cloud" mode="lens" scale="2.5"}

Inner mode

The zoom fills the main frame — no floating lens. Cleaner on dark themes and mobile.

{cloudzoom folder="images/cloud" mode="inner" thumbs="bottom"}

Touch support

On phones and tablets, touch and drag over the image to explore the zoom. Lift to hide the lens / zoom layer.

Aspect-correct zoom

Zoom uses the real rendered image box (object-fit contain), so the magnified view stays proportional — no stretched products.

Themes

• modern-2026 — soft card, accent borders (default).
• minimal — lighter chrome, quieter shadows.
• dark — dark stage for studio-style photos.

How caching works

On first view, Easy Cloud Zoom creates resized copies so pages load faster:

• Main images sized from your plugin settings
• Square crop thumbnails (sharp on retina screens)
• Optional WebP when PHP supports it

Cache location

images/cloud_zoom_cache/ with large/ and thumb/ (plus webp/ subfolders when WebP is on).

Originals in Media are never modified.

Supported formats

• JPEG (.jpg, .jpeg)
• PNG (.png)
• GIF (.gif)
• WebP (.webp)

Rebuild / clear cache

1. Delete the folder images/cloud_zoom_cache/ via FTP or Media (if visible).
2. Reload the page — files regenerate automatically.

Performance tips

• Upload reasonably sized originals (e.g. 1200–2000px wide).
• Keep WebP on for smaller thumbs.
• Use minified assets on live sites.

Multiple galleries on one page

{cloudzoom folder="images/cloud" title="Lens" thumbs="right" mode="lens"}

{cloudzoom folder="images/cloud" title="Inner" thumbs="bottom" mode="inner"}

Each gallery runs independently.

Browser chrome

Add browser="1" when you want the built-in traffic-light frame. Leave it off (0 or omit) if your template or demo wrapper already provides a browser mockup.

Package contents

• plg_system_cloud_zoom — shortcodes + front-end assets
• plg_editors-xtd_cloud_zoom — editor insert button

Install via pkg_cloud_zoom_2.0.zip.

Upgrading from 1.x

• Install the 2.0 package over the old plugin (upgrade method).
• Old shortcodes keep working.
• Switch demos to {cloudzoom …} when you are ready for themes, modes, and accents.

Troubleshooting

• Nothing renders — confirm System - Easy Cloud Zoom is enabled.
• Empty gallery — check the folder path and that images exist under images/.
• Soft thumbs — raise Thumb Width/Height (e.g. 160) and clear images/cloud_zoom_cache/.
• Editor button missing — enable Editor Button - Easy Cloud Zoom and clear admin cache.

• What is Easy Cloud Zoom 2.0?

  • A Joomla system plugin that builds product-style zoom galleries from a folder or image list — vanilla JS, themes, and WebP cache.

• Which Joomla versions are supported?

  • Joomla 4, 5, and 6.

• How do I add a zoom gallery?

  • Enable the system plugin, then use {cloudzoom folder="images/cloud" title="Product Zoom"} or the Cloud Zoom editor button.

• Does the old shortcode still work?

  • Yes: {cloud-zoom}images/cloud/{title}Title{end-cloud-zoom}.

• What zoom modes are available?

  • Lens — magnifier box. Inner — zoom fills the main frame.

• Can I change thumbnail position?

  • Yes — plugin setting or shortcode thumbs="right|left|top|bottom|none".

• Where are cached images stored?

  • Under images/cloud_zoom_cache/. Delete that folder to rebuild.

• Can I have multiple galleries on one page?

  • Yes — use multiple shortcodes; each instance is independent.

• Why do thumbs look soft?

  • Increase Thumb Width/Height (160×160 recommended), clear the cache, and hard-refresh the page.

• Why isn’t zoom working?

  • Confirm the plugin is enabled, the shortcode path is correct, images exist, and check the browser console for errors.