[Learner]

Originally Posted by sales@webosusa.com

I made this script and adapted by me for x-cart.

Use at your own risk. I made for x-cart 4.1.9 but i believe that will works with any version as long you put the right code that refers to the product image.

1. Copy the file "thumbnail.css" to the /skin1

<style type="text/css">

/*Credits: WEBOS USA */
/*URL: http://www.webosusa.com */
/*Credits: DIGITAL NOTIONS */
/*URL: http://www.digitalnotions.biz */
/*Credits: WEBOS BRASIL */
/*URL: http://www.webosbrasil.com */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #28697E;
padding: 5px;
left: -1000px;
border: 0px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
left: 600px; /*position where enlarged image should offset horizontally */

}

</style>

2. In /skin1/customer/home.tpl before </head> ad the line:

<link rel="stylesheet" href="{$SkinDir}/thumbnail.css" TYPE="text/css">

3.In /skin1/customer/main/products_t.tpl

Replace the line:

{include file="product_thumbnail.tpl" productid=$products[product].productid image_x=$products[product].tmbn_x|default:$config.Appearance.thumbnail_width image_y=$products[product].tmbn_y 

product=$products[product].product tmbn_url=$products[product].tmbn_url}

for this one:

<a class="thumbnail" href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_page}"><span><img src="{$products[product].tmbn_url}" /></span>{include 

file="product_thumbnail.tpl" productid=$products[product].productid image_x=$products[product].tmbn_x|default:$config.Appearance.thumbnail_width image_y=$products[product].tmbn_y 

product=$products[product].product tmbn_url=$products[product].tmbn_url}</a>

Here an example how will looks like.


http://www.support.webosusa.com/downloads/xcart/myMods/cssmouseover.gif

http://www.support.webosusa.com/downloads/xcart/myMods/cssmouseover_small.gif

Thanks webosusa for this codes. Now Is it possible to display enlarged imaged along with product short description simultaneously.Can you help me?
Thanks to all.