ShopSite Forums

by **mactheweb** » Mon Feb 12, 2007 11:29 am

Hi,

My client wants the ability to display a very large product image, one that doesn't fit in the custom template. Is is possible to include a view large image option below the product image in the detail page?

I would vastly prefer to not have to hard code this.

by **beley** » Mon Feb 12, 2007 6:34 pm

Check out www.2bigfeet.com - we use a javascript that I found online somewhere but it works really well.

Here's the javascript...

Code: Select all: <script language="Javascript"> function PopupPic(sPicURL) { window.open( "popup.htm?"+sPicURL, "", "resizable=1,scroll=1,HEIGHT=200,WIDTH=200"); } </script>

and the HTML for the popup.htm page:

Code: Select all: <HTML> <HEAD> <TITLE>Fit the Pic Script</TITLE> <script language='javascript'> var arrTemp=self.location.href.split("?"); var picUrl = (arrTemp.length>0)?arrTemp[1]:""; var NS = (navigator.appName=="Netscape")?true:false; function FitPic() { iWidth = (NS)?window.innerWidth:document.body.clientWidth; iHeight = (NS)?window.innerHeight:document.body.clientHeight; iWidth = document.images[0].width - iWidth; iHeight = document.images[0].height - iHeight; window.resizeBy(iWidth, iHeight); self.focus(); }; </script> </HEAD> <BODY bgcolor="#000000" onload='FitPic();' topmargin="0" marginheight="0" leftmargin="0" marginwidth="0"> <script language='javascript'> document.write( "<img src='" + picUrl + "' border=0>" ); </script> </BODY> </HTML>

and the HTML for the link:

Code: Select all: <a href="javascript:PopupPic('/media/image.jpg')">Text Here</a>

What we do is just have an IF statement in our template that checks for the Product Field 1 and if it's there it places the link and javascript in the page, and the Product Field 1 is the address/filename of the image.

The HTML and javascript are pretty outdated and most likely not valid but I haven't taken the time to rewrite it and it's pretty old. Use it, or edit it. The site where we found it freely distributed the code with no restrictions. I don't remember the URL, it was around 3-4 years ago.

by **mactheweb** » Mon Feb 12, 2007 7:13 pm

I guess I wasn't clear enough with my question. It looks like you need to manually set the image location link for each product. Is that so? I was hoping that Shopsite included something like this in the new multiple thumbnail feature. Yours might be the solution if Shopsite won't do it via a built in function.

In my look-see your script needs a bit of work. Have you tested this on a Mac? I'm having problems with the new window display in both Firefox and Safari. It takes about 4 seconds for the window to appear and when it does it looks like this:

When I drag the resize handle, the image pops into place and it displays properly when I close the popup and click the link for the larger image again. But the first time I just get the black screen.

You might also want to change the title on your popup page. It currently says "Fit the Pic Script". You might want to change that to something like Product Closeup.

best wishes,
michael

by **beley** » Mon Feb 12, 2007 7:43 pm

Yes, I have tested it in both Safari and FF on a mac. I'm actually using a mac. I have been working on a complete redesign of 2BF and haven't rewritten that code yet, which is why I said it's pretty outdated (the popup.htm doesn't even have a doctype!)

But, if you have any JS knowledge you could probably get it to work successfully.

It does work automatically - we set the large image through the Product Field 1 tag in ShopSite. This was in use WAY before the image resizer feature was even a twinkle in ShopSite's eye.

The name of the script is a holdover from whoever it was from. Never changed it. Yes, it needs some work... but it could easily be brought up to standards and made to work with the new feature in ShopSite. I'll be doing just that in the new redesign of 2BF, but I can't say when it'll be done. If you have a knowledge of ShopSite & JavaScript and have a desire to get it working, you could take it upon yourself.

I posted the code more as a reference to get you started than anything. Use it to build on, or don't.

All the best,

by **mactheweb** » Tue Feb 13, 2007 10:24 am

Thanks Brandon,

My knowledge of JavaScript is pretty slim but I can probably get this to work. I appreciate your time.

best,
michael

by Ed » Wed Feb 14, 2007 12:12 pm

I am surprised ShopSite does not have something built in to do this already. It seems like a normal thing a lot of merchants would want to do. I do. I am new to custom templates and would really appreciate anything the ShopSite support people could post regarding how to do this. Someone could figure out something on their own, I'm sure. But for us newbies any pre-written code snippets are most appreciated. To click on the image on the More Info page and/or to have a "view larger image" link underneath it would be good options. Thanks to Brandon for posting what he has.

Ed

mactheweb wrote:My client wants the ability to display a very large product image, one that doesn't fit in the custom template. Is is possible to include a view large image option below the product image in the detail page?

I would vastly prefer to not have to hard code this.

ShopSite Forums

large product image in new or popup window

large product image in new or popup window

Thanks Brandon

that helps

Re: large product image in new or popup window

Who is online