Not to take away from the retail dynamic preview mods out there but I wanted to give back to the community and it looks like we havent had a free addon in a while. Im sure with the pay mods you will get support and with this you get none :mrgreen:
What it does is add the ability to enlarge a product image by mousing over it.
If you would like to see a working demo of this just visit my site ([url]http://tinyurl.com/ybtz4mp[/url]) and mouse over the product image.
Here are the instructions but BE WARNED always MAKE A BACKUP before you modify anything! This has ONLY been tested with 2.0.10-2.0.11 but its assumed it will work with most 2.0.x versions.
Please feel free to clean up the code, please feel free to include anything I leave out, and please if you like it, feel free to donate (tirade75@gmail.com). Every dollar is appreciated!
NOTICE: I would suggest making sure you have the my_changes addon enabled and creating the appropriate directories so that future upgrades of cs-cart leave little chance of breaking this mod. Ive included instructions for both below.
- Go HERE and download the wz_tooltip.js and unzip it into your \js folder.
Modify your /skins/YOUR SKIN/customer/addons/my_changes/hooks/index/styles.post.tpl file to include this directly under the BODY section: (if you dont use hooks you can modify index.tpl)
2. Modify your /skins/YOUR SKIN/addons/my_changes/styles.css to include this at the end: (if you dont use hooks just add it to your styles.css)
/*dynamic preview*/
a.tooltip_ss {
position: relative;
/*this is the key*/
z-index: 100;
background-color: #fff;
color: #000;
text-decoration: none;
}
a.tooltip_ss:hover {
z-index: 100;
background-color: #C4C4C4;
position: relative;
}
a.tooltip_ss span {
display: none;
}
a.tooltip_ss:hover span {
/*the span will display just on: hover state*/
display: block;
position: absolute;
width: auto;
border: 1px solid #C4C4C4;
background-color: #fff;
color: #000;
text-align: center;
}
3. Create a file called image_dp.tpl and place in the /skins/YOUR SKIN/customer/addons/my_changes/common_templates folder (or place it in /skins/YOUR SKIN/customer/common_templates if you dont use hooks)
Here are the contents of this file:
```php
{* $Id: image.tpl 7493 2009-05-19 06:49:31Z lexa $ *}
{strip}
{if $show_thumbnail != “Y”}
{if !$image_width}
{if $images.icon.image_x}
{assign var=“image_width” value=$images.icon.image_x}
{/if}
{if $images.icon.image_y}
{assign var=“image_height” value=$images.icon.image_y}
{/if}
{else}
{if $images.icon.image_x && $images.icon.image_y}
{math equation=“new_x * y / x” new_x=$image_width x=$images.icon.image_x y=$images.icon.image_y format=“%d” assign=“image_height”}
{/if}
{/if}
{/if}
{if $show_thumbnail == “Y” && ($image_width || $image_height) && $images.image_id}
{assign var=“object_type” value=$object_type|default:“product”}
{assign var=“icon_image_path” value=$images.icon.image_path|fn_generate_thumbnail:$image_width:$image_height:$make_box}
{if $make_box == true}
{assign var=“image_height” value=$image_width}
{/if}
{else}
{assign var=“icon_image_path” value=$images.icon.image_path}
{/if}
{if !$images.icon.is_flash}
{if $show_detailed_link && $images.detailed_id}
’, WIDTH, {$images.detailed.image_x}, PADDING, 6, BGCOLOR, ‘#ffffff’)” onMouseOut=“UnTip()”>
{/if}
{if !($object_type == “category” && !$icon_image_path)}
{/if}
{if $show_detailed_link && $images.detailed_id}
{/if}
{else}
” {if $image_width}width=“{$image_width}”{/if} {if $image_height}height=“{$image_height}”{/if}>
{if $flash_vars}
{/if}
{/if}
{if $show_detailed_link}
{/if}
{/strip}
```
4. In /skins/YOUR SKIN/customer/views/products/components/products_images.tpl change the following code:
From
```php {/if}
{include file="common_templates/image.tpl" obj_id=$product.product_id images=$image_pair_var object_type="product" class="cm-thumbnails"}
{foreach from=$product.image_pairs item="image_pair"}
{if $image_pair}
{include file="common_templates/image.tpl" images=$image_pair object_type="product" class="cm-thumbnails hidden" detailed_link_class="hidden" obj_id="`$product.product_id`_`$image_pair.image_id`"}
{/if}
```
To
```php {/if}
{include file="addons/my_changes/common_templates/image_dp.tpl" obj_id=$product.product_id images=$image_pair_var object_type="product" class="cm-thumbnails"}
{foreach from=$product.image_pairs item="image_pair"}
{if $image_pair}
{include file="addons/my_changes/common_templates/image_dp.tpl" images=$image_pair object_type="product" class="cm-thumbnails hidden" detailed_link_class="hidden" obj_id="`$product.product_id`_`$image_pair.image_id`"}
{/if}
```
At the moment Im only using this on my product details page but you can use this on any page you like with very little modification. Also Ive currently got it set to show the full image size because I already resize all of my images to 1024x768 or smaller, but you can specify the max image size by modifying image_dp.tpl
If you want to see it in action check out my site([url]http://tinyurl.com/ybtz4mp[/url]) and mouse over the product image.