Plugins::hoverbox3

From ZenMagick Wiki

Contents 1 Description 2 Instructions 3 Template changes 4 Examples 4.1 Product info view 4.2 Additional images 4.3 Reviews sidebox

Description

HoverBox3 is one of many available solutions implementing the "Lightbox Effect" to display larger versions of images on websites. The code of this plugin is based on the original Zen Cart HoverBox3 mod for Zen Cart.

Instructions

1. Download the plugin and install like any other ZenMagick plugin.
2. Install using the ZenMagick Plugin Manager in zen cart admin.
3. Configure HoverBox3 settings as required (after the plugin is installed there will be a new option under Configuration)

Template changes

Changes to templates are minimal. All additional resources like JavaScript and CSS files will be included automatically. However, it is required to make those new .js and .css files available to your theme:

1. Copy the hover3 folder from the plugin's theme_files directory into you theme's content directory.
   After that the file ic_hoverbox3.js should have the path zenmagick/themes/[YOUR_THEME]/content/hover3/ic_hoverbox3.js.
   To use the plugin from more than one theme, you can also copy the hover3 folder into the default theme.
2. To use HoverBox3 in your templates, use the function hover3_product_image_link(..) instead of.
   It expects two parameter (optionally three):
   
   1. The product (a ZMProduct instance, usually this should be $zm_product)
   2. A ZMImageInfo instance.
   3. A flag to indicate whether to show the Larger Image image. Default is true.

The hover3_product_image_link(..) can be used anywhere in your template. Just be careful to avoid displaying the same product more than once, as that might create slideshows with duplicate images. (Images are grouped based on the product id, so it is possible to have multiple slideshows for different products on a single page)

If you need to change any JavaScript defaults manually you may want to check/edit ic_hoverbox_config.tpl.

Examples

Product info view

Replace the line (around line #34):

<a href="<?php $net->absolute($imageInfo->getLargeImage()) ?>" onclick="productPopup(event, this); return false;"><?php zm_image($imageInfo, PRODUCT_IMAGE_MEDIUM) ?></a>

with this call to hover3_product_image_link():

<?php hover3_product_image_link($product, $imageInfo) ?>

Additional images

Replace:

<a href="<?php $net->absolute($addImg->getLargeImage()) ?>" onclick="productPopup(event, this); return false;"><img src="<?php $net->absolute($addImg->getDefaultImage()) ?>" alt="" title="" /></a>

with:

<?php hover3_product_image_link($product, $addImg, false) ?>

Reviews sidebox

Replace:

<a href="<?php $net->product($review->getProductId()) ?>"><?php $html->image($review->getProductImageInfo()) ?></a>

with:

<?php $product = ZMProducts::instance()->getProductForId($review->getProductId()); ?>
<?php hover3_product_image_link($product), $review->getProductImageInfo(), false) ?>