Lady Emerald
03-05-2007, 11:36 PM
I have a Homestead Storefront. I just would like to have a popup window to show my products with a closeup view. The first code is the catalog detail page. I have the script which is at the bottom (which is Highlighted Red) but I just don't understand how to change it to work with this. I tried everything I know; which is not very much it seems. Would appreciate all the help I can get this is giving me more gray hair and I already have enough. Would appreciate the help.
Thanks,:confused: :confused:
<!-- begin s-catalogdetail-inftbl template -->
<P><ss:font source="$font.subheading"><B><ss:value source="$product.name"/></B></ss:font></P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR vAlign=top>
<TD width="75%"><ss:link source="$product.photoImage" target="_Blank"><ss:image source="$product.thumbnailImage" alt="$product.name" border="0"/></ss:link>
<P><ss:font source="$font.paragraph"><ss:value source="$product.description"/></ss:font></P><ss:if test="$store.isFeatureEnabled('ShowLiveAuctions')" ><ss:if test="$product.hasLiveAuctions()"><ss:font source="$font.paragraph">
<P><ss:image source="$templateSet.images['ebay_cert.gif']" border="0" alt="eBay"/></P>This item selling at eBay:<BR><ss:foreach item="auctionItem" within="$product.liveAuctions"> <ss:if test="$auctionItem.isStoreInventoryFormat()"><ss:l ink source="$auctionItem" target="_blank"> <ssaram name="refid" value="store"/> <ss:value source="$auctionItem.title"/> </ss:link><ss:else/><ss:link source="$auctionItem" target="_blank"> <ss:value source="$auctionItem.title"/> </ss:link></ss:if><BR><B>Listing Expires:</B> <ss:value source="$auctionItem.endTime" format="MM/dd/yy hh:mm a"/><BR><ss:if test="$auctionItem.color != ''"><B><ss:value source="$auctionItem.product.attribute1Label"/>:</B> <ss:value source="$auctionItem.color"/> </ss:if><ss:if test="$auctionItem.size != ''"> <B><ss:value source="$auctionItem.product.attribute2Label"/>:</B> <ss:value source="$auctionItem.size"/> </ss:if><BR></ss:foreach> </ss:font> </ss:if></ss:if></TD>
<TD noWrap><ss:image source="$templateSet.images['pixel.gif']" border="0" width="20"/></TD>
<TD width="25%">
<TABLE cellSpacing=0 borderColorDark=#808080 cellPadding=0 width="100%" borderColorLight=#808080 border=1>
<TBODY>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=2 cellPadding=2 width="100%" border=0>
<TBODY>
<TR vAlign=top>
<TD><ss:font source="$font.paragraph"> <B>Price: <ss:if test="$product.subscriptionEnabled"><ss:include macro="AttributeDetailFull"/> <ss:else/><ss:include macro="productprice"/> <ss:foreach item="promotion" within="$product.activePromotions"> <ss:set name="detailText" value="$product.promotionDetailText($promotion)"/><ss:if test="$detailText != null"> (<ss:value source="$detailText"/>) </ss:if></ss:foreach> <BR></ss:if></B><BR><ss:if test="$product.onSale">
<P><B>Sale Ends <ss:value source="$product.saleEndDate" format="date.short"/></B></P></ss:if>
<P><ss:if test="$product.type == ProductType.LEAD"><ss:link shortcut="lead"/> <ss:else/><ss:include template="cartadd"/> <ss:if test="$cart.isLastProductAdded($product)">
<TABLE>
<TBODY>
<TR>
<TD><ss:link source="$templateSet.cart"><ss:image source="$templateSet.images['cart-confirm-large.gif']" border="0"/></ss:link> </TD>
<TD vAlign=center><FONT face='"Trebuchet MS", Arial, Helvetica' color=#ffe7a5 size=2><ss:link source="$templateSet.cart"><font face='"Trebuchet MS", Arial, Helvetica' color="#ffe7a5" size="2"><ss:font source="$font.paragraph">Go to shopping cart</ss:font></font></ss:link></FONT> </TD></TR></TBODY></TABLE></ss:if></ss:if>
<P></P></ss:font></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR>
<TABLE cellSpacing=0 borderColorDark=#808080 cellPadding=0 width="100%" borderColorLight=#808080 border=1>
<TBODY>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=2 cellPadding=2 width="100%" border=0>
<TBODY>
<TR vAlign=top>
<TD noWrap><ss:font face="$font.paragraph" size='1' color="$font.paragraph">Manufacturer</ss:font> </TD>
<TD width="100%"><ss:font face="$font.paragraph" size='1' color="$font.paragraph"><ss:value source="$product.oem"/></ss:font> </TD></TR>
<TR vAlign=top>
<TD><ss:font face="$font.paragraph" size='1' color="$font.paragraph"> Unit </ss:font></TD>
<TD><ss:font face="$font.paragraph" size='1' color="$font.paragraph"> <ss:value source="$product.unitOfMeasure"/> </ss:font></TD></TR>
<TR vAlign=top>
<TD><ss:font face="$font.paragraph" size='1' color="$font.paragraph"> SKU </ss:font></TD>
<TD><ss:font face="$font.paragraph" size='1' color="$font.paragraph"> <ss:value source="$product.sku"/> </ss:font></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><ss:if test="$store.isFeatureEnabled('ShowEmailAFriendLin k')">
<P><ss:font source="$font.paragraph"> <ss:link source="$templateSet.emailAFriend">E-mail a friend</ss:link> about this item. </ss:font> </P></ss:if><ss:if test="$emailMarketing.isFeatureEnabled('SendPageTo Friend', $templateset)">
<P><ss:font source="$font.paragraph"> <ss:value source="$emailMarketing.getMarkup('SendPageToFrien d')"/> </ss:font> </P></ss:if><ss:if test="$emailMarketing.isFeatureEnabled('GiftRemind er', $templateset)">
<P><ss:font source="$font.paragraph"> <ss:value source="$emailMarketing.getMarkup('GiftReminder')"/> </ss:font> </P></ss:if></TD></TR></TBODY></TABLE></SS:FONT>
<P><ss:font source="$font.paragraph"><ss:link source="$templateSet.searchResults">Return to Catalog</ss:link></ss:font></P><!-- end s-catalogdetail-inftbl template -->
This is the copy of the script:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled</title>
<script type="text/javascript">
// JK Pop up image viewer script- By JavaScriptKit.com
// Visit JavaScript Kit (http://javascriptkit.com)
// for free JavaScript tutorials and scripts
// This notice must stay intact for use
var popbackground="white" //specify backcolor or background image for pop window
var windowtitle="Image Window" //pop window title
function detectexist(obj){
return (typeof obj !="undefined")
}
function jkpopimage(imgpath, popwidth, popheight, textdescription){
function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft
toppos-=screenTop
}
}
getpos()
var winattributes='width='+popwidth+',height='+popheig ht+',resizable=yes,left='+leftpos+',top='+toppos
var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
if (typeof jkpopwin=="undefined" || jkpopwin.closed)
jkpopwin=window.open("","",winattributes)
else{
//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
//jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+30)
}
jkpopwin.document.open()
jkpopwin.document.write('<html><title>'+windowtitl e+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br>'+textdescription+'</body></html>')
jkpopwin.document.close()
jkpopwin.focus()
}
</script>
</head>
<body>
<a href="#" onClick="jkpopimage('food1.jpg', 325, 445, 'Breakfast is served.'); return false">
Breakfast pancakes</a>
</body>
</html>
Thanks,:confused: :confused:
<!-- begin s-catalogdetail-inftbl template -->
<P><ss:font source="$font.subheading"><B><ss:value source="$product.name"/></B></ss:font></P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR vAlign=top>
<TD width="75%"><ss:link source="$product.photoImage" target="_Blank"><ss:image source="$product.thumbnailImage" alt="$product.name" border="0"/></ss:link>
<P><ss:font source="$font.paragraph"><ss:value source="$product.description"/></ss:font></P><ss:if test="$store.isFeatureEnabled('ShowLiveAuctions')" ><ss:if test="$product.hasLiveAuctions()"><ss:font source="$font.paragraph">
<P><ss:image source="$templateSet.images['ebay_cert.gif']" border="0" alt="eBay"/></P>This item selling at eBay:<BR><ss:foreach item="auctionItem" within="$product.liveAuctions"> <ss:if test="$auctionItem.isStoreInventoryFormat()"><ss:l ink source="$auctionItem" target="_blank"> <ssaram name="refid" value="store"/> <ss:value source="$auctionItem.title"/> </ss:link><ss:else/><ss:link source="$auctionItem" target="_blank"> <ss:value source="$auctionItem.title"/> </ss:link></ss:if><BR><B>Listing Expires:</B> <ss:value source="$auctionItem.endTime" format="MM/dd/yy hh:mm a"/><BR><ss:if test="$auctionItem.color != ''"><B><ss:value source="$auctionItem.product.attribute1Label"/>:</B> <ss:value source="$auctionItem.color"/> </ss:if><ss:if test="$auctionItem.size != ''"> <B><ss:value source="$auctionItem.product.attribute2Label"/>:</B> <ss:value source="$auctionItem.size"/> </ss:if><BR></ss:foreach> </ss:font> </ss:if></ss:if></TD>
<TD noWrap><ss:image source="$templateSet.images['pixel.gif']" border="0" width="20"/></TD>
<TD width="25%">
<TABLE cellSpacing=0 borderColorDark=#808080 cellPadding=0 width="100%" borderColorLight=#808080 border=1>
<TBODY>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=2 cellPadding=2 width="100%" border=0>
<TBODY>
<TR vAlign=top>
<TD><ss:font source="$font.paragraph"> <B>Price: <ss:if test="$product.subscriptionEnabled"><ss:include macro="AttributeDetailFull"/> <ss:else/><ss:include macro="productprice"/> <ss:foreach item="promotion" within="$product.activePromotions"> <ss:set name="detailText" value="$product.promotionDetailText($promotion)"/><ss:if test="$detailText != null"> (<ss:value source="$detailText"/>) </ss:if></ss:foreach> <BR></ss:if></B><BR><ss:if test="$product.onSale">
<P><B>Sale Ends <ss:value source="$product.saleEndDate" format="date.short"/></B></P></ss:if>
<P><ss:if test="$product.type == ProductType.LEAD"><ss:link shortcut="lead"/> <ss:else/><ss:include template="cartadd"/> <ss:if test="$cart.isLastProductAdded($product)">
<TABLE>
<TBODY>
<TR>
<TD><ss:link source="$templateSet.cart"><ss:image source="$templateSet.images['cart-confirm-large.gif']" border="0"/></ss:link> </TD>
<TD vAlign=center><FONT face='"Trebuchet MS", Arial, Helvetica' color=#ffe7a5 size=2><ss:link source="$templateSet.cart"><font face='"Trebuchet MS", Arial, Helvetica' color="#ffe7a5" size="2"><ss:font source="$font.paragraph">Go to shopping cart</ss:font></font></ss:link></FONT> </TD></TR></TBODY></TABLE></ss:if></ss:if>
<P></P></ss:font></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR>
<TABLE cellSpacing=0 borderColorDark=#808080 cellPadding=0 width="100%" borderColorLight=#808080 border=1>
<TBODY>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=2 cellPadding=2 width="100%" border=0>
<TBODY>
<TR vAlign=top>
<TD noWrap><ss:font face="$font.paragraph" size='1' color="$font.paragraph">Manufacturer</ss:font> </TD>
<TD width="100%"><ss:font face="$font.paragraph" size='1' color="$font.paragraph"><ss:value source="$product.oem"/></ss:font> </TD></TR>
<TR vAlign=top>
<TD><ss:font face="$font.paragraph" size='1' color="$font.paragraph"> Unit </ss:font></TD>
<TD><ss:font face="$font.paragraph" size='1' color="$font.paragraph"> <ss:value source="$product.unitOfMeasure"/> </ss:font></TD></TR>
<TR vAlign=top>
<TD><ss:font face="$font.paragraph" size='1' color="$font.paragraph"> SKU </ss:font></TD>
<TD><ss:font face="$font.paragraph" size='1' color="$font.paragraph"> <ss:value source="$product.sku"/> </ss:font></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><ss:if test="$store.isFeatureEnabled('ShowEmailAFriendLin k')">
<P><ss:font source="$font.paragraph"> <ss:link source="$templateSet.emailAFriend">E-mail a friend</ss:link> about this item. </ss:font> </P></ss:if><ss:if test="$emailMarketing.isFeatureEnabled('SendPageTo Friend', $templateset)">
<P><ss:font source="$font.paragraph"> <ss:value source="$emailMarketing.getMarkup('SendPageToFrien d')"/> </ss:font> </P></ss:if><ss:if test="$emailMarketing.isFeatureEnabled('GiftRemind er', $templateset)">
<P><ss:font source="$font.paragraph"> <ss:value source="$emailMarketing.getMarkup('GiftReminder')"/> </ss:font> </P></ss:if></TD></TR></TBODY></TABLE></SS:FONT>
<P><ss:font source="$font.paragraph"><ss:link source="$templateSet.searchResults">Return to Catalog</ss:link></ss:font></P><!-- end s-catalogdetail-inftbl template -->
This is the copy of the script:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled</title>
<script type="text/javascript">
// JK Pop up image viewer script- By JavaScriptKit.com
// Visit JavaScript Kit (http://javascriptkit.com)
// for free JavaScript tutorials and scripts
// This notice must stay intact for use
var popbackground="white" //specify backcolor or background image for pop window
var windowtitle="Image Window" //pop window title
function detectexist(obj){
return (typeof obj !="undefined")
}
function jkpopimage(imgpath, popwidth, popheight, textdescription){
function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft
toppos-=screenTop
}
}
getpos()
var winattributes='width='+popwidth+',height='+popheig ht+',resizable=yes,left='+leftpos+',top='+toppos
var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
if (typeof jkpopwin=="undefined" || jkpopwin.closed)
jkpopwin=window.open("","",winattributes)
else{
//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
//jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+30)
}
jkpopwin.document.open()
jkpopwin.document.write('<html><title>'+windowtitl e+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br>'+textdescription+'</body></html>')
jkpopwin.document.close()
jkpopwin.focus()
}
</script>
</head>
<body>
<a href="#" onClick="jkpopimage('food1.jpg', 325, 445, 'Breakfast is served.'); return false">
Breakfast pancakes</a>
</body>
</html>