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)

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

:!: 8/17/04: Initial cetner popup removed. Orderby column now used in the sql query. Images larger than users screen will push the window to only go as large as screen.width and screen.height will allow. Also next and previous buttons added to top of popup as well. Code has also been cleaned up of typos and other errors.

:!: 8/11/04: Added Center initial popup, as well as looping around images, so next image and previous image always display something new to the viewer instead of stopping at the end.

:!: UPDATE: Added this script to cart-lab.com for those who need a demo of the script in action:
:arrow: http://www.cart-lab.com/lab/customer/product.php?productid=43

Since the release of X-Cart 4.0, I decided to redo my detailed images popup mod adding some new features along the way. Some new features include auto window resizing to fit each detailed image associated with a particular product.

:!: Written with X-Cart 3.5.9 this code SHOULD Work with X-Cart 4.0, I've not tested it so anyone who wants feel free to post your findings.

This mod has been tested on IE6.0 SP2, Latest Mozilla FireFox v0.8 and Netscape 7.1.

However there are transations that are in effect for IE5.5+ users. You can see this in action here:
:arrow: http://dynamicdrive.com/dynamicindex14/dhtmlslide.htm

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

Code:

<?php

#

# 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

# 

require "./auth.php"; 



# 

# Collect product images 

# 

$images = func_query("select * from $sql_tbl[images] where productid='$productid' order by orderby,imageid"); 



# Find max width and total height of all collected images (currently not used)

foreach($images as $k=>$v) {

        foreach($v as $kk=>$vv) {

                if($kk=="image_x") {

                        if($maxwidth >= $previous_maxwidth) {

                                $maxwidth=$vv;

                        } 

                        $previous_maxwidth=$vv;

                } elseif($kk=="image_y") {

                        if($maxheight >= $previous_maxheight) {

                                $maxheight=$vv;

                        }

                        $previous_maxheight=$vv;

                }                

        }

}



$smarty->assign("winw",$maxwidth);

$smarty->assign("winh",$maxheight);

$smarty->assign("images",$images); 

$smarty->display("customer/main/product_images.tpl"); 



?>

Step 2) Save the below file as xcart/skin1/detailed_popup_js.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 $active_modules.Detailed_Product_Images ne "" && $images} 

{literal} 

<SCRIPT language=JavaScript1.2> 

<!-- 

function productimagedetail(product_id) { 

   var w = 120; 

   var h = 120;

   var center = ',left = 387,top = 309';

   window.open('{/literal}{$catalogs.customer}{literal}/product_detailed_images.php?productid='+product_id,"detailedproduct","width="+w+",height="+h+",resizable,scrollbars=yes,status=no'"); 

} 

--> 

</SCRIPT> 

{/literal} 

{/if}

Step 3) Save the below code as: 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 = {$images[0].image_y}+{if $images[1].imageid ne ""}85{else}40{/if}; 

var w = {$images[0].image_x}+30; 



// 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 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}"

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

        document.images.photoslider.src=photos[which]

        newWidth=parseInt(photos_width[which])+30;

        newHeight=parseInt(photos_height[which])+85;

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

        document.images.photoslider.src=photos[which]

        newWidth=parseInt(photos_width[which])+30;

        newHeight=parseInt(photos_height[which])+85;

        if(newHeight>=screen.height) {

          newHeight=screen.height-30;

        }

        if(newWidth>=screen.width) {

          newWidth=screen.width;

        }

        window.resizeTo(newWidth,newHeight)                

        playeffect()

}

//-->

</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">

{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}

  <tr>

    <td width="100%" colspan="2" 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 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}

</table>



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



</body>

</html>



{else}



No Image(s) Found!



{/if}

Step 4) Edit xcart/skin1/customer/main/product.tpl and locate the following code:

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}

Replace it with the following code snippet:

Code:

{*** Detailed Image Popup mod by www.cart-lab.com ***}

{include file="detailed_popup_js.tpl"}

{if $active_modules.Detailed_Product_Images ne "" && $images}{strip}<A HREF="javascript: productimagedetail({$product.productid});">{/strip}{/if}

{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}

{if $active_modules.Detailed_Product_Images ne "" && $images}{strip}



<CENTER>[img]{$ImagesDir}/preview.gif[/img]View Details</CENTER></A>{/strip}{/if}

{*** Detailed Image Popup mod by www.cart-lab.com ***}

