X-Cart forums

[Yrik]

Thanks everyone for your posts! I just adjusted this for 4.2 version. The only difference is instead of products[product] use product

New "Replace with" for step 3 is:
<a class="thumbnail" href="product.php?productid={$product.productid}&a mp;cat={$cat}&amp;page={$navigation_page}">
<span><img src="image.php?id={$product.productid}&type=P" /></span>
{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.tmbn_x|default:$config.Appearance .thumbnail_width image_y=$product.tmbn_y product=$product.product tmbn_url=$product.tmbn_url}</a>

Now, what would be nice is a way to offset it from position of mouse or something. The popup jumps somewhat strangely.

Take a look at my result here: www.ijitsa.com

[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.

[royng]

on the pop up image, is that a stressed thumbnail or the product image?

[Learner]

Originally Posted by Cankus

İf you want real product image on OnMouseOver you can use this link in products_t.tpl

<a class="thumbnail" href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_p age}"><span><img src="image.php?id={$products[product].productid}&type=P" /></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>

Merih

www.elitmarket.com

Thanks Cankus for your codes.Now is it possible to view image along with short description on top of each product, instead of right corner?Can you help me?
Thank you.

[Learner]

What for 4.3 versions???

[xtech]

Any update of 4.3 ?? This is very beautiful completed mod.I request Pedro to update codes for 4.3 versions or tell someone if existing codes work on 4.3 versions??

Waiting for someone to reply.

[Learner]

Any one can code this for 4.3 and latest 4.4 versions??

[Learner]

Any Update about 4.3 and latest 4.4 versions??

[Cankus]

Version : 4.4.1 Pro Light & Lucid (3 column)

Step - 1
-------------------------------------------
Add this code include end of page skin/common_files/css/main.css
---------------------------------------------
.thumbnail{
position: relative;
z-index: 0;
}

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

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: brown;
padding: 3px;
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: 300px; /*position where enlarged image should offset horizontally */

Step - 2
----------------------------------------------------------------
add this code skin/common_files/customer/main/products_t.tpl
line 62 (maybe different line other skins)
----------------------------------------------------------------
Find this code:
<a href="{$product.alt_url|default:$product.page_url| amp}">{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.tmbn_x image_y=$product.tmbn_y product=$product.product tmbn_url=$product.tmbn_url}</a>

And replace this code:
<a class="thumbnail" href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_p age}"><span><img src="image.php?id={$product.productid}&type=P" /></span>{include file="product_thumbnail.tpl" productid=$product.productid image_x=$products.tmbn_x|default:$config.Appearanc e.thumbnail_width image_y=$products.tmbn_y product=$products.product tmbn_url=$products.tmbn_url}</a>

Finish

If you want to add this options to other skins you must change 2 files below

1- skin/skin_name/css/altskin.css (step-1)
2- skin/skin_name/customer/products_t.tpl (step-2)

[Learner]

Thanks Cankus for your response and for Version : 4.3.1 Gold Light & Lucid (3 column),same code or different code??

Waiting for your reply...