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

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Detailed Image(s) Popup 2.1 [3.4.x-4.0.x] (https://forum.x-cart.com/showthread.php?t=8460)

Quote:

Originally Posted by Lucent88

Hi,

Thank you for such great coding. Can someone wrap up a final code here for v3x and v4x store owners. This post has gone through 10 pages, it kind of got very confusing at the end. I'm sure final coding would help out alot of store owners!!!

That would be like reading a summary of a book instead of reading the whole thing.

I think if you're interested in learning how x-cart works and maybe start making your own modifications, you should read through the evolution of these mods. Read the entire thread before you just install something.

This is a community of users, programmers and geniuses... They all have great things to share...

Hi I took GoodHousePlans's code from page 10 and modify just a little bit.

-No image transitions
-Resize to Max full windown size
-Previous/Next at top & bottom
-Alt Text at the top (centered)
- 1 of x at the bottom for image count (centered)

works on v4.0.x ( I know it works on v4.0.14, v4.0.15, v4.0.16 for sure)

My only question is...

How can I get the pop-up window set to a fixed size?
I don't want the full windows or autosize because I resize all my image to one size to keep the interface consistance.

xcart/skin1/customer/main/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 = screen.height; 

var w = screen.width; 



// 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(){ 

} 



function playeffect(){ 

} 



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;  

} 



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; 

} 

//--> 

</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 width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> 

{if $images[1].imageid ne ""} 

  <tr class="VertMenuBox"> 

    <td width="33%" 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="33%" height="21"><div id="photosalt" style="text-align: center;"><script>document.write(photos_alt[0])</script></div></td>

    <td width="33%" 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" align="center"><center><A HREF="javascript:window.close();"> 

{literal} 

<script> 

document.write('[img]'+photos[0]+'[/img]') 

</script> 

{/literal} 

</a></center></td> 

  </tr> 

{if $images[1].imageid ne ""} 

  <tr class="VertMenuBox"> 

    <td width="33%" 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="33%" height="21"><div id="page" style="text-align: center;"><script>document.write('1 of '+photos.length);</script></div></td>

    <td width="33%" 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}

Edited - Sept. 29, 2005
New height removed

Set the initial resize vars, w and h to the size you want of the window instead of screen.height or screen.width.

I beleive this should do the trick.

You can remove the

Code:

   newWidth=screen.height; 

   newHeight=screen.height; 

   if(newHeight>=screen.height) { 

     newHeight=screen.height-30; 

   } 

   if(newWidth>=screen.width) { 

     newWidth=screen.width; 

   }

Segments of code in the forward and backward function calls as well as they won't be needed anymore.

sweet! works great!!

B00MER thanks for the free mod! By the way the version you give away for free on your site is not the most updated one just to let you know. But when I installed this new version it worked perfect. Thanks again!

Ok, I have tried with this mod 2 or 3 times and still nothing works. I would really like to get it set up in my store (along with other things).

If someone could get together with me and give me a price on how much it would be to install it I would appreciate it.

what error do you see?

All I can think of is...

v3.0.x: xcart/customer/product_detailed_images.php
v4.0.x: xcart/product_detailed_images.php

remember to place that file in the right directory.

Didnt work properly in 4.13 FATAL ERROR SMARTY LINE 15

Tried several options and nothing popped up, no menus in admin, and nothing but fatal errorson the page beyond thumbnails. couldnt even get to product description.

restored files back, will have another attempt tommorow.......all i need now is to convert the checkout to have 1 name entery, leave blank if same then cart is ready to start using!!!!! a yr later

Guys, this mod works fine...I use it all the time. Just follow the instructions to the LETTER including where the files are placed and you will be fine.

Well what an interesting topic some great tips etc after reading through it all I got what I wanted.

X-cart please make this a standard feature, after all most carts nowadays have this as standard..