Hello guys,
I have spending today triying implementing LightBox instead of Thickbox…
and works properly!!! 
You can find more info about Lightbox on
[URL=“http://www.huddletogether.com/projects/lightbox2/#example”]http://www.huddletogether.com/projects/lightbox2/#example[/URL]
Just to implement this, you have to:
(previously you need to download it from [URL=“http://www.huddletogether.com/projects/lightbox2/releases/lightbox2.03.3.zip”]http://www.huddletogether.com/projects/lightbox2/releases/lightbox2.03.3.zip[/URL]
and put onto …classes/script and skin/xxx/customer/)
In customer/index.tpl add this code:
[quote]
{include file="meta.tpl"}
[COLOR="Red"]{* Lightbox modification *}
{if $target == 'products'} {* thanks to snorocket, to avoid an error during checkout process *}
{/if}[/COLOR]
{* end modf *}
{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+"?object_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') {
[COLOR="Red"] new_ref[id] = ""+pr_i[id][row]['detailed2']+""[/COLOR]
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}
[COLOR="Red"] {*assign var="detailed_href" value="javascript:fn_open_popup_image('$image_location$image_index?object_type=detailed&image_id=`$images.detailed_id`&window=popup', `$images.detailed.image_x`+84, `$images.detailed.image_y` + 140);"*}
{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]
{/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&image_id=`$images.image_id`&object_type=$object_type&width=$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}
[COLOR="Red"] [/COLOR]
{/if}
{if $obj_id && !$no_ids}
{/if}
{if $detailed_href}
{/if}
{else}
{if $flash_vars}
{/if}
{/if}
{if $show_detailed_link}
[COLOR="Red"]
{$lang.view_larger_image}
{* VERIFY THAT "lang.view_larger_image" doesn't have any space *}
[/COLOR]
{/if}
{/strip}
{if $obj_id && !$no_ids}
{/if}
[/quote]
Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.
After those modifications, results are on image1.jpg and image2.jpg...
To avoid any ofense I set some censored on that images :rolleyes:
hope this helps...
Jmonk
