how to get mouseover pop up on products?

[cristywisty]

http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P360/

I use prostores as my store base and I am trying to use this code for my products but cant figure out where the code gets my larger image. I have my mouseover images saved as productid_mo.jpg. How does the code know which picture goes with which product? Or do I need to use a different code?

Thanks ~ Cristy

[rangana]

The larger image is the image surrounded by the span tag. I'm taking for example what is given by DD:


<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>


The highlighted is the larger image.

[cristywisty]

I figured that... just cant figure out how to get my image there?

This is what I have so far:

<a class="thumbnail" href="#thumb"><ss:image source="$product.photoImage" alt="$product.name" width="300px" height="456px" border="0" /><span><img src="media/tree.jpg" /><br /></span></a>

How does this code know which picture goes with which product? How do the 2 pictures get linked together?

Sorry... I am having such an issue but this is all new to me so patience and help would be greatly appreciated :)

Thanks ~ Cristy

[rangana]

What language is this BTW? I haven't seen <ss> tag yet.


<ss:image source="$product.photoImage" alt="$product.name" width="300px" height="456px" border="0" />

[cristywisty]

this is the code that prostores uses to pull items from the catalog

[rangana]

I'm not certain about this, but what happens when you do the same thing for the large image:


<ss:image source="$product.photoImage" alt="$product.name" width="300px" height="456px" border="0" />
<span><ss:image source="$product.photoImageLarge.jpg" alt="$product.name"/><br /></span>
</a>

[cristywisty]

this might be a little more specific ... found this answer on another forum.

custom markup language (SSML) to hit the database

~Cristy

[cristywisty]

Do I need to save my pictures exactly the same way with just the words "Large" at the end? Is that what you mean by: photoImageLarge.jpg ?

[rangana]

No, i'm not certain, that was just a wild guess. Try this instead:


$product.photoImage

[cristywisty]

ERROR: Source string "$product.photoImageLarge.jpg" is not valid. The property or method does not exist (com.kurant.storesense.metadata.PropertyNotFoundException: Class Product does not have a property named 'photoImageLarge'.).

I will try without the Large and see what happens

[cristywisty]

ERROR: Source string "$product.photoImage.jpg" is not valid. The property or method does not exist (com.kurant.storesense.metadata.PropertyNotFoundException: Class DisplayUrl does not have a property named 'jpg'.).

If I removed the part in red I dont get any errors in my code.

<ss:image source="$product.photoImage" alt="$product.name" width="300px" height="456px" border="0" />
<span><ss:image source="$product.photoImageLarge.jpg" alt="$product.name"/><br /></span>
</a>

[rangana]

<ss:image source="$product.photoImage" alt="$product.name"/>

[cristywisty]

I get this erro when I take off othe "Large". If I remove the code in red (with or without the Large) my error is gone?

ERROR: Source string "$product.photoImage.jpg" is not valid. The property or method does not exist (com.kurant.storesense.metadata.PropertyNotFoundException: Class DisplayUrl does not have a property named 'jpg'.).

[rangana]

It should only be: $product.photoImage.

What happens whe you remove ".jpg".

[cristywisty]

if i do that then i get a slightly smaller picture right below the original image

[rangana]

It's (maybe) because your image is small by default. Try to have a larger image instead.

Hope makes sense to you.

[cristywisty]

I didnt do anything different to the picture. Its like its pulling the same picture just about 1/2 inch narrower. its not making it a rollover either...just a static image under my original image.

[rangana]

Do you have a link?

[cristywisty]

This is a link for an item that has the code that isnt working. I left the original code in where the 2nd rollover picture is suppose to be. If I change that then I get 2 pictures that stay up at all times. I can load that code again when I know you are looking... just prefer my site to look clean if I'm not working on it.

http://store.mysweetmystique.com/servlet/-strse-397/2pc-Flyaway-zebra-babydoll/Detail

Thanks for your help!

[cristywisty]

I got the code to work... kind of :)

my enlarged pictures are really grainy what is the best way to fix that?