Detailed Image(s) Popup 2.1 [3.4.x-4.0.x]

Kerbsp · #**171** 02-01-2006, 02:09 PM

Hi everyone
Thanks for such a great module and installation guide. I put it on my website with no problems.
Question: how do I remove the rezise button (maximize, and restore)? and If I want to have thumbnails of the detail images in the pop up window that opens up when clicked on, how do I do that.
I am using 4.0.17. Thank you.

ortonceramic · #**172** 02-15-2006, 08:59 AM

how do you use this mod with image stored in the file system rather than the database?

balinor · #**173** 02-15-2006, 09:15 AM

It works fine either way.

ortonceramic · #**174** 02-15-2006, 09:22 AM

Quote:

Originally Posted by balinor

It works fine either way.

ok, well I get a 404 error in the pop up window.

http://www.ortonceramic.com/store/product.php?productid=16383 (live store, do not buy please)

ugh

balinor · #**175** 02-15-2006, 09:26 AM

Looks like you put a template or php file in the wrong directory. Check the installation instructions again just to be sure...

ortonceramic · #**176** 02-15-2006, 09:53 AM

Quote:

Originally Posted by balinor

Looks like you put a template or php file in the wrong directory. Check the installation instructions again just to be sure...

hmm, looks like the instructions are a tad incorrect.

Code:

Step 1) Save the below file to xcart/customer/product_detailed_images.php

should really just be xcart/product_detailed_images.php

ortonceramic · #**177** 02-15-2006, 10:24 AM

Quote:

Originally Posted by keavy

anyone any idea how I would have this option active ONLY if there is more than 1 detailed image?

similarly, I would like only the FIRST detailed image to be shown in the pop up, and not cycle through the other images. Thoughts?

B00MER · #**178** 02-16-2006, 06:53 AM

Quote:

Originally Posted by ortonceramic

similarly, I would like only the FIRST detailed image to be shown in the pop up, and not cycle through the other images. Thoughts?

Edit:
xcart/skin1/customer/main/product_images.tpl

and comment out or remove:

Code:

{if $images[1].imageid ne ""} 
  <tr class="VertMenuBox"> 
    <td width="50%" height="21" onClick="javascript:backward();return false;" style="cursor:pointer;cursor:hand;" onMouseOver="'"><p align="left">[img]{$ImagesDir}/larrow.gif[/img] Previous</td> 
    <td width="50%" height="21" onClick="javascript:forward();return false;" style="cursor:pointer;cursor:hand;"><p align="right">Next [img]{$ImagesDir}/rarrow.gif[/img]</td> 
  </tr> 
{/if}

In both the bottom and top of the document.write part of the script.

This will simply remove the ability for the customer to proceed forward or backwards leaving them on the initial detailed image only. You may also want to make some adjustments to the initial popup sizes as you may get a margin on the top and bottom, commenting them out.

dazybabes · #**179** 04-12-2006, 02:40 AM

Has anyone come across this problem at all? From all accounts the mod seems to have been working ok, I use firefox and then check on a pc explorer etc. For some reason it has started putting in a large space at the top before the alt text and image when viewed in explorer. Have a look at the detailed image on this one.
http://www.kitinfo.co.uk/kitwarehouse/product.php?productid=223&cat=%2039&page=1

This is the detailed image.tpl that Im using

Code:

{if $images ne ""} 
{ config_load file="$skin_config" } 
<html> 
<head> 
<title>Detailed Image(s) - {$lng.txt_site_title}</title> 
{include file="meta.tpl"} 
<link rel="stylesheet" href="{$SkinDir}/{#CSSFile#}"> 

<SCRIPT language=JavaScript1.2> 
<!-- 

// Initial Resize 
var h = {$images[0].image_y}+{if $images[1].imageid ne ""}100{else}50{/if}; 
var w = {$images[0].image_x}+50; 

// make sure size isn't bigger than users screen 
{literal} 
if(h>=screen.height) { 
б═ h=screen.height-30; 
} 
if(w>=screen.width) { 
б═ w=screen.width; 
} 
{/literal} 
window.resizeTo(w,h); 

// Vars 
var photos=new Array() 
var photos_width=new Array() 
var photos_height=new Array() 
var photos_alt=new Array() 
var which=0 

// Images 
{section name=image loop=$images} 
photos[{%image.index%}]="{$xcart_web_dir}/product_image.php?imageid={$images[image].imageid}" 
photos_width[{%image.index%}]="{$images[image].image_x}" 
photos_height[{%image.index%}]="{$images[image].image_y}" 
photos_alt[{%image.index%}]="{$images[image].alt}" 
{/section} 
{literal} 

var preloadedimages=new Array() 
for (i=0;i<photos.length;i++){ 
б═ б═preloadedimages[i]=new Image() 
б═ б═preloadedimages[i].src=photos[i] 
} 

