Advanced Gallery With Zoom

How To Use & Features

How Does This Extension Work?

To begin using this extension, the admin needs to follow a few straightforward steps:

1. Activate the Extension: Navigate to the store configuration settings in your Magento admin panel. Here, you will find the option to enable the extension. Make sure to activate it for both product pages and category pages.
2. Configure Settings: Once enabled, you can customize various settings such as zoom types and gallery views to fit your store’s needs. This includes selecting options for basic zoom, inner zoom, or lens zoom, as well as adjusting settings for different page types and mobile views.
3. View the Zoom Effect: After activation, the zoom functionality will be applied to product images on both the product detail pages and category pages. This feature enhances the customer experience by allowing a closer, more detailed view of products.
4. Mobile Optimization: The extension is designed to work seamlessly on mobile devices, ensuring that customers have a smooth and interactive experience regardless of the device they are using.

In summary, this extension enhances the visual experience of your store by providing a versatile zoom feature for product images, making it easier for customers to view and engage with your products in greater detail.

reprach it and make it full new

Installation Steps

• Step 1: Verify Permissions
  Ensure that the 'app' directory has the necessary write permissions to allow file modifications.
• Step 2:Upload Files
  Extract the contents of the extension folder and upload them to the root directory of your Magento website using an FTP client. When prompted to replace existing files or folders, select "Yes."
• Step 3:Activate the Extension via SSH
  If you have SSH access to your web server, you can set up the extension using the following commands:
• For Windows Servers:

  php bin/magento setup:upgrade
  php bin/magento setup:static-content:deploy

• For Linux Servers:

  bin/magento setup:upgrade
  bin/magento setup:static-content:deploy

• Step 4:Clear Cache
  Refresh the Magento cache to apply changes. You can do this from the admin panel under System > Cache Management. Alternatively, if you have SSH access, you can clear the cache with:
  • For Windows Servers:

    php bin/magento cache:clean

  • For Linux Servers:

    bin/magento cache:clean

If you encounter any issues during installation, please contact us at magento@zealousweb.com for assistance.

How to Use

To use this extension, follow these steps:

1. Enable the Extension
   Navigate to Stores > Configuration > Zealousweb Extension > Advanced Gallery With Zoom Configuration > General Settings. Here, enable the extension.
2. Configure Zoom Settings
   Once the extension is activated, configure the zoom settings for both product and category pages. Go to the "Product Page Zoom" and "Category Page Zoom" sections to enable zoom functionality for product images on these pages.
3. Select Zoom Options
   Customize your zoom experience by choosing from various zoom types and effects. Adjust settings according to your preferences to enhance the product viewing experience.

By following these steps, you'll activate and customize the zoom functionality to improve how your customers interact with product images on your Magento store.

Backend Configurations : -

General Settings

• Enable: Select "Yes" to activate the zoom functionality or "No" to disable it.
• Customer Groups: Choose which customer groups should have access to the image zoom feature.

Product Page Zoom

• Enable: Select "Yes" to activate zoom functionality on product pages or "No" to disable it.
• Gallery View: Choose between "Grid View" or "Slider" to display product images in either format.
• Select Zoom Type: Choose from "Basic Zoom," "Inner Zoom," or "Lens Zoom" for the type of zoom effect you want to use.
  Basic Zoom Options:
• Zoom Window Width: Set the width of the zoom window.
• Zoom Window Height: Set the height of the zoom window.
• Allow Tint: Enable or disable the tint effect.
• Window FadeIn/Out: Choose whether the zoom window should fade in and out.
• Zoom Window Position: Select the position of the zoom window on the image.
• Scroll Zoom: Enable or disable zooming with scroll.
• Inner Zoom Options:
• Scroll Zoom: Choose between "Default" or "Crosshair" for scroll zoom behavior.
• Window FadeIn/Out: Enable or disable fade in and out effects for the zoom window.
• Scroll Zoom: Enable or disable zooming with scroll.
• Lens Zoom Options:
• Window FadeIn/Out: Enable or disable fade in and out effects for the lens.
• Scroll Zoom: Enable or disable zooming with scroll.
• Enable Easing: Enable or disable easing effects for the lens.
• Lens Shape: Choose between "Square" or "Round" for the lens shape.
• Lens Size: Set the size of the lens.
• Lens FadeIn/Out: Enable or disable fade in and out effects for the lens.

Category Page Zoom

• Enable: Select "Yes" to activate zoom functionality on category pages or "No" to disable it.
• Select Zoom Type: Choose from "Basic Zoom," "Inner Zoom," or "Lens Zoom" for the type of zoom effect you want to use.
  Basic Zoom Options:
• Zoom Window Width: Set the width of the zoom window.
• Zoom Window Height: Set the height of the zoom window.
• Allow Tint: Enable or disable the tint effect.
• Window FadeIn/Out: Choose whether the zoom window should fade in and out.
• Zoom Window Position: Select the position of the zoom window on the image.
• Scroll Zoom: Enable or disable zooming with scroll.
• Inner Zoom Options:
• Scroll Zoom: Choose between "Default" or "Crosshair" for scroll zoom behavior.
• Window FadeIn/Out: Enable or disable fade in and out effects for the zoom window.
• Scroll Zoom: Enable or disable zooming with scroll.
• Lens Zoom Options:
• Window FadeIn/Out: Enable or disable fade in and out effects for the lens.
• Scroll Zoom: Enable or disable zooming with scroll.
• Enable Easing: Enable or disable easing effects for the lens.
• Lens Shape: Choose between "Square" or "Round" for the lens shape.
• Lens Size: Set the size of the lens.
• Lens FadeIn/Out: Enable or disable fade in and out effects for the lens.

Mobile View Zoom

• Zoom Type: Select "Inner Zoom" for zoom functionality on mobile devices.
• Scroll Zoom: Enable or disable zooming with scroll ("True" or "False").

Frontend View

• Basic Zoom Effect: Customize the basic zoom effect for the frontend, including the display and behavior of zoom features.

Inner Zoom Effect:

Lens Zoom Effect:

Tint Zoom Effect:

Gallery View:

Lens Effect with Gallery view:

Category Page Zoom Effect: