I figured I post this for anyone that might need it. It is using the Highslide code.

What this code does is counts how many images the product has first. If it is equal to 1 then it uses the highslide zoom feature. If it is greater than 1 it uses the regular gallery feature without the highslide zoom.

In the product layout design you will need to reference the javascript file.


Then still in the product layout design you would put this where the product image goes.


Of course you don't really need the zoom.jpg image or you could change it to whatever you want.

Here is an example:
http://www.agkits.com/Caterpillar-3408-Crankshaft-Early.aspx


Edit: I should also note that the "100,100,1,1" in the above code is the size of the gallery window. (width, height, scrollbars, resizable)

More info:
http://forums.networksolutions.com/index.p...post&p=4812

Great Info thanks!

agkits,

I love how this works but I have tried a few things and can not seem to get it to work. Did you have to modify any of the files before you uploaded them?

I know I am missing something which is why I can not get it to work right.

EQ,

I don't have anything modified. You are using this code in: Home > Design > Product Layout Design > Edit Product Layout Design ?

You also have to have the highslide downloaded and uploaded to your store. I have mine in a folder in the root directory called highslide.

I have this at the top of my Product layout design...



The only thing I modified was the second Zoom.jpg to Zoom2.jpg so I have 2 different images.

You can see the differences here:
http://www.agkits.com/Caterpillar-3408-Crankshaft-Early.aspx
vs
http://www.agkits.com/Caterpillar-3208-Ful...ial-3Z-90N.aspx

With one image it zooms and displays a magnify image. With multiple image is displays the camera image.

If you did everything above then it probably has to do with your directory structure.

I have a Highslide folder in the root directory. Inside that are the following files:
highslide-html.js
highslide-html.packed.js
highslide.js
highslide.packed.js
swfobject.js

Also inside that is a graphics folder. In the graphics folder there are the following files:
controlbar2.gif
controlbar3.gif
controlbar4-hover.gif
controlbar4.gif
fullexpand.gif
loader.gif
loader.white.gif

Inside that folder there is another folder called outlines. In the outlines folder there are the following files:

beveled.png
drop-shadow.png
outer-glow.png
rounded-white.png

I might add that I had to change the z-index css property of my menu on another store so that the zoom image was "always on top". I notice you have a flash menu, so if that happens you may need to do that if you run into that issue.

agkits,

Thanks for the added details, I see what I did wrong and it does have to do with what I uploaded to the directory I created.

I will make the changes and see whether I need to modify the css or not. Thanks again I appreciate it.

I requested to allow us to upload .CUR files so the Magnify cursor can be uploaded in the future.

agkits,

Sorry to be asking so many questions I just can not seem to get this to function. I have all the files in the directories as you stated but where did the Zoom.jpg and Zoom.jp2 come from? What do I need to do to create these image files.

Also what seems to have is I do not get anything to display when I use the code.

Ok I am stupid....the zoom is the image you have that people select. Hehe nice!

Well I seem to have it working when I place the code in the bottom of the page so there must me something within the rest of the code on the page where I want to place this which is causing things not to functioning correctly.

Also I use the thumbnail image <%Product.ThumbnailImageUrl%> for the initial product image so which one would I modify within the code to make that the first one to show up? Or am I not doing something right with how I have the images setup?

I think I got it to work, thanks for the help!

With the flash this is a problem, the images will display under the flash menu. I started looking in the css file and found where the z-index reference was but I am not sure what to change.

EQ,

Glad to see you got it working...

I actually changed the z-index of my menu by lowering it because the z-index was set to something like 99999. I didn't change the z-index in the highslide code. Try giving your embed a style like this:



An element with greater stack order is always in front of another element with lower stack order. I forget what the z-index value is in the highslide. Whatever it is you want a lower value than that, because you want it to be behind the highslide. Since you haven't defined a z-index for the flash, changing the z-index of the highslide won't affect anything. If the above doesn't work, try surrounding the flash with a div and styling it like this:



Also check the code in your product display editor, if you zoom your image now... then drag it out of the way, in the top left corner there is a <%Product.Name%> text.

