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)

Donations on the way

Hey Boomer,

Finally got around to trying your mod and it worked, first time around, on IE, NS7.2, FFox.

I will make dontation today, via paypal! Great Script!
:D

No, wait...come to think of it...

If I could just take that code block...and modify it with Boomer's pop-up code....

That would work I think.

It's very simple though:

Block of code which displays thumbnails (200x200) of product detail images.

Click on the thumbnail, and you get a regular pop-up window at h0 v0 of the blown up image. It's that simple, really.

There's nothing which does that? The code you showed me does this sort of CSS layer pop-up window which I don't know how to make into a regular browser pop-up window.

That's all I'm talking about, really. It's the right code, it just brings up the wrong kind of pop-up window that I want.

Not that hard, right? :)

Here's a little update on my solution.

What I wanted was to be able to click each detailed image and get a bigger blowup of it. Since I couldn't figure out how to do that, this is what I did (and I noticed at least one other person here was asking for the same thing, but nobody has replied yet):

In product.tpl,

find:

Code:








{if $active_modules.Detailed_Product_Images ne ""}

And right above that, place the following code:

Code:

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

{include file="detailed_popup_js.tpl"}

{strip}<A HREF="javascript: productimagedetail({$product.productid});">{/strip}

{strip}



<CENTER>[img]{$ImagesDir}/preview.gif[/img]Click Here to View Details on All Plans Below - Sizes include small and large complete versions.</CENTER></A>{/strip}

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

Then, what I did was upload much larger versions as well and I didn't "enable" them in the detailed images section - they will still show up when you click on the zoom images button.

Since I'm selling floor plans/house plans, people won't mind getting both versions of the images - small and large, since they can have an easy overview with the smaller versions. I can't figure out how to get rid of that, and I'm not going to try. If it ain't broke, don't fix it.

One last thing I DID NOT do was to edit out/comment out the detailed images section as boomer shows you how to do, since I really want an overview there on the page - redudancy is good in this line that I'm in.

I hope this helps others.

What you COULD do is take the tags I edited and place them around the detailed images smarty tags, turning your entire detailed images section into a clickable area. That wouldn't work for me as my detailed images are 800 wide by 800+ long in many cases, and I don't want a clickable area on the page the size of Nebraska. However, if you use smaller pictures, that might work for you. In that case, you can edit out the following:

Code:





<CENTER>[img]{$ImagesDir}/preview.gif[/img]Click Here to View Details on All Plans Below - Sizes include small and large complete versions.</CENTER>

because it no longer becomes necessary (as the images themselves would turn clickable - I believe. I haven't tested this out and I don't know if it will break the smarty tags, but I don't think it will.

That's about as much coding for this thing as I can stand. :)

If anyone has improvements to this, please let me know.

Great Code... Small Problem

Hello,

I am getting a runtime error - Unterminated string constant at line 130 -

Not sure what is causing this. I copy and pasted the code exactly, no other mods.

you can view a page here

http://www.grooveboxmusic.com/store/product.php?productid=16138&cat=262&page=1

Thanks in advance!

Quote:

Are the instructions and code on pst 1 the latest? I followed instructions and copied code verbatim and cannot get it to work...

They are - I made a common mistake and uploaded the files in the wrong format...

One correction though, the .php file should be placed in the root of the site, not in the customer directory...

Thanks for a gread mod!

Quick Javascript Hack

Hi again everyone,

I'm wondering if anyone could quickly hack the following code of Boomer's to just do the following:

Right now, it pops up images really nicely, but a lot of my images are different sizes. That means when you click "Next" or "Previous", it will resize the window each time. Is there a way to just make a full screen pop-up around the size of the user's screen, and leave it that way? I don't mean full screen as in "No scroll bars etc", but just max screen size and then just have the image in the center without resizing the window? That would be really great. I can't figure out which variables to change/take out.

Here's the code:

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}

Nevermind, I actually figured it out. There's a slight problem where it pops up nice and big and the user has to scroll over or expand it to fill the screen, but it works really well aside from that. I'll try to figure out that quirk but, aside from that, it works great. I'll post the code when I'm done. I think it's really useful if you have big and differently sized images so that the user doesn't have to move the mouse as much to scroll through the pictures.

Anyone interested?

Here is the final code block. This removes transitions, resizes to max window size of user, keeps previous/next at the very top/bottom of the screen. If the picture is bigger than the user's screen, there are always the scrollbars.

I don't know how "clean" it is, but I tested it on IE 6, Safari 2, and Firefox 1.0.6 and it works fine and gives me no errors.

The file is product_images.tpl in Boomer's pop-up code:

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

}



function playeffect(){

}



function backward(){

   if (which>0){

      which--

   } else {

      which=photos.length-1;

   }

  applyeffect()

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

   newWidth=screen.height;

   newHeight=screen.height;

   if(newHeight>=screen.height) {

     newHeight=screen.height-30;

   }

   if(newWidth>=screen.width) {

     newWidth=screen.width;

   }

}



function forward(){

   if (which<photos.length-1){

      which++

   } else {

      which=0;

   }

  applyeffect()

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

   newWidth=screen.height;

   newHeight=screen.height;

   if(newHeight>=screen.height) {

     newHeight=screen.height-30;

   }

   if(newWidth>=screen.width) {

     newWidth=screen.width;

   }

}

//-->

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

Enjoy. :)

Re: Great Code... Small Problem

Quote:

Originally Posted by groovebox

Find this

Code:

    <td width="50%" height="21" onClick="javascript:backward();return false;" style="cursor:pointer;cursor:hand;" onMouseOver="'"><p align="left">[img]/Store/skin1/images/larrow.gif[/img] Previous</td>

and replace with this

Code:

    <td width="50%" height="21" onClick="javascript:backward();return false;" style="cursor:pointer;cursor:hand;"><p align="left">[img]/Store/skin1/images/larrow.gif[/img] Previous</td>

Not sure what the onMouseOver event was called for... But, after I removed it, my error went away.

Hope this helps

Larry

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!!!