Tony
06-11-06, 11:22 PM
All of the examples I have seen for displaying a larger product image require 1) adding a new page, or 2) displaying a full browser window popup.
I'm not thrilled with either, and prefer a popup that automatically resizes to the exact size of the larger image. This script will also center the popup in the screen (on most browsers). Clicking on the popup will automatically close the window.
That being said, here we go:
Login to admin.mvc
Add a custom product field with the code LgImg and description Large Image.
In your product, add the filename of the large image you wish to display to the Large Image field you just added.
Click Pages
Edit 'PROD Product Display'
Click 'Product Display Layout' Tab
Click the Large Image checkbox to enable the image. (If it is not visible, click on the Point+Click Mode link at the bottom of the screen.)
Click the Advanced Mode link at the bottom.
Scroll though the code, and locate this block of code:
<mvt:if expr="NOT ISNULL l.settings:product:image">
<img src="&mvt:product:image;" alt="&mvt:product:name;">
<mvt:else>
</mvt:if>
Add a line below that code, and insert this additional code (make sure it comes before the next </td> tag):
<br>
<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields :LgImg">
<a href="&mvt:product:customfield_values:customfields:LgImg;" onclick="return popImage(this.href,'YOUR STORE NAME Product Zoom');"><font size="-2">Click here for larger image</font></a>
<mvt:else>
</mvt:if>This code checks to make sure that the product has a large image defined. If it doesn't, the link is suppressed. If it does, it will display a 'Click here for larger image' link. Also, be sure to change the 'Your Store Name' to whatever text you want. This will be the title displayed on the popup window. (You could add the product name here, if desired, using a Miva tag).
Click the 'Page' link at the top.
In between the <mvt:item name="head" /> and </head> tags, add the following code:
<script type="text/javascript" language="JAVASCRIPT_VERSION">
PositionX = 10;
PositionY = 10;
defaultWidth = 600;
defaultHeight = 400;
var AutoClose = true;
function popImage(imageURL,imageTitle){
var imgWin = window.open('','_blank','scrollbars=no,resizable=1 ,width='+defaultWidth+',height='+defaultHeight+',l eft='+PositionX+',top='+PositionY);
if( !imgWin ) { return true; } //popup blockers should not cause errors
imgWin.document.write('<html><head><title>'+imageTitle+'<\/title><script type="text\/javascript">\n'+
'function resizeWinTo() {\n'+
'if( !document.images.length ) { document.images[0] = document.layers[0].images[0]; }'+
'var oH = document.images[0].height, oW = document.images[0].width;\n'+
'if( !oH || window.doneAlready ) { return; }\n'+ //in case images are disabled
'window.doneAlready = true;\n'+ //for Safari and Opera
'var x = window; x.resizeTo( oW + 200, oH + 200 );\n'+
'var myW = 0, myH = 0, d = x.document.documentElement, b = x.document.body;\n'+
'if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }\n'+
'else if( d && d.clientWidth ) { myW = d.clientWidth; myH = d.clientHeight; }\n'+
'else if( b && b.clientWidth ) { myW = b.clientWidth; myH = b.clientHeight; }\n'+
'if( window.opera && !document.childNodes ) { myW += 16; }\n'+
'x.resizeTo( oW = oW + ( ( oW + 200 ) - myW ), oH = oH + ( (oH + 200 ) - myH ) );\n'+
'var scW = screen.availWidth ? screen.availWidth : screen.width;\n'+
'var scH = screen.availHeight ? screen.availHeight : screen.height;\n'+
'if( !window.opera ) { x.moveTo(Math.round((scW-oW)/2),Math.round((scH-oH)/2)); }\n'+
'}\n'+
'<\/script>'+
'<\/head><body onload="resizeWinTo();"'+(AutoClose?' onblur="self.close();"':'')+'>'+
(document.layers?('<layer left="0" top="0">'):('<div style="position:absolute;left:0px;top:0px;display:table;">'))+
'<img src='+imageURL+' alt="Loading image ..." title="" onload="resizeWinTo();">'+
(document.layers?'<\/layer>':'<\/div>')+'<\/body><\/html>');
imgWin.document.close();
if( imgWin.focus ) { imgWin.focus(); }
return false;
}
</script>
That should be all you need to do. If you want to separate the large images into their own subdirectory (like I did), the just change the filename you put into the custom field from IMAGE.jpg to MYDIRECTORY/IMAGE.jpg.
Hope this comes in handy for those out there!
Tony
I'm not thrilled with either, and prefer a popup that automatically resizes to the exact size of the larger image. This script will also center the popup in the screen (on most browsers). Clicking on the popup will automatically close the window.
That being said, here we go:
Login to admin.mvc
Add a custom product field with the code LgImg and description Large Image.
In your product, add the filename of the large image you wish to display to the Large Image field you just added.
Click Pages
Edit 'PROD Product Display'
Click 'Product Display Layout' Tab
Click the Large Image checkbox to enable the image. (If it is not visible, click on the Point+Click Mode link at the bottom of the screen.)
Click the Advanced Mode link at the bottom.
Scroll though the code, and locate this block of code:
<mvt:if expr="NOT ISNULL l.settings:product:image">
<img src="&mvt:product:image;" alt="&mvt:product:name;">
<mvt:else>
</mvt:if>
Add a line below that code, and insert this additional code (make sure it comes before the next </td> tag):
<br>
<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields :LgImg">
<a href="&mvt:product:customfield_values:customfields:LgImg;" onclick="return popImage(this.href,'YOUR STORE NAME Product Zoom');"><font size="-2">Click here for larger image</font></a>
<mvt:else>
</mvt:if>This code checks to make sure that the product has a large image defined. If it doesn't, the link is suppressed. If it does, it will display a 'Click here for larger image' link. Also, be sure to change the 'Your Store Name' to whatever text you want. This will be the title displayed on the popup window. (You could add the product name here, if desired, using a Miva tag).
Click the 'Page' link at the top.
In between the <mvt:item name="head" /> and </head> tags, add the following code:
<script type="text/javascript" language="JAVASCRIPT_VERSION">
PositionX = 10;
PositionY = 10;
defaultWidth = 600;
defaultHeight = 400;
var AutoClose = true;
function popImage(imageURL,imageTitle){
var imgWin = window.open('','_blank','scrollbars=no,resizable=1 ,width='+defaultWidth+',height='+defaultHeight+',l eft='+PositionX+',top='+PositionY);
if( !imgWin ) { return true; } //popup blockers should not cause errors
imgWin.document.write('<html><head><title>'+imageTitle+'<\/title><script type="text\/javascript">\n'+
'function resizeWinTo() {\n'+
'if( !document.images.length ) { document.images[0] = document.layers[0].images[0]; }'+
'var oH = document.images[0].height, oW = document.images[0].width;\n'+
'if( !oH || window.doneAlready ) { return; }\n'+ //in case images are disabled
'window.doneAlready = true;\n'+ //for Safari and Opera
'var x = window; x.resizeTo( oW + 200, oH + 200 );\n'+
'var myW = 0, myH = 0, d = x.document.documentElement, b = x.document.body;\n'+
'if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }\n'+
'else if( d && d.clientWidth ) { myW = d.clientWidth; myH = d.clientHeight; }\n'+
'else if( b && b.clientWidth ) { myW = b.clientWidth; myH = b.clientHeight; }\n'+
'if( window.opera && !document.childNodes ) { myW += 16; }\n'+
'x.resizeTo( oW = oW + ( ( oW + 200 ) - myW ), oH = oH + ( (oH + 200 ) - myH ) );\n'+
'var scW = screen.availWidth ? screen.availWidth : screen.width;\n'+
'var scH = screen.availHeight ? screen.availHeight : screen.height;\n'+
'if( !window.opera ) { x.moveTo(Math.round((scW-oW)/2),Math.round((scH-oH)/2)); }\n'+
'}\n'+
'<\/script>'+
'<\/head><body onload="resizeWinTo();"'+(AutoClose?' onblur="self.close();"':'')+'>'+
(document.layers?('<layer left="0" top="0">'):('<div style="position:absolute;left:0px;top:0px;display:table;">'))+
'<img src='+imageURL+' alt="Loading image ..." title="" onload="resizeWinTo();">'+
(document.layers?'<\/layer>':'<\/div>')+'<\/body><\/html>');
imgWin.document.close();
if( imgWin.focus ) { imgWin.focus(); }
return false;
}
</script>
That should be all you need to do. If you want to separate the large images into their own subdirectory (like I did), the just change the filename you put into the custom field from IMAGE.jpg to MYDIRECTORY/IMAGE.jpg.
Hope this comes in handy for those out there!
Tony