Jump to content

Show thumbnails on product pages & enlarged popup?

Guest m00n1

By Guest m00n1
in Technical Help

 Share

Recommended Posts

Guest m00n1

Guest m00n1

Posted
Posted

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

Link to comment
Share on other sites

Guest vrakas

Guest vrakas

Posted
Posted

Have you tryed the more images feature in CC? :blink:

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. :)

Link to comment
Share on other sites
Guest m00n1

Guest m00n1

Posted
Posted

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?

Link to comment
Share on other sites
Guest m00n1

Guest m00n1

Posted
Posted

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.

Link to comment
Share on other sites
Guest estelle

Guest estelle

Posted
Posted

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!)

Link to comment
Share on other sites
Guest m00n1

Guest m00n1

Posted
Posted

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.

Link to comment
Share on other sites
  • 2 months later...
Guest flightoffancy

Guest flightoffancy

Posted
Posted

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

Link to comment
Share on other sites
Guest flightoffancy

Guest flightoffancy

Posted
Posted

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.

Link to comment
Share on other sites
Guest nyvagyrl

Guest nyvagyrl

Posted
Posted

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.

Link to comment
Share on other sites
  • 4 months later...
  • 2 weeks later...
Guest vashant

Guest vashant

Posted
Posted

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.

Link to comment
Share on other sites
  • 1 year later...
night60000 Newbie

night60000

Posted
Posted

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...