PopUp Image Viewer with CSS code. OnMouseOver view the thumbnail maximized.

sales@webosusa.com · #1 01-13-2008, 03:09 AM

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

Code:


<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:

Code:


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

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

Replace the line:

Code:


{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:

Code:


<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

DezineJunkie · #2 02-06-2008, 11:01 AM

hey pedro
thanks for the code- i just installed but my images blew up and the thumb is sitting directly next to the large one only smaller- any reason why

i also have Dymanic Images (Telafirma) they are compatible correct?

sales@webosusa.com · #3 02-07-2008, 03:00 PM

Well.

This MOD will get your original image on the original size and will show on the direction specified on the code below....

Code:


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

}

Unfortunaly i am trying to put the image to folow the mouse but i didn't quite get that yet.

This should work fine with any 4.1.x version. And with no compatibility problems with Dymanic Images (Telafirma).

Send me an image of the code in action on your website so i can have an idea what is happening? Can you do that?

Thanks!

DezineJunkie · #4 02-08-2008, 06:35 AM

Quote:

Originally Posted by sales@webosusa.com

Well.

This MOD will get your original image on the original size and will show on the direction specified on the code below....

Code:


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

}

i set it to transparent and that did it- nice script thanx a bunch
Unfortunaly i am trying to put the image to folow the mouse but i didn't quite get that yet.

This should work fine with any 4.1.x version. And with no compatibility problems with Dymanic Images (Telafirma).

Send me an image of the code in action on your website so i can have an idea what is happening? Can you do that?

Thanks!

hey pedro
i did get it working fine- i made changes to the size of the image- with no probem.
One question is how do i get rid of the Black Box Border around image- to just have the image itself with no border? i would like to see if that looks a bit lighter or not graphicly.

sales@webosusa.com · #5 02-08-2008, 06:55 AM

The board color will be:

Code:


background-color: #28697E;

The padding (board thickness) will be...

Code:


padding: 5px;

But this have the home background color by default.... if you do not want to be the default of the color for "Gif" files (transparent) you got to put images with no transparency. no problem if using "Jpg" files. Other thing.... to the images be able to show large onMauoseOver your image have to be with full path...

Ex.: www.your-site.com/images/sample.gif if you put direct on database ... means if you choose the images when you putting on you product page from the database.... wont work and will show a little box with your background color.

Any question let me know.

Cya!

DezineJunkie · #6 02-08-2008, 09:28 AM

Quote:

Originally Posted by DezineJunkie

hey pedro
i did get it working fine- i made changes to the size of the image- with no probem.
One question is how do i get rid of the Black Box Border around image- to just have the image itself with no border? i would like to see if that looks a bit lighter or not graphicly.

heya pedro- have a look at www.istock.com
they have this feature- (or the one from 7dana which unfor. is not compatibe with Dynamic Images from Telafirma)- the script u put up no prob so far.
see how on istock.com when you mouse over, the image is tighter to the orginal image.
not so much to the L or R. How would i acheive this/

sales@webosusa.com · #7 02-08-2008, 06:01 PM

It╢s not the same at all. That one cannot link the image to a specific page.

I know a code to do that, but i never adopt on x-cart. If you want let me know.

TelaFirma · #8 02-09-2008, 03:29 AM

Quote:

Originally Posted by DezineJunkie

... (or the one from 7dana which unfor. is not compatibe with Dynamic Images from Telafirma)- ...

Not entirely true. You only need to make a small modification to the script.

sales@webosusa.com · #9 02-09-2008, 05:39 PM

Correction... i just install the "TelaFirma╢s Radom Products and maid my MOD do not work if you use database to link your images for the option "Product thumbnails" but i got to work if your images are stored on the File Sistem. Do that and let me know if works with TF Image MOD.
Cya,

DezineJunkie · #10 02-09-2008, 06:31 PM

Is Random Products the same as Dynamic Images?
the script you gave me (the first one) works great, im not sure what is the difference from that one from the one that 7dana Sells? and to Telafirma i did not know there was a WA- i had purchased the 7dana mod- and they refunded- u should let them know about the edit to fix the compatability issue- but what is the dif between the two- Pedro vs 7dana
I think my image files are in a File Folder vs. Server- i know that is the prefered way to have it-
im just using temp images right now and will delete all when im ready to upload my own product.
and thats another story- how to upload a CSV file- or whatever its called