Hover & Zoom Gallery

The Hover & Zoom Gallery displays a single main image with a row of thumbnail images beneath. When the user hovers over a thumbnail image, that image is displayed as the main image. This gallery layout is inspired by Amazon’s product galleries, and has been a very highly-requested widget.

The “zoom” in Hover & Zoom comes into play when hovering over the main image, allowing site visitors to get a closer look at your products or photos. And for even more zooming fun, the zoom level can be further controlled using the mouse wheel or scroll gestures on your input device.

Demo: https://demo.wocode.com/hover-zoom-gallery

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the gallery to appear.

WIDGET OPTIONS

  • Open the widget option panel.
  • Unique ID: Be sure to use a Unique ID if there will be multiple Hover & Zoom widgets on the same page.
  • Gallery Images: This is where you will add all of the images for your gallery. Click “List Item” to add the first image, then click “Add Image” to add additional images: Image, Large Image and Thumbnail Image. The first loader (Image) is required and the remaining loaders are optional. The optional Large and Thumbnail loaders allow you to load separate images for each usage if you desire.
    (Note: We strongly suggest using images that are the same aspect ratio. See more on this below in the “Image Tips” section.)
  • Zoom Window Position: This setting provides several options for the position and style of the zoom; such as left, right, inside or lens. Note that the size of the widget and the site visitor’s screen will impact how this setting works. If the site visitor is viewing your site on a large monitor, then they will see the zoom window in the placement you select (left, right, etc.). However, if the screen size does not have the space in the viewport to show the zoom window, the widget defaults to the “Inside” setting, and the zoom functionality will be seen inside the main image window.
  • Change Image on Thumbnail Hover: This setting toggles two different behaviors: when enabled, the main image window shows the thumbnail image that is being hovered upon. When disabled, the thumbnail must be clicked to show the image in the main window.
  • Use Carousel for Thumbnails: This setting toggles carousel behavior for the row of thumbnail images.

DESIGN SETTINGS

In the Design section, you will find extensive styling options for the gallery. Most of the settings are self-explanatory, and will not be covered in detail here. However, there are several options that we will cover in detail here to explain their purpose.

Main Image Styling menu:

  • Force Image Dimension: This option constrains all of the images to be the same size. This creates a uniform and smooth experience when using the gallery. But note that option crops images to “fill” the image container. So if you’re using a mix of landscape and portrait images, there may be significant cropping of image content. See the “Image Tips” section for more information.
  • Fill Image Container: This will force the main image to be displayed proportionately to the forced image dimensions.

Zoom Window Styling menu:

  • Window Size: This changes the size of the zoom window that is seen when you hover over the main gallery image.
  • Auto: This automatically generates the size of the zoom window.
  • Custom: This allows you to set a specific size for the zoom window.
  • Horizontal Offset (px): Adjusts the horizontal padding of the zoom window (ie: moves the zoom window closer/further from the main image left/right)
  • Vertical Offset (px): Adjusts the vertical padding of the zoom window (ie: moves the zoom window closer/further from the main image up/down)
  • Use Colored Lens: Enables the ability to change the color and opacity of the zoom window when hovering the main image.
  • Scale on Mouse Scroll: enable/disable the ability to zoom using the mouse wheel or scroll gestures.

Thumbnails Styling menu:

  • Container Vertical Margin: Adjust the space between the top of the thumbnails and the bottom of the main image.
  • Fill Thumbnail Container: Force images in the thumbnail to resize and fill the thumbnail proportionately rather than stretching/shrinking to fill the thumbnail.

Within the Thumbnail Carousel Styling you will find the styling for the gallery thumbnails carousel. These settings are only applicable when the Use Carousel for Thumbnails setting is enabled.

IMAGE TIPS

  • We strongly suggest using images that are all the exact same aspect ratio. This results in a very smooth and uniform experience for gallery users.
  • The aspect ratio of your images can be adjusted using a photo editor such as Photoshop. The cropping tool in your photo editor likely has size or ratio settings you can use to accomplish this. The actual pixel dimensions are not crucial, and not necessary to make all of your images the same pixel dimensions. But be sure that your images are large enough in size to support zooming.
  • The Force Image Dimension and Fill Image Container settings will force all images to display in the same aspect ratio in the gallery. These settings save the steps described above, of prepping images to have the same aspect ratio. The drawback however is that image content may be cropped when using a mix of landscape and portrait-shaped images.