Step 5) You will need to remove the following code from the same product.tpl file to keep the detailed images from showing up on the details page:

Code:

{if $active_modules.Detailed_Product_Images ne ""}








{include file="modules/Detailed_Product_Images/product_images.tpl" }

{/if}

Either remove it or {* comment *} it out.

:!: If you find this mod useful please feel free to donate:
:arrow: http://www.cart-lab.com/lab/customer/help.php?section=about

good work Boomer - nice code and thanks

very nice, thank you

I was about to hack through version 1 of this mod! - Thanks very much BOOMER

I tried it as-is on v4, and got this error:

Code:

Fatal error: Smarty error: [in customer/main/product.tpl line 13]: syntax error: mismatched tag {/if}. expected {/strip} (opened line 13). (Smarty_Compiler.class.p in C:\Inetpub\wwwroot\pathtoxcart\Smarty-2.6.3\Smarty.class.php on line 1082

I updated the initial posting with a new product.tpl bit of code, let me know if it does the trick, you can always try and remove the {strip} and {/strip} tags to see if it helps.

That works Boomer, but you have to put the product_detailed_images.php file in the xcart root, not xcart/customer.

The inital popup window isn't auto-resized, but if you manually re-size the window and click 'Next Image' it does auto-resize the next window.

Using it in 3.5.9 VERY NICE MOD !!!

:D :D :D

Quote:

Originally Posted by PhilJ

The inital popup window isn't auto-resized, but if you manually re-size the window and click 'Next Image' it does auto-resize the next window.

What browser are you using? the initial resize Works in IE, FireFox and Nutscrape. Opera?

Quote:

Originally Posted by B00MER

Nutscrape

LMAO

I'm using WinXP and IE6, you'd never catch me using nutscrape.

For me, it does the same thing in Firefox 0.9.2 also.

Does any one one have this mod working on a life site so we can see it.

Kind regards
Ricky

Quote:

Originally Posted by rjcbear

Does any one one have this mod working on a life site so we can see it.

Rjcbear, See the first post, I've added this script to my cart-lab.com site.

Quote:

Originally Posted by PhilJ

I'm using WinXP and IE6, you'd never catch me using nutscrape. For me, it does the same thing in Firefox 0.9.2 also.

PhilJ, do you have any Popup blocker software installed? I've tested with WinXP and IE6sp2 and Firefox 0.9.1 and the initial resize works.

Boomer,

That looks absolutely great that is what I was looking for. So I guess I will have to upgrate to 3.5.9 in order for me to use the mod since I am using 3.5.8.

Well I guess is time for me to go read how to up-grade. Since this will be the first time I will try to upgrade x-cart.

Thank you for that great mod.

Kind regards,
Ricky

Quote:

Originally Posted by rjcbear

That looks absolutely great that is what I was looking for. So I guess I will have to upgrate to 3.5.9 in order for me to use the mod since I am using 3.5.8.

The mod should work on any 3.5.X version of X-Cart, and Possibly 4.0.

I tried to use it in 3.4.0 and pop up window shows internal server error in xcart.

Cool Mod though.

Boomer, this works fine now. I think there was a problem with a particular image I was testing it with. I tried a different image and the initial popup re-size now works.... wierd.

For v4 you just have to place product_detailed_images.php in the root directory, rather than in the /customer dir.

A good extra feature on the popup, would be to have a indication of the number of detailed images available. eg. 1/3, 2/3, 3/3, or if there is only 1 or 2 detailed image available, remove the <Previous and Next> links respectively. Is this possible?

Thanks for the code! 8)

<<<<< DRUM ROLL >>>>>

And the Oscar goes to: BOOMER =D> \:D/

Like my teens will say "Boomer you ROCK"

Thank you for the great code.

Kind regards,
Ricky

Re: Detailed Image(s) Popup 2.0

This is an incredible mod. I look forward to your new version for 4.0 It works great with my 4.0, BTW. I had to tweak a directory location or two but it works great.

Will you be sharing the new code as well?

Thanks,

Any Live Sites...

Hi all,

Other then boomers site, can a few of you nice people list some live sites for this mod, as I am upgrading to 4.0.1 and looking for new ideas.

Thanks.

This site has 4.0.1 and uses Boomers detailed image pop up.

There is only one detailed image per product, but you'll see that it works good.

Just had to install the file product_detailed_images.php file in the xcart root, not xcart/customer. That is because 4.0 changes some locations of files.