function applyeffect(){ 
б═ б═if (document.all && photoslider.filters){ 
б═ б═ б═ photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23) 
б═ б═ б═ photoslider.filters.revealTrans.stop() 
б═ б═ б═ photoslider.filters.revealTrans.apply() 
б═ б═} 
} 

function playeffect(){ 
б═ б═if (document.all && photoslider.filters) 
б═ б═ б═ photoslider.filters.revealTrans.play() 
} 

function backward(){ 
б═ б═if (which>0){ 
б═ б═ б═ which-- 
б═ б═} else { 
б═ б═ б═ which=photos.length-1; 
б═ б═} 
б═ applyeffect() 
б═ б═pagenumber = which + 1; 
б═ б═document.images.photoslider.src=photos[which]; 
б═ б═document.all.photosalt.innerHTML=photos_alt[which];б═ б═ 
б═ б═document.all.page.innerHTML=pagenumber+" of "+photos.length;б═ б═ 
б═ б═newWidth=parseInt(photos_width[which])+50; 
б═ б═newHeight=parseInt(photos_height[which])+100; 
б═ б═if(newHeight>=screen.height) { 
б═ б═ б═newHeight=screen.height-30; 
б═ б═} 
б═ б═if(newWidth>=screen.width) { 
б═ б═ б═newWidth=screen.width; 
б═ б═} 
б═ б═window.resizeTo(newWidth,newHeight)б═ б═ б═ 
б═ б═playeffect() 
б═ б═ 
} 

function forward(){ 
б═ б═if (which<photos.length-1){ 
б═ б═ б═ which++; 
б═ б═} else { 
б═ б═ б═ which=0; 
б═ б═} 
б═ applyeffect() 
б═ б═pagenumber = which + 1; 
б═ б═document.images.photoslider.src=photos[which]; 
б═ б═document.all.photosalt.innerHTML=photos_alt[which]; 
б═ б═document.all.page.innerHTML=pagenumber+" of "+photos.length;б═ б═ 
б═ б═newWidth=parseInt(photos_width[which])+50; 
б═ б═newHeight=parseInt(photos_height[which])+100; 
б═ б═if(newHeight>=screen.height) { 
б═ б═ б═newHeight=screen.height-30; 
б═ б═} 
б═ б═if(newWidth>=screen.width) { 
б═ б═ б═newWidth=screen.width; 
б═ б═} 
б═ б═window.resizeTo(newWidth,newHeight)б═ б═ б═ 
б═ б═playeffect() 
} 
function print_index(){ 
б═ б═alert(which); 
} 
//--> 
</script> 
{/literal} 

</head> 

<body class="PopupImage" LEFTMARGIN=0 TOPMARGIN=0 RIGHTMARGIN=0 BOTTOMMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0> 

<TABLE class="PopupImage" WIDTH="100%" HEIGHT="100%" CELLPADDING=0 CELLSPACING=0 BORDER=0><TR><TD align="center" valign="top"> 

<table border="0" cellspacing="0" cellpadding="0"> 
{if $images[1].imageid ne ""} 
б═ <tr> 
б═ б═ <td colspan="3"><div class="ProductTitle" id="photosalt" align="center"><script>document.write(photos_alt[0])</script>
</div></td> 
б═ б═ б═ б═ б═ </tr> 
{/if} 
б═ <tr> 
б═ б═ <td width="100%" colspan="3" align="center"><center><A HREF="javascript:window.close();"> 
{literal} 
<script> 
document.write('[img]'+photos[0]+'[/img]') 
</script> 
{/literal} 
</center></a></td> 
б═ </tr> 
{if $images[1].imageid ne ""} 
б═ <tr> 
б═ б═ <td onClick="javascript:backward();return false;" style="cursor:pointer;cursor:hand;" onMouseOver=""><p align="left">[img]{$ImagesDir}/larrow.gif[/img] Previous</td> 
б═ б═ <td><div id="page" align="center"><script>document.write('1 of '+photos.length);</script></div></td> 
б═ б═ <td onClick="javascript:forward();return false;" style="cursor:pointer;cursor:hand;"><p align="right">Next [img]{$ImagesDir}/rarrow.gif[/img]</td> 
б═ </tr> 
{/if} 
</table> 

</TD>
</TR></TABLE> 

</body> 
</html> 

{else} 

No Image(s) Found! 

{/if}

girlsbits · #**180** 06-30-2006, 04:40 AM

Hi Guys,

Thanks to Boomer for this mod, it works fine except that instead of showing the default thumbnail image (130x150px) on the product details page, how would I show a resized larger image (250x297) which would then open a popup window on click? The current correct code for the larger image of 250x297 is this:

Code:

{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail" type="P"}{/if}

I have tried for days using different variations, don't want to pluck the last strand of hair from my head

so thought I'd finally ask for help.

Many thanks!