Easy Cloud Zoom

Introduction

Easy Cloud Zoom is a powerful Joomla system plugin that allows you to create zoomable images with thumbnail galleries anywhere in your content using simple shortcodes. Perfect for product pages, image galleries, portfolios, and any content that benefits from interactive image zoom functionality.

Key Features:

• Mouse-over image zoom with smooth movement
• Thumbnail gallery with multiple position options (right, left, top, bottom)
• Thumbnail scrolling with navigation buttons
• Simple shortcode syntax: {cloud-zoom}...{/cloud-zoom}
• Support for folder-based or individual image paths
• Automatic image resizing and caching
• Customizable zoom settings (tint, opacity, soft focus, title)
• Responsive design for all devices
• Multiple gallery instances on same page
• Image sorting options (sequential or random)

Perfect for e-commerce product pages, image galleries, portfolios, and any content where users need to examine images in detail.

Installation

Downloading the Plugin

After you purchase the extension from our store, you will receive an email containing a link to download the plugin file: plg_system_cloud_zoom.zip

Alternatively, you can download the extension from the "Downloads" section in our store.

Installing the Plugin

To install the plugin, log in to the backend of your Joomla website.

• For Joomla 4, 5 & 6: Navigate to System > Install > Extensions. You can either drag and drop or browse for the file to install.

A success message will be displayed once the installation is complete.

After Installation

The plugin is automatically enabled after installation. You can start using cloud zoom immediately:

• Go to Extensions > Plugins > System - Easy Cloud Zoom to configure default settings
• Use {cloud-zoom} shortcodes in your articles or modules
• View shortcode examples in the plugin configuration

Basic Usage

Creating Zoomable Images

The simplest way to create zoomable images is using the {cloud-zoom} shortcode:

{cloud-zoom}images/gallery/{title}My Gallery Title{end-cloud-zoom}

Shortcode Structure

• {cloud-zoom} - Opening tag for cloud zoom container
• Image Path - Folder path or comma-separated image paths
• {title} - Separator between image path and title
• Title Text - Title to display on images (optional)
• {end-cloud-zoom} - Closing tag

Images from Folder

Load all images from a folder:

{cloud-zoom}images/products/{title}Product Gallery{end-cloud-zoom}

Individual Images

Specify individual images using comma-separated paths:

{cloud-zoom}images/img1.jpg,images/img2.jpg,images/img3.jpg{title}My Images{end-cloud-zoom}

Where to Use

• Articles: Add shortcodes directly in article content
• Modules: Use in Custom HTML modules
• Custom HTML: Any content area that supports HTML
• Templates: Add in template overrides or custom HTML areas

Configuration

Plugin Settings

Navigate to Extensions > Plugins > System - Easy Cloud Zoom to configure default settings.

General Settings

• Gallery Container Width: Set width of gallery container (pixels or percentage, e.g., 100% or 800px)
• Main Image Max Width/Height: Maximum dimensions for main zoomable image (0 = no limit)
• Thumbnail Position: Position thumbnails relative to main image (right, left, top, bottom)
• Enable Thumbnail Scroller: Enable scrolling for thumbnail gallery
• Thumbnail Scroll Dimensions: Set max height (vertical) or width (horizontal) for scrolling
• Show Zoomed Images Within Frame: Display zoom inside or outside the frame
• Enable Soft Focus: Apply soft-focus effect to small image
• Show Title: Display title on images
• Tint Color & Opacity: Customize zoom lens background color
• Title Font Settings: Customize title font family, size, and weight
• Zoom Window Size: Set width and height of zoomed image
• Position of Zoomed Image: Right or bottom (when outside frame)

Image Settings

• Sort Images: Sequential (A-Z or Z-A) or random
• Show Thumbnail Images By: Height, width, or both
• Image Dimensions: Set height and width for main images
• Thumbnail Dimensions: Set height and width for thumbnails

Thumbnail Positions

Thumbnail Layout Options

The plugin supports four thumbnail positions for flexible gallery layouts:

Right Position (Default)

Thumbnails appear on the right side of the main image. Best for vertical layouts.

Left Position

Thumbnails appear on the left side of the main image. Useful for right-to-left layouts.

Top Position

Thumbnails appear above the main image. Good for horizontal layouts.

Bottom Position

Thumbnails appear below the main image. Common for product galleries.

Thumbnail Scrolling

When enabled, scrolling allows navigation through many thumbnails:

• Vertical Scrolling: For thumbnails on right or left (scrolls up/down)
• Horizontal Scrolling: For thumbnails on top or bottom (scrolls left/right)
• Navigation Buttons: Beautiful FontAwesome icons for easy navigation
• Custom Dimensions: Set max scroll height or width

Responsive Behavior

Gallery automatically adapts to screen size, ensuring optimal display on all devices.

Image Management

Image Resizing

The plugin automatically resizes images based on your settings:

• By Height: Maintains aspect ratio, resizes to specified height
• By Width: Maintains aspect ratio, resizes to specified width
• By Both: Resizes to both specified width and height

Image Caching

Resized images are automatically cached for better performance:

• Cache directory: images/cloud_zoom_cache/
• Cache files are named with dimensions (e.g., image_800x600.jpg)
• Original images are never modified
• Cache is created automatically on first use

Supported Formats

The plugin supports common image formats:

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

Image Sorting

Control how images are displayed:

• Sequence A-Z: Alphabetical order
• Sequence Z-A: Reverse alphabetical order
• Random: Random order each page load

Zoom Customization

Zoom Position

Choose where zoomed images appear:

• Inside Frame: Zoom appears within the main image area
• Outside Frame: Zoom appears outside (right or bottom)

Zoom Window Size

Set custom dimensions for zoomed images:

• Zoom Width: Width of zoomed image in pixels
• Zoom Height: Height of zoomed image in pixels

Zoom Lens Customization

Customize the zoom lens appearance:

• Tint Color: Background color of zoom lens (RGBA format)
• Tint Opacity: Opacity of lens background (0.1-1.0)
• Soft Focus: Apply subtle blur effect to small image

Title Display

Show image titles with customization:

• Show Title: Enable/disable title display
• Title Font Family: Set font family (e.g., Arial, Helvetica)
• Title Font Size: Font size in pixels
• Title Font Weight: Normal or bold

Smooth Movement

Zoom lens moves smoothly with customizable speed for optimal user experience.

Advanced Usage

Multiple Instances

You can use multiple {cloud-zoom} shortcodes on the same page:

{cloud-zoom}images/gallery1/{title}Gallery 1{end-cloud-zoom}

{cloud-zoom}images/gallery2/{title}Gallery 2{end-cloud-zoom}

Each instance operates independently with its own zoom functionality.

Mixed Image Sources

Combine folder and individual images in different shortcodes:

{cloud-zoom}images/products/{title}Products{end-cloud-zoom}

{cloud-zoom}images/banner1.jpg,images/banner2.jpg{title}Banners{end-cloud-zoom}

HTML Content

Shortcodes work within HTML content and can be combined with other content:

<h2>Product Gallery</h2>
{cloud-zoom}images/products/{title}Products{end-cloud-zoom}
<p>Browse our product collection above.</p>

Performance Tips

• Use appropriate image dimensions to balance quality and performance
• Enable image caching for faster page loads
• Optimize original images before uploading
• Use WebP format for better compression

Cache Management

Cache directory is automatically created and managed. To clear cache, delete files in images/cloud_zoom_cache/ directory.

FAQ

• How do I create zoomable images?

  • Use {cloud-zoom} shortcodes in your content. See the shortcode examples in plugin configuration.

• Can I use images from a folder?

  • Yes, provide the folder path: {cloud-zoom}images/folder/{title}Title{end-cloud-zoom}

• Can I specify individual images?

  • Yes, use comma-separated paths: {cloud-zoom}img1.jpg,img2.jpg{title}Title{end-cloud-zoom}

• How do I change thumbnail position?

  • Configure in plugin settings: Extensions > Plugins > System - Easy Cloud Zoom

• How do I enable thumbnail scrolling?

  • Enable "Thumbnail Scroller" in plugin settings and set scroll dimensions.

• Can I customize zoom appearance?

  • Yes, configure tint color, opacity, soft focus, and title display in plugin settings.

• Do images resize automatically?

  • Yes, images are automatically resized based on your settings and cached for performance.

• Can I have multiple galleries on one page?

  • Yes, use multiple {cloud-zoom} shortcodes on the same page.

• What image formats are supported?

  • JPEG, PNG, GIF, and WebP formats are supported.

• Why isn't my zoom working?

  • Check that the plugin is enabled, verify shortcode syntax is correct, ensure images exist, and check browser console for errors.