dev2.ridetowork.org

Quote:

Originally Posted by sstillwell@aerostich.com

Thanks for the Mod, its great. Just have a slight change to your post. I'm not sure what the case is for xcart 3.x, but for 4.0.1. The detailed images have Position and Availbility fields.

replace the following in product_detailed_images.php

Code:

$images = func_query("select * from $sql_tbl[images] where productid='$productid' order by imageid");

With

Code:

$images = func_query("select * from $sql_tbl[images] where productid='$productid' and avail = 'Y' order by orderby");

That way your mod can take advantage of the "Pos" and "Availablity" settings from the admin side for detailed images.

awesome mod boomer but how do u change the brown background color? the pic itself is on a white background, but when you expand the window, the outer background is brown. Which variable needs to be changed for the color?

thanks

class="VertMenuBorder" and class="VertMenuBox" in skin1.css are used for the colors, as well as the base background color.

Absolutely brilliant Boomer,

Works 100% on our site which is running XCart 4.02.

One small tweak I'v been trying to achieve with no success, is in the instance of two detailed images being available, I have to drag the pop-up
window larger to see the next & previous options. Where do I change
that initial sizing

Great job again,

Greg
XCart 4.02
Product Configurator
AOM
Linux
Zeus Server

Quote:

I have to drag the pop-up
window larger to see the next & previous options.

This happens to me with the images in the demo. Try your own images and you'll find the initial sizing works. It's a strange one that.

Thanks PhilJ,

but I am using my own images. I've played around with the initial
resizing values, but nothing changes at all. I know I must be
missing something pretty basic.

Boomer where are you?

Regards

I haven't been able to reproduce the problems you guys are refering to, do you have a link perhaps that I could see exactly what the problem is?

Hi Boomer,

Go to www.stonecomputers.com.au and click on the cases link on the left, choose standard then MAGPAC P309B 300W ATX MIDI TOWER. When you go to the detailed images section, you have to drag the window open to see the next/previous options.

Great mod just the same.

Regards

Boomer,

forget my last reply, I've just looked at the site through another machine
and it's perfect. I've been playing with my own machine and "skinned" IE for something different, Set it back to default skin and no problemo. Sorry to bug you when there is no bug.
Just quickly though, as i'm still a bit of a dufus with XCart, because you use the Skin1css for the colours, is there a quick way I can change the pop window background colour to white without changing
the whole site?
Thanks

I would like to thank you to share the codes of BOOMER..
I have a problem with the window..
I can't see the full size of pictures without full screen. Even i scroll the picture but i still can't see the full picture.

You can check the problem from this page :

http://www.mydukkan.com/product.php?productid=16169&cat=0&page=

Click on small picture and see the problem..

I'll be very pleased if you can solve the problem..

Sincerely

mygitar, please apply the updated code on the first post of this thread, I've added support for images larger than users screen.

I really want to thank you about the updated code... :D

Thanks again.
Sincerely

Thanks for this MOD Boomer, really makes a site look professional

www.WiredParadise.com

Thanks for this very clear and concise MOD. Took me about 2 minutes to cut/paste/upload and another minute to change the VertMenu colors and Box background. The functionality is excellent!

I would definitely encourage anyone who has taken advantage of this MOD, myself included, to make a donation of support to Boomer. Thanks for being more than generous!

- mike.//

PS - As of late, I have come full circle w/ X-Cart (& LiteCommerce). Tried earlier versions and couldn't get a handle on the template system. Used LiteComerce (expensive for functionality - modules, etc.), but now with my more recent 3.5.10 install, X-Cart offers me so much more and a forum base to really get it going. I'm glad I took the plunge again.

I'm using X-Cart version 3.5.11

Quote:

Warning: Smarty error: unable to read template resource: "customer/main/product_images.tpl" in /var/www/html/shopping/Smarty-2.5.0/Smarty.class.php on line 1042

I'm receiving the above error in the pop up window after applying the patches from the first link.

This is my customer/main/products_images.tpl:

http://koby.sigmadata.net/misc/templatescreenshot.jpg

Where am I going wrong?

Try running cleanup.php or remove all files from templates_c/ to see if it helps? :?

no go. :( The window pops up with the same error.

Only thing I can suggest is remove all files and re-apply the mod from the steps, should work without troubles. Maybe a typo or something in a filename?