How to upload 2 Images for the same product!

[zytoon]

How to upload 2 Images for the same product but with different sizes!

 

The first image small (just to show in home page and when visitor make search as a thumbnail) 120 * 120 pixel

 

The second image big (Just to show in product info) 500 * 200 pixel

 

**** i didn't find in Add-Ons, May you help me please?

[♥mdtaylorlrim]

How to upload 2 Images for the same product but with different sizes!

 

The first image small (just to show in home page and when visitor make search as a thumbnail) 120 * 120 pixel

 

The second image big (Just to show in product info) 500 * 200 pixel

 

**** i didn't find in Add-Ons, May you help me please?

Well the program was written to use a thumbnail image for both, then allow a pop up (click to enlarge) in the product description. If utilized as intended you should be able to define only one image dimension (either height or width, but not both) in your configuration, and upload images at or near 640 x 480.

 

The use of a thumbnailer add on is preferred.

[jhande]

I used this contribution/add-on - Big Images Modification v1.25

 

I did not want a pop-up larger image, but instead a larger image on the product info page. So I made a slight edit to show the "Big Image".

 

[zytoon]

Thank you guys

 

The Idea is how to ignore pop-up window! its so boring for visitors :(

 

another question: How to add pop-up window in the same page? for example:

if the mouse over the image big image show up above the thumbnail image.

 

any add-ons for this situation?

 

 

Thank you for help

[beanzy]

Thank you guys

 

The Idea is how to ignore pop-up window! its so boring for visitors :(

 

another question: How to add pop-up window in the same page? for example:

if the mouse over the image big image show up above the thumbnail image.

 

any add-ons for this situation?

 

 

Thank you for help

 

 

You can place a div anywhere on your page you want your smaller image to appear. See the div below:

 

<div align="center"><a class="thumbnail" href="http://your domain"><img src="images/10.png" alt="Any Text you want" width="83" height="78" border="0" /><span><img src="images/10.png" /><br>

Description of Item <br> more descript</span></a></div>

 

Next, you can copy the below styles into your Stylesheet for the thumbnail class then refresh your page and see the position of the hover. Adjust where you want the larger image to appear. See the rem statements for which style to adjust for positioning and what size you want as both background and image. This is a pretty cool easy way to have hover over image and to display the image larger....

 

<style type="text/css">

 

 

.thumbnail{

position: relative;

z-index: 23;

 

}

 

.thumbnail:hover{

background-color: transparent;

z-index: 20;

 

}

 

.thumbnail span{ /*CSS for enlarged image*/

position: absolute;

background-image: url(../images/popbackpink.png); /*background for pop image */

padding-top: 15px; /*top position where enlarged image should offset vertically */

background-repeat:no-repeat;

background-position:center;

padding: 5px;

middle: -10px;

/*border: 1px dashed gray;*/ /*image border if you want to use*/

height: 480px; /*position pop up*/

width: 547px;

visibility: hidden;

color: black;

text-decoration: none;

}

 

.thumbnail span img{ /*enlarged image*/

border-width: 0;

padding: 2px;

}

 

.thumbnail:hover span{ /*CSS for enlarged image on hover*/

visibility: visible;

top: 5px;

right: 390px; /*right position where enlarged image should offset horizontally */

 

}

 

</style>

 

I believe this answers your question correctly?

[Guest]

Thank you guys

The Idea is how to ignore pop-up window! its so boring for visitors

another question: How to add pop-up window in the same page? for example:

if the mouse over the image big image show up above the thumbnail image

any add-ons for this situation?

Thank you for help

 

Maybe this is what you are looking for: Simple Multiple Images (Unlimited) with Fancy Popups V1.3.5

You can see it in use at my site.