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

dazybabes · #**121** 05-13-2005, 04:11 AM

Anyone??

Cmon Boomer surely you're the one who can tell how I get the alt text inbetween the next/previous arrows on your own mod???

B00MER · #**122** 05-13-2005, 06:45 AM

ALT tags on images, eventually I'll try and add them to the top of the image as well but this DOES swap through the ALT tags now. You can see the commented code: {*{literal}<script>document.write(photos_alt[0]);</script>{/literal}
*} That I started to add alt tags above, whomever wants to take this further and swap this out be it with dhtml or whatever feel free!

Update /customer/main/product_images.tpl with:

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 ""}105{else}105{/if}; 
var w = {$images[0].image_x}+30; 
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|escape}";
{/section} 
{literal} 

var preloadedimages=new Array() 
for (i=0;i<photos.length;i++){ 
   preloadedimages[i]=new Image() 
   preloadedimages[i].src=photos[i]
   preloadedimages[i].alt=photos_alt[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-- 
      applyeffect() 
      document.images.photoslider.src=photos[which] 
      document.images.photoslider.alt=photos_alt[which] 
      newWidth=parseInt(photos_width[which])+30; 
      newHeight=parseInt(photos_height[which])+105; 
      window.resizeTo(newWidth,newHeight)       
      playeffect() 
   } else {forward()}
} 

function forward(){ 
   if (which<photos.length-1){ 
      which++ 
      applyeffect() 
      document.images.photoslider.src=photos[which] 
      document.images.photoslider.alt=photos_alt[which]
      newWidth=parseInt(photos_width[which])+30; 
      newHeight=parseInt(photos_height[which])+105; 
      window.resizeTo(newWidth,newHeight)       
      playeffect() 
   } else {backward()}
}
//--> 
</script>
 
{/literal} 

</head> 

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

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

<table border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td width="100%" colspan="2" height="22" align="center">
    {*{literal}<script>document.write(photos_alt[0]);</script>{/literal}
*}

    <center><A HREF="javascript:window.close();"> 
{literal} 
<script> 
document.write('[img]'+photos[0]+'[/img]') 
</script> 
{/literal} 
</center></td> 
  </tr> 
{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 Image</td> 
{if $images[1].imageid ne ""}
<td width="50%" height="21"onClick="javascript:forward();return false;" style="cursor:pointer;cursor:hand;"><p align="right">Next Image [img]{$ImagesDir}/rarrow.gif[/img]
</td> 
{/if}
  </tr> 
{/if} 
</table> 

</TD></TR></TABLE> 
</body> 
</html> 

{else} 

No Image(s) Found! 

{/if}

Jeffos · #**123** 05-20-2005, 12:25 AM

Hi ,

I am getting a

Warning: Cannot modify header information - headers already sent by (output started at /home/###/public_html/cart/product_detailed_images.php:2) in /home/###/public_html/cart/include/get_language.php on line 90

ChrisP says:
Warning: Cannot modify header information - headers already sent by (output started at /home/###/public_html/cart/product_detailed_images.php:2) in /home/###/public_html/cart/include/get_language.php on line 91

that is displayed on top of all my images in the pop-up window.

Not sure what it is . I cannot see the error on my PC (After clearing the cache) here but most of the people that looks at it from other location are getting the same error.

http://lightpointonline.com/cart/popup.JPG

Thank you very much for your help. I am stuck.

[/img]

rjcbear · #**124** 05-20-2005, 09:12 AM

Jeffos,

Go to the 2 php files and make sure you do not have any blank lines after the last parenthis.

If you do delete them and save your files.

I hope this will help.

Kind regards,
Ricky

Chango1337 · #**125** 05-23-2005, 04:41 PM

I had the /strip problem

but no matter ..

Boomer I love the orange site but was wondering if what would be the maximun thumbnails on a page. My product has ony a few words in the description Id like to get at least 3 thumbnails across each page. Is that possible? if yes I will buy the skin in the morning plus your install help if you can do that for me

( Im an artist not a coder lol) !!

Jeffos · #**126** 05-23-2005, 04:49 PM

rjcbear, thank you . it worked. just removed the Space

elabdesigns · #**127** 06-13-2005, 09:11 AM

I'm getting the link to work but when I click the link to the enlarged image.. it gives me a 404 Error - Page not found. So I checked to make sure the files were placed in the right directories and everything is? What gives?

VERSION 4.0.13 Gold

sstillwell@aerostich.com · #**128** 06-17-2005, 10:04 AM

I've added two things to my detailed images popup.

1. Alt text displaying at the top of the image
2. Pagination or (1 or 4) displaying at the bottom of the image.

You can see an example at
http://www.aerostich.com/product.php?productid=16818

Here is my product_images.tpl

Code:

{***
# Detailed Images Popup
# Version 2.1
# http://www.cart-lab.com
# info@cart-lab.com
# (C)opyright 2003-2004 CartLab, all rights reserved.
# Full license at: http://www.cart-lab.com/license.php
***}
{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 LEFTMARGIN=0 TOPMARGIN=0 RIGHTMARGIN=0 BOTTOMMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

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

<table border="0" cellspacing="0" cellpadding="0">
{if $images[1].imageid ne ""}
  <tr>
    <td width="20%" height="21" onClick="javascript:backward();return false;" style="cursor:pointer;cursor:hand;" onMouseOver="'"><p align="left">[img]{$ImagesDir}/larrow.gif[/img] Previous</td>
    <td align="center"><div id="photosalt"><script>document.write(photos_alt[0])</script></div></td>
    <td width="20%" height="21" onClick="javascript:forward();return false;" style="cursor:pointer;cursor:hand;"><p align="right">Next [img]{$ImagesDir}/rarrow.gif[/img]</td>
  </tr>
{/if}
  <tr>
    <td width="100%" colspan="3" height="22" 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 width="20%" height="21" 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" style="text-align: center;"><script>document.write('1 of '+photos.length);</script></div></td>
    <td width="20%" height="21" 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}

pctechtoys · #**129** 07-08-2005, 10:27 AM

I can't get this thing to work

I feel like an Idiot because the instructions couldn't be anymore clear.

I am wondering if it is because on my site now when people want to see more images they click the picture and it drops them down to detailed images. I wonder if that mod is blocking this one from working. If that is the problem I donБ─≥t know how to get rid of it because I had someone else install it.

shafiq · #**130** 07-10-2005, 03:26 AM

Thanks sstillwell@aerostich.com for the extra modifications ...

Looks really good ... will try that later today ..

Regards

shafiq :sK

P.S: Kudos to Boomer for the mod