Big Day Release: Magento Product View Gallery

March 13, 2013 Andrei Danilchyk Magento
Big Day Release: Magento Product View Gallery

Magento Product View Gallery is the all-in-one extension, providing flexible configuration of your product galleries. After installing the module you’ll have the possibility of setting neat scroll bars to look through the images as well as adding video clips, that can be played instantly right on the product page. Besides, two legendary extensions – Cloud Zoom and Fancybox – were embedded for you to use them and adjust all the settings at one place.

Key features:

  • Enhanced configuration of product galleries
  • Cloud Zoom image zoom plugin embedded
  • FancyBox images displaying plugin embedded
  • Scrolling through thumbnails
  • Possibility of arranging pictures on the page
  • Possibility of adding video and playing it on the page

Two outstanding image plugins, Cloud Zoom and Fancybox, are now both integrated into the Magento Product View Gallery extension.

Cloud Zoom is a popular fly-out jQuery image zoom plugin used on many high profile retail sites. It is a mature and reliable image zoom solution. FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

Along with using modules, admin can add videos to product pages and configure scrolling through thumbnails. Nothing now prevents you from making all product galleries irresistibly perfect!

How to use it?

Log in to the demo admin panel, navigate to System –> Configuration –> Product View Gallery.

Extension settings

In Main Image and Thumbs areas, define the size of the corresponding product pictures in pixels.

In the Animation Speed field enter how many milliseconds it will take images to appear, fade away and perform any other actions related to animation.

In the next two fields, enable or disable Cloudzoom and Fancybox modules correspondingly.

Select ready-to-use configurations or customize the modules

In the next two fields, configure these modules. You may select the ready-to-use mode or configure all the parameters of either extension yourself.

Cloud Zoom is a popular fly-out jQuery image zoom plugin used on many high profile retail sites. It is a mature and reliable image zoom solution. Learn more about Cloud Zoom as well as check for the Quick Start Guide to find out more about extension customization here.

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page. Learn more about FancyBox as well as check for the How to use Guide and Tips&Tricks section to find out more about extension customization here.

Next, configure scroll for the user to easily browse through product images.

Set up the scroll

In the Location menu select where thumbnail pictures should be located relative to the main image; number of thumbnail images displayed can be entered in the next Item Qty field.

Set the Scroll Buttons Position in the next menu: select, where the button image should appear.

Finally, set the Scroll Speed in milliseconds.

In case you want to embed a video demonstration of your product, feel free to do it.

Navigate to Catalog –> Manage Products.

Click the Edit action in the line corresponding to the product you want to add the video clip to.

Video feature

In the Video tab, in the Video Source drop-down menu select the type of video you want to be played along with images.

For Youtube and Remote Server, insert the video link. For Local File, upload the video clip in the mp4 format.

Whenever a user places a mouse pointer over the main image on a product page, Cloud Zoom gets triggered. A designated area is being zoomed.

Cloud Zoom in action

The user clicks on the image to view the full size. This is the function of Fancybox.

Fancybox in action

The user scrolls through the thumbnail images with the help of scroll icons you’ve configured.

Scrolling through all images

The user plays the video with one simple click.

Video feature

 

Visit the demo page or read the user guide to see how the Product View Gallery works.



Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *