Good night…
We have Thickbox and Lightbox , and now we can have another one… Greybox Mod. 
Just to get it…
Follow these steps… (similar to thickbox and lightbox)…
Official page is [URL=“http://orangoo.com/labs/GreyBox/”]http://orangoo.com/labs/GreyBox/[/URL]
Installation Instructions on [URL=“http://orangoo.com/labs/greybox/installation.html”]http://orangoo.com/labs/greybox/installation.html[/URL]
you need to download a zip file from [URL=“http://orangoo.com/labs/uploads/GreyBox_v5_53.zip”]http://orangoo.com/labs/uploads/GreyBox_v5_53.zip[/URL]
then uncompress it.
Copy a folder called “Greybox” into CS-cart directory. In my case for example, is in /var/www/tienda2/ where “tienda2” is cs-cart directory.
then edit index.tpl (cs-cart directory/skins/xxxx/customer/) and add these lines between header
[quote]
{include file="meta.tpl"}
[I][COLOR="Red"]{* new Greybox MOD*}
{if $content == "product_details" || $content == "products"} {* thanks to Snorocket & Zardos, avoid checkout issue *}
{/if}
{* END MOD *}
[/COLOR][/I]
{strip}
{if $page_title}
{$page_title}
{else}
[/quote]
In product_pages/product_options.tpl add this code:
[quote]
{foreach from=$product.option_image_pairs item="imag" name="ii" key="_key"}
pr_i[{$id}][{$smarty.foreach.ii.iteration}-1] = {$ldelim}
'image_id': '{$imag.image_id}',
'detailed_id': '{$imag.detailed_id}',
[I][COLOR="Red"]'detailed_id2': '{$imag.detailed.image_path}',[/COLOR][/I]
'options': '{$imag.options}'
{$rdelim};
[/quote]
In classes/scripts/exceptions.js add the code in red:
Under **************images**************
[Quote]
new_ref[id] = "javascript:fn_open_popup_image('"+image_index+"?o bject_type=detailed&image_id="+pr_i[id][row]['detailed_id']+"&window=popup', "+pr_i[id][row]['detailed']['image_x']+", "+pr_i[id][row]['detailed']['image_y']+"+ 30);"
[/Quote]
With
[Quote]
function fn_change_image(id, row)
{
if (pr_i[id][row]['detailed_id'] != '' && pr_i[id][row]['detailed_id'] != '0') {
[I][COLOR="Red"]new_ref[id] = ""+pr_i[id][row]['detailed2']+""[/COLOR][/I]
if (document.getElementById('detailed_box_' + id)) {
document.getElementById('detailed_box_' + id).style.display = "block";
}
if (document.getElementById('detailed_href1_' + id)) {
document.getElementById('detailed_href1_' + id).href = new_ref[id];
[/Quote]
In common_templates/images.tpl this is the full file if you want to use it, or sort the bits in red:
[Quote]
{* $Id: image.tpl 4188 2007-10-08 08:01:09Z imac $ *}
{strip}
{if $settings.Addons.seo == 'Y'}
{assign var="image_location" value="$current_location/"}
{/if}
{if $show_detailed_link && $images.detailed_id}
[I][COLOR="Red"]{if $settings.General.images_location == "database"}
{assign var="detailed_href" value="$image_index?object_type=detailed&image_id= `$images.detailed_id`"}
{else}
{assign var="detailed_href" value="`$images.detailed.image_path`"}
{/if}
[/COLOR][/I]
{/if}
{if !$image_width}
{if $images.icon.image_x}
{assign var="image_width" value=$images.icon.image_x}
{/if}
{if $images.icon.image_y}
{assign var="image_height" value=$images.icon.image_y}
{/if}
{else}
{if $images.icon.image_x && $images.icon.image_y}
{math equation="new_x * y / x" new_x=$image_width x=$images.icon.image_x y=$images.icon.image_y format="%d" assign="image_height"}
{/if}
{/if}
{if $show_thumbnail == 'Y' && $image_width && $images.image_id}
{assign var='object_type' value=$object_type|default:'product'}
{assign var='icon_image_path' value="$image_index?$mode_name=show_thumbnail&imag e_id=`$images.image_id`&object_type=$object_type&w idth=$image_width"}
{else}
{assign var='icon_image_path' value=$images.icon.image_path}
{/if}
{if $images.icon.image_type != 'application/x-shockwave-flash'}
{if $detailed_href}
[I][COLOR="Red"]
{/if}[/COLOR][/I]
{if $obj_id && !$no_ids}
{/if}
{if $detailed_href}
{/if}
{else}
{if $flash_vars}
{/if}
{/if}
{if $show_detailed_link}
[I][COLOR="Red"]
{* we can leave original line or modified line *}
{* Original Line *}
{$lang.view_larger_image}
{* Modified line *}
{$lang.view_large_image}
[/COLOR][/I]
[B][COLOR="Red"]{* there is no space in $lang.view_large_image *}[/COLOR][/B]
{* end mod *}
{/if}
{/strip}
{if $obj_id && !$no_ids}
{/if}
[/Quote]
Verify that {$lang.view_larger_image} doesn't have any spaces on it... don't know why it appears an space... I have rechecked and has no spaces but when I publish it appears :confused:
How it works...
If you want just to show one image, you need to call it as "rel=gb_image[]" but if you want to show group of images ( i think is the case for everybody) you need to use "rel=gb_imageset[]".
Notice that on code I put "gb_imageset[XX]" and "gb_imageset[123]", what I noticed is if I put same or nothing inside brackets, will appear duplicate images... don't know why...
Here you have the results....
see image_greybox.jpg
(again i set a censore to avoid any offense :rolleyes: )
I also have checked css style but don't find why number of pages between <> appears on black instead white colour... any ideas?
thanks again
Jmonk
