Skip to content

Latest commit

 

History

History
37 lines (29 loc) · 2.47 KB

c_zooming.md

File metadata and controls

37 lines (29 loc) · 2.47 KB
Raw

Back

Zooming (fancy hover effect)

When you have enabled IH small images zoom on hover, the medium or large product image (depending on your setting for IH small images zoom on hover size) pops up on the storefront when hovering over a small product image.

Note:

  1. If you have enabled this feature, you might have found that the zoom feature can be disruptive to your customers using smaller, hand-held devices. The as-shipped style_imagehover.css includes examples using CSS3 Media Queries to control whether or not the image-hover is displayed. The defaults in that file disable the image-hover display on screen-sizes that are 480px or smaller in width.

For this feature to work on these product-listing pages:

  1. All Products
  2. New Products
  3. Featured Products
  4. Special Products

... these base Zen Cart Configuration->Images settings must match the respective Small Image Width and Small Image Height settings:

  1. Subcategory Image Width
  2. Subcategory Image Height
  3. Image - Product Listing Width
  4. Image - Product Listing Height
  5. Image - Product New Listing Width
  6. Image - Product New Listing Height
  7. Image - New Products Width
  8. Image - New Products Height
  9. Image - Featured Products Width
  10. Image - Featured Products Height
  11. Image - Product All Listing Width
  12. Image - Product All Listing Height

Notes:

  1. If you want to add the hover effect to category images, you must set Category Icon Image Width - Product Info Pages and Category Icon Image Height - Product Info Pages to match Small Image Width and Small Image Height, respectively.
  2. If you selected Medium as your on-hover image, you control the size of that image via the Product Info - Image Width and Product Info - Image Height settings.
    • This value cannot be larger than your largest image (IH5 does not enlarge images) or smaller than your small images, i.e. its dimensions must fall between the small- and large-image settings.
  3. If you selected Large as your on-hover image, you control the size of that image via the IH large images maximum width/height settings.
    • If the largest image you upload is smaller than these dimensions, IH5 will not enlarge your image. If the largest image you upload is larger than these dimensions, IH5 will re-size your image based on these settings, maintaining the image's aspect ratio.