Guest m00n1 Posted November 3, 2005 Share Posted November 3, 2005 Hiya Hopefully the subject says everything! What I want to do seems pretty straight forward, kinda surprised cubecart doesn't do it out of the box. I want to show a thumbnail on my product page, and when you click on it, you get shown the full size image - in a popup or however else. Is there a mod or a simple tweak to do this? Cheers, Mark Quote Link to comment Share on other sites More sharing options...
Guest vrakas Posted November 3, 2005 Share Posted November 3, 2005 Have you tryed the more images feature in CC? This works as a pop-up There is also available a mod in the download area that can create a bigger image in a pop-up. :) Quote Link to comment Share on other sites More sharing options...
Guest m00n1 Posted November 3, 2005 Share Posted November 3, 2005 Yes, I've seen the more images feature. I want it to work with just one image tho. Plus, that still shows the large image on the page. So, even if I could modify it to work on one image (easy I would assume), the popup would show the same image as is already shown. I'd already checked the downloads area, I couldn't find anything at all (not in CC3 downloads anyway), just double checked, can't see it. Can you point me at it? Quote Link to comment Share on other sites More sharing options...
Guest m00n1 Posted November 7, 2005 Share Posted November 7, 2005 Ok, worked out a very simple hack to get this working. Thanks for the help. Quote Link to comment Share on other sites More sharing options...
Guest Posted November 7, 2005 Share Posted November 7, 2005 how about sharing it with the rest of us ...............? Quote Link to comment Share on other sites More sharing options...
Guest vrakas Posted November 7, 2005 Share Posted November 7, 2005 Look here and at the last line ;) Quote Link to comment Share on other sites More sharing options...
Guest m00n1 Posted November 7, 2005 Share Posted November 7, 2005 Mine is a lot simpler than that. It's designed for when you have just 1 image, you want to display the thumbnail as the primary image, and the full size image in a popup when you click on the image. If you want a variant on that, I think the changes below are pretty simple so should be easy to do. I haven't checked what happens when you do have multiple images per product with this code (my site doesn't do it), but in theory all should be fine. In theory.... Based on 3.0.5 code base, change /includes/content/viewprod.inc.php around line 93 to say: if(!empty($prodArray[0]['image'])){ $view_prod->assign("THUMB_SRC","/images/uploads/thumbs/thumb_".$prodArray[0]['image']); $view_prod->assign("IMG_SRC","/images/uploads/".$prodArray[0]['image']); } else { $view_prod->assign("IMG_SRC","skins/".$config['skinDir']."/styleImages/nophoto.gif"); } Then, skins/<your skin>/styletemplates/content/viewProd.tpl Add <script language="Javascript"> <!-- function PopupPic(sPicURL) { window.open("/popup.html?"+sPicURL, "", "resizable=1,HEIGHT=250,WIDTH=300"); } // --> </script> to the top and then the line after <p class="txtContentTitle"><strong>{TXT_PRODTITLE}</strong></p> should now read: <div style="text-align: center;"><a href="javascript:PopupPic('{IMG_SRC}')"><img src="{THUMB_SRC}" alt="{TXT_PRODTITLE}" border="0" /></a></div> Now create popup.html in your root, it should contain: <HTML> <HEAD> <TITLE>Image viewer</TITLE> <script language='javascript'> var temp=self.location.href.split("?"); var picUrl = (temp.length>1)?temp[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-1); self.focus(); }; </script> </HEAD> <BODY bgcolor="#FFFFFF" onload='fitPic();' topmargin="0" marginheight="0" leftmargin="0" marginwidth="0"> <script language='javascript'> document.write( "<img src='" +picUrl +"' border=0>" ); </script> </BODY> </HTML> It's crude, but works fine and is robust enough. Was my first attempt at hacking cubecart (only been using it a week), and was impressed with how readable the code it, was dead easy to do. Hope that helps someone.... You can check out the final result at http://www.smartpoppy.com.au/index.php (not "live" yet so excuse the obvious rough edges, will be launched in the next week). It's an interesting skinning job for those interested in such things, I had fun doing it, cubecart is certainly a pleasure to skin, so easy. Quote Link to comment Share on other sites More sharing options...
Guest estelle Posted November 7, 2005 Share Posted November 7, 2005 So you've used the thumbnail in place of the normal regular image on the View Product page, and then a popup shows the regular image. Mark - thanks for posting that... I'm sure a lot of people will appreciate it (and you're website is coming along nicely!) Quote Link to comment Share on other sites More sharing options...
Guest m00n1 Posted November 7, 2005 Share Posted November 7, 2005 Yes, that's right. Allows you to have a very large main image. I've enlarged the default thumbnail size to 125px. I think that for this shop it works well. Quote Link to comment Share on other sites More sharing options...
Guest flightoffancy Posted January 20, 2006 Share Posted January 20, 2006 Yes, that's right. Allows you to have a very large main image. I've enlarged the default thumbnail size to 125px. I think that for this shop it works well. I just finished installing these changes and everything is working fine except for the popup of the larger image. I click on the thumbnail and nothing happens. Any ideas? I'm running version 3.0.7-pl1. TIA Quote Link to comment Share on other sites More sharing options...
Guest m00n1 Posted January 22, 2006 Share Posted January 22, 2006 Got a URL I can see? Quote Link to comment Share on other sites More sharing options...
Guest flightoffancy Posted January 22, 2006 Share Posted January 22, 2006 Got a URL I can see? Here's the link. http://fragrance-fantasy.com/shop/soy-jar-...candle/p_2.html Quote Link to comment Share on other sites More sharing options...
Guest digilution Posted January 22, 2006 Share Posted January 22, 2006 Got a URL I can see? Here's the link. http://fragrance-fantasy.com/shop/soy-jar-...candle/p_2.html What link mod are you using if you don't mind me asking ;) Quote Link to comment Share on other sites More sharing options...
markscarts Posted January 22, 2006 Share Posted January 22, 2006 He gave out the mod in the posts above ;) Quote Link to comment Share on other sites More sharing options...
Guest flightoffancy Posted January 22, 2006 Share Posted January 22, 2006 Got a URL I can see? Here's the link. http://fragrance-fantasy.com/shop/soy-jar-...candle/p_2.html What link mod are you using if you don't mind me asking The SEO URL's were obtained from the mod on this page. http://www.intimatewear.com.au/cc3_mods/ For the link exchange I'll just be adding site documents and linking to them .... no mod. Quote Link to comment Share on other sites More sharing options...
Guest m00n1 Posted January 24, 2006 Share Posted January 24, 2006 I can't see any signs of my mod on your site flightfancy. Am I missing something? Quote Link to comment Share on other sites More sharing options...
Guest nyvagyrl Posted January 31, 2006 Share Posted January 31, 2006 Does this work with 3.0.7pl? NyVa Mine is a lot simpler than that. It's designed for when you have just 1 image, you want to display the thumbnail as the primary image, and the full size image in a popup when you click on the image. If you want a variant on that, I think the changes below are pretty simple so should be easy to do. I haven't checked what happens when you do have multiple images per product with this code (my site doesn't do it), but in theory all should be fine. In theory.... Based on 3.0.5 code base, change /includes/content/viewprod.inc.php around line 93 to say: if(!empty($prodArray[0]['image'])){ $view_prod->assign("THUMB_SRC","/images/uploads/thumbs/thumb_".$prodArray[0]['image']); $view_prod->assign("IMG_SRC","/images/uploads/".$prodArray[0]['image']); } else { $view_prod->assign("IMG_SRC","skins/".$config['skinDir']."/styleImages/nophoto.gif"); } Then, skins/<your skin>/styletemplates/content/viewProd.tpl Add <script language="Javascript"> <!-- function PopupPic(sPicURL) { window.open("/popup.html?"+sPicURL, "", "resizable=1,HEIGHT=250,WIDTH=300"); } // --> </script> to the top and then the line after <p class="txtContentTitle"><strong>{TXT_PRODTITLE}</strong></p> should now read: <div style="text-align: center;"><a href="java script:PopupPic('{IMG_SRC}')"><img src="{THUMB_SRC}" alt="{TXT_PRODTITLE}" border="0" /></a></div> Now create popup.html in your root, it should contain: <HTML> <HEAD> <TITLE>Image viewer</TITLE> <script language='javascript'> var temp=self.location.href.split("?"); var picUrl = (temp.length>1)?temp[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-1); self.focus(); }; </script> </HEAD> <BODY bgcolor="#FFFFFF" onload='fitPic();' topmargin="0" marginheight="0" leftmargin="0" marginwidth="0"> <script language='javascript'> document.write( "<img src='" +picUrl +"' border=0>" ); </script> </BODY> </HTML> It's crude, but works fine and is robust enough. Was my first attempt at hacking cubecart (only been using it a week), and was impressed with how readable the code it, was dead easy to do. Hope that helps someone.... You can check out the final result at http://www.smartpoppy.com.au/index.php (not "live" yet so excuse the obvious rough edges, will be launched in the next week). It's an interesting skinning job for those interested in such things, I had fun doing it, cubecart is certainly a pleasure to skin, so easy. Quote Link to comment Share on other sites More sharing options...
Guest flinx Posted June 12, 2006 Share Posted June 12, 2006 Awsome MOD! Thanks ALOT! FLINX Quote Link to comment Share on other sites More sharing options...
Guest vashant Posted June 25, 2006 Share Posted June 25, 2006 Hi, looks like a great mod but I am unable to get it to work right, when I click on the image I get a page can not be displayed and a url of - http://tifftsgifts.com/java%20script:Popup...irds.jpeg') Below are some snapshots of my code. The red is the changes I made to them, mabye someone can see what I did wrong. ________________________ /includes/content/viewprod.inc.php- $meta['metaDescription'] = substr(strip_tags($prodArray[0]['description']),0,35); $view_prod = new XTemplate ("skins/".$config['skinDir']."/styleTemplates/content/viewProd.tpl"); if(!empty($prodArray[0]['image'])){ $view_prod->assign("THUMB_SRC","/images/uploads/thumbs/thumb_".$prodArray[0]['image']); $view_prod->assign("IMG_SRC","/images/uploads/".$prodArray[0]['image']); } else { $view_prod->assign("IMG_SRC","skins/".$config['skinDir']."/styleImages/nophoto.gif"); } if($prodArray == TRUE){ $val = ""; ___________________________ skins/killer/styletemplates/content/viewProd.tpl <!-- BEGIN: view_prod --> <script language="Javascript"> <!-- function PopupPic(sPicURL) { window.open("/popup.html?"+sPicURL, "", "resizable=1,HEIGHT=500,WIDTH=500"); } // --> </script><div class="boxContent"> <!-- BEGIN: prod_true --> <strong>{LANG_DIR_LOC}</strong> {CURRENT_DIR} <form action="{CURRENT_URL}" method="post" name="addtobasket" target="_self"> <p class="txtContentTitle"><strong>{TXT_PRODTITLE}</strong></p> <div style="text-align: center;"><a href="java script:PopupPic('{IMG_SRC}')"><img src="{THUMB_SRC}" alt="{TXT_PRODTITLE}" border="0" /></a></div> <!-- BEGIN: more_images --> <div style="text-align: center;"><a href="java script:openPopUp('extra/prodImages.php?productId={PRODUCT_ID}', 'images', 548, 455, 0);" class="txtDefault">{LANG_MORE_IMAGES}</a></div> <!-- END: more_images --> ______________________ popup.html <HTML> <HEAD> <TITLE>Image viewer</TITLE> <script language='javascript'> var temp=self.location.href.split("?"); var picUrl = (temp.length>1)?temp[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-1); self.focus(); }; </script> </HEAD> <BODY bgcolor="#FFFFFF" onload='fitPic();' topmargin="0" marginheight="0" leftmargin="0" marginwidth="0"> <script language='javascript'> document.write( "<img src='" +picUrl +"' border=0>" ); </script> </BODY> </HTML> ______________________________ Sorry about not putting that in "code" boxes, but I could not get the red to work in the code boxes. You can check it out at: http://www.tifftsgifts.com just click on the thumbnail of a product to get that error. Any ideas. Quote Link to comment Share on other sites More sharing options...
night60000 Posted February 14, 2008 Share Posted February 14, 2008 Mine is a lot simpler than that. It's designed for when you have just 1 image, you want to display the thumbnail as the primary image, and the full size image in a popup when you click on the image. If you want a variant on that, I think the changes below are pretty simple so should be easy to do. I haven't checked what happens when you do have multiple images per product with this code (my site doesn't do it), but in theory all should be fine. In theory.... Based on 3.0.5 code base, change /includes/content/viewprod.inc.php around line 93 to say: if(!empty($prodArray[0]['image'])){ $view_prod->assign("THUMB_SRC","/images/uploads/thumbs/thumb_".$prodArray[0]['image']); $view_prod->assign("IMG_SRC","/images/uploads/".$prodArray[0]['image']); } else { $view_prod->assign("IMG_SRC","skins/".$config['skinDir']."/styleImages/nophoto.gif"); } Then, skins/<your skin>/styletemplates/content/viewProd.tpl Add <script language="Javascript"> <!-- Â function PopupPic(sPicURL) { Â window.open("/popup.html?"+sPicURL, "", "resizable=1,HEIGHT=250,WIDTH=300"); Â } // --> </script> to the top and then the line after <p class="txtContentTitle"><strong>{TXT_PRODTITLE}</strong></p> should now read: <div style="text-align: center;"><a href="java script:PopupPic('{IMG_SRC}')"><img src="{THUMB_SRC}" alt="{TXT_PRODTITLE}" border="0" /></a></div> Now create popup.html in your root, it should contain: <HTML> <HEAD> Â <TITLE>Image viewer</TITLE> Â <script language='javascript'> Â var temp=self.location.href.split("?"); Â var picUrl = (temp.length>1)?temp[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-1); Â Â self.focus(); Â }; Â </script> </HEAD> <BODY bgcolor="#FFFFFF" onload='fitPic();' topmargin="0" marginheight="0" leftmargin="0" marginwidth="0"> <script language='javascript'> Â document.write( "<img src='" +picUrl +"' border=0>" ); </script> </BODY> </HTML> It's crude, but works fine and is robust enough. Was my first attempt at hacking cubecart (only been using it a week), and was impressed with how readable the code it, was dead easy to do. Hope that helps someone.... You can check out the final result at http://www.smartpoppy.com.au/index.php (not "live" yet so excuse the obvious rough edges, will be launched in the next week). It's an interesting skinning job for those interested in such things, I had fun doing it, cubecart is certainly a pleasure to skin, so easy. Hi i just did everything u said it work but im haveing a problem there is a small pic on the top of the big one it doesnt look right did i do something wrong ? can u please check my site and let me know how i can fix that my site www.globalesale.com Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.