I'll check w/ you tomorrow, it's getting late here on the east coast. (IMG:http://forums.networksolutions.com/style_emoticons/default/thumbsup.gif)

Justyn

You are the man, looks good except for one thing though, image in popup is scaled, how can i get it to show 100%.

Thanks,
See it here
http://www.14kzone.com/P30114-14K-Yellow-G...on-Pendant.aspx

Not too sure.... Highslide scales it to the window/resolution size.

Can you please give me step by step instructions on how to do this.
I can't figure it out.

Highslide reference

I am just looking into adding this ability to our site. I found the above while on the highslide site trying to learn more.

Hi, I did everything and it still does not work
Can you put all code which you have on you page layout.
Thanks.

Hey all... sorry I didn't respond to anyone in a while. We have been pretty busy and I haven't had much time to spend on the forums.

The highslide files may have changed slightly because there is a new version out. However the code posted in the first post is correct.

The most crucial thing to check for is the links. Example...


Make sure that you are referencing the correct folder. The above would be a folder in the root dir called "highslide"

If you uploaded all the files from the highslide zip to your "images" folder... then the new dir would be /images/highslide/highslide.js

The best thing to do is create a folder in the root dir and name it highslide. Upload all of the files there. If you changed the directory you have made more work for yourself. Not only do you need to change the code for the above example, but you would need to check the highslide.css file and change any of the images, background images or cursor links in there.

If there is a "graphics" folder inside of the highslide folder you need to create that and upload its contents to that folder. (Post #4)

One thing I added to the top of my product layout editor is this. *Note the "highslide/graphics/" That would have to change according to where you uploaded the files to.


And then this to the bottom...


What this does is adds a close (X) button on my images. I found that customers would get confused sometimes. They would not realize all they had to do is click the image again to close it. This adds the close button.

Also Note... You do NOT need to upload the example files. They are not needed for this to function properly.

Here is some more information on the subject that might help clarify some confusion.

There is another file that you will need some information from. "highslide.css"

What I did for the CSS portion of this code was copied the information from the highslide.css and pasted it to my custom.css file. Some of you with newer stores might not have that file in your root directory. If this is the case, find your css file in the appropriate theme folder. If you are not sure what information in the highslide.css file you need, copy all of it and paste it in your css file. You may have extra unused css in the file, but it won't screw anything up.

Now you won't have 2 separate CSS files and won't have any issues with the highslide.css file not getting linked properly. If you do want the extra file you will need to put this on the top of the product layout editor.


If you installed it in a different directory adjust the code above.

In post #1, I posted the following code...



Now for an example...

If you are using a default product theme/layout you may have something like this for the Product Image code.


That is the code you need to replace. What you are basically doing is adding the "onClick" function for highslide to the code and changing the "View More Images" to an actual image.


I kept the caption part in the code in there because it is pretty handy. If you want to add a caption to the image like on this product...
http://www.agkits.com/Caterpillar-3406E-En...ld-Kit-IPD.aspx
...you can add the following code to your products full description:


The beauty of the caption is you can include more than just text. So if you wanted to add a "free shipping" image below the product image, or some sort of sale banner you can do so.

Hopefully that clarifies some things.
Justyn (IMG:http://forums.networksolutions.com/style_emoticons/default/thumbsup.gif)

Hey AGKITS,

Thanks for the info. This is a very helpful add-on. I have added Highslide as per your instructions in Post #1 and all went pretty smooth. Further you show adding the (X) close button (Post #18), that is where I am having the problems. Can't get that to work. Any extra advice for dummies?

I appericate any help.

I cannot get the Close X to show either, where does this code go?

Lorenzo

Ok... at the top of the Product Layout Design you will need this...(which you probably already have)



Under that you are going to want this as shown in post #18...



As you can see that controls alignment, transitional effects, the rounded corner effect, etc. It also sets the graphics directory in the first few lines of code...



Make sure that the above directory is accurate. If not adjust it accordingly.

Now at the very bottom of the Product Layout Editor put the following...



If you have done all of that and there still is not a button, it could be because you did not upload the actual images. Check and see if the close.png files is in the appropriate graphics folder.

Another thing to note... At the time of the original post, we did not have the ability to upload .cur (cursor) files. In the Highslide zip file there are zoomin.cur & zoomout.cur files. I could never got the zoomin.cur to work. It wasn't as necessary as the zoom out cursor. On my site you can see once the image is zoomed the mouse cursor changes to a Magnify with a minus in it. Just another way to help show the customer how to "un-zoom".

Hope that helps
Justyn (IMG:http://forums.networksolutions.com/style_emoticons/default/thumbsup.gif)

Looks fine in FF with one image but IE displays this all below my stores footer and none of MCP buttons perform?! Any help would be gratefully appreciated =)

Updated our product page...
http://www.lowpriceskates.com/riedell-r3.aspx

Thanks agkits for all your info! I have been able to implement highslide for everything except for products with multiple images. I modified the image counter to >= 1 so that the images would load with highslide but it wont recognize more then just the first image. I've tried everything I can think of.

The code in the head:



The code for the product image:


I tried copying the hs.expand into the onClick instead of Window.open but that didnt work. I tried using the Product.DetailedImageGalleryURL in the first block of hs but that didnt work either. I also tried adding the highslide code in the Image Gallery in the pages edit menu - didnt work either, errors. Im sure its an easy fix Im just overlooking.

Can someone please help thats been able to get multiple images to work. Thanks in advance.