FREE Dynamic Preview Add-On

Partners Ideas & Requests
1

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.


  1. 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)}

“{$images.icon.alt}”

{/if}



{if $show_detailed_link && $images.detailed_id}





{/if}

{else}

http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0” {if $image_width}width=“{$image_width}”{/if} {if $image_height}height=“{$image_height}”{/if}>





{if $flash_vars}

{/if}


{/if}

{if $show_detailed_link}


{$lang.view_larger_image}


{/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.
2

Thanks very much in the name the community! But can you descibe a litle bit more, what makes the Addon?



Have you an Demo?



Thanks!

3

Dynamic preview allows you to mouse over a thumbnail image and have the image pop-up as a larger preview window.



If you would like to see a working demo of this just visit my site (in my signature) and check out one of the products (that have images).



I only have this enabled on the product details page.

4

I very much appreciate the sentiment you expressed regarding ‘Free Addons’. So thank you for your contribution.

5

Just got in but a quick glance tells me that I was pretty close on the install instructions just going by memory. Someone please test it out and tell us if it works for you :wink:

6

Is there any demo ?

7

[quote name=‘miracles’]Is there any demo ?[/QUOTE]

Do you bother reading?



From post #1:

[QUOTE]If you want to see it in action check out my site in my signature and look at one of the products.[/QUOTE]



From post #3 (which answered the same question):

[QUOTE]Dynamic preview allows you to mouse over a thumbnail image and have the image pop-up as a larger preview window.



If you would like to see a working demo of this just visit my site (in my signature) and check out one of the products (that have images).



I only have this enabled on the product details page.[/QUOTE]

8

[quote name=‘jobosales’]Do you bother reading?[/quote]



No, how do you install it? mine doesn’t work! someone fix it for me!

9
  1. Made a change to the install instructions (was missing a piece of the CSS code)


  2. I reworded the start of the post to say DEMO HERE CLICK ME!



    :rolleyes:
10

Very cool. I like it, though I see more use for it on the category pages where the small thumbnails are.



How would I add this to the category pages for the thumbnails instead of on the product detail page?



Again, very cool mod.

11

i’ve managed to do everything but its not working (i think i’ve done it correctly) nothing sems to have happened



http://www.ukhaberdashery.co.uk (test site) if you want to view it



skins/your-skin/customer/views/products/components/product_images.tpl is the location of the file i altered



anyone , any ideas.



EDIT .GOT IT WORKING



Dont know anything about internet but was looking through the text and realized the bit i was told to copy/past needed to be modified (THE YOURSKIN DIRECTORY NEEDS TO BE CHANGED TO WHAT YOUR USING)


12

[quote name=‘Sleven’]Very cool. I like it, though I see more use for it on the category pages where the small thumbnails are.



How would I add this to the category pages for the thumbnails instead of on the product detail page?



Again, very cool mod.[/QUOTE]



ME TOO! seems a better place for it customer wise



EDIT… looked around (ftp) and this is beyond me. way beyond me. Anyone got the code or the tpl file i need to change to get the product list to have dynamic preview. any help appreciated.

13

Glad you got it working!



That makes me feel better that its easy enough to follow.



I do not use it for product list pages but give me a bit and I’ll see if I can get it working or post how to do it. My site officially launches Jan 1st so Im in overdrive mode at the moment and the guy who helped me make with the mod is visiting his folks for the holidays.

14

Sorry but i havent found a working demo link in this thread… i am blind?

15

[quote name=‘Triplex’]Sorry but i havent found a working demo link in this thread… i am blind?[/QUOTE]



Nope. Check his public profile and view his homepage to see how this works.

16

Sorry, I cleaned out my signature and it wiped out links from previous posts.



Ive updated the initial post to show the site.

17

from wich you have the Flash generator? It is a Script?

18

[quote name=‘Triplex’]from wich you have the Flash generator? It is a Script?[/QUOTE]



I got it from here



[url]Buy Plugins & Code from CodeCanyon

19

Ive updated the instructions to install it using the my_changes addon provided with CS-Cart.



Ive tested it and it works.



I need 2 things


  1. Does anyone know the hook (if there is one) for modifying /views/products/components/product_images.tpl


  2. Anyone willing to write this into an installable add-on? If so Ive got no problem with free distribution.
20

There is a hook in /skins/YOURSKIN/customer/views/products/view.tpl:

```php {hook name=“products:view_main_info”}



[B][COLOR="Red"]{include file="views/products/components/product_images.tpl" product=$product show_detailed_link="Y"}[/COLOR][/B]


{include file="blocks/list_templates/simple_list.tpl" product=$product show_sku=true show_old_price=true show_price=true show_list_discount=true show_clean_price=true details_page=true show_discount_label=true show_product_amount=true show_product_options=true hide_form=$smarty.capture.val_hide_form show_qty=true min_qty=true show_edp=true show_add_to_cart=true show_list_buttons=true but_role="action" capture_buttons=$smarty.capture.val_capture_buttons capture_product_options=$smarty.capture.val_capture_options_vs_qty}


{/hook} ```

You could use this to change the include to product_images.tpl.

Bob