X-Cart: shopping cart software

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)

B00MER 07-14-2004 02:51 PM

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

funkydunk 07-15-2004 01:11 AM

good work Boomer - nice code and thanks

DataViking 07-16-2004 09:50 AM

very nice, thank you

laureon 07-16-2004 11:02 AM

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

PhilJ 07-16-2004 11:40 AM

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

B00MER 07-16-2004 04:23 PM

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.

PhilJ 07-17-2004 03:25 AM

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.

MOC 07-20-2004 07:33 AM

Using it in 3.5.9 VERY NICE MOD !!!

:D :D :D

B00MER 07-20-2004 08:38 AM

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?

adpboss 07-20-2004 08:49 AM

Quote:

Originally Posted by B00MER
Nutscrape

LMAO


All times are GMT -8. The time now is 08:09 AM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.