The ultimate ‘lightbox’ mod

The ultimate ‘lightbox’ mod, Forget lightbox, thickbox, mediabox, slimbox etc. this one beats them all, Cleanly coded, cross-platform and standards based, product images and product video’s.

Image must be in the File System, not DataBase.

[quote][COLOR=SeaGreen]There is a tiny problem with this mod, and that is with the product option images, it will change the images on options and exceptions, but keeps showing the first image in the popup shadowbox window, it is obvious this is a problem with a script in the cart, anyone with js knowledge can help with this, please do so.[/COLOR][/quote][COLOR=red] UPDATED 13/03/2008 - 22:50 GMT


Use the scripts in the ZIP below, as they are the latest editions.

1.3.5 sp2 + sp3

[COLOR=Red]Version 2.0 is now released.[/COLOR]


The code in [COLOR=SeaGreen]Green[/COLOR] you look for, and add the code in [COLOR=Red]RED[/COLOR]

Edit customer/index.tpl, add code below, just after [COLOR=Blue]{include file=“meta.tpl”}[/COLOR]

```php [COLOR=Red][COLOR=SeaGreen]

{include file=“meta.tpl”}[/COLOR]

{if $content == “product_details” || $content == “products”}

{/if}[/COLOR] ```Add the three scripts above to [B][COLOR=Red]classes/scripts/[/COLOR][/B] in your cart folder root.

Add the images to a folder called images in your cart folder root.

Add shadowbox.css your_cart/skins/basic or base/customer folder

Add code below to your common_templates/image.tpl Comment out the second line {[COLOR=Red]**[/COLOR]}

```php {if $show_detailed_link && $images.detailed_id}
{[COLOR=Red]*[/COLOR]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);"[COLOR=Red]*[/COLOR]}
[COLOR=Red] {if $settings.General.images_location == "database"}
{assign var="detailed_href" value="$image_index?object_type=detailed&image_id=`$images.detailed_id`"}
{assign var="detailed_href" value="`$images.detailed.image_path`"}
{/if} ```Then this:

```php ```And this:

{$lang.view_larger_image}[/COLOR] ```[B][COLOR=Red]

[/COLOR][/B][U][COLOR=Red]Taken out the class="shadowbox" from these two line, not needed, but you still need to add the shadowbox.css as per instructions.

And you are still able to edit shadowbox.css as you like[/COLOR][/U][B][COLOR=Red]
[quote]Thanks to Jakubsnm[/quote]If you wish to loose the image tittle altogether, remove this piece of code from both the above lines:

```php [COLOR=Red]title="{$product.product|strip_tags}"[/COLOR] ```Replace this line, around 379 or comment it out [COLOR=Red]// [COLOR=RoyalBlue]This is the new code in 1.3.5-sp3[/COLOR][/COLOR][COLOR=RoyalBlue]
```php [COLOR=Red]//[/COLOR] new_ref[id] = "javascript:fn_open_popup_image('"+current_location+'/'+image_index+"?object_type=detailed&image_id="+pr_i[id][row]['detailed_id']+"&window=popup', "+pr_i[id][row]['detailed']['image_x']+"+ 84, "+pr_i[id][row]['detailed']['image_y']+"+ 140);" ```With this code to classes/scripts/exceptions.js

```php 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]['detailed_id2']+""[/COLOR]
if (document.getElementById('detailed_box_' + id)) {
document.getElementById('detailed_box_' + id).style.display = "block";
} ```Add this code to product_pages/product_options.tpl

```php // images
pr_i[{$id}] = {$ldelim}{$rdelim};
{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}',
[COLOR=Red]'detailed_id2': '{$imag.detailed.image_path}',[/COLOR]
'options': '{$imag.options}'
{if $imag.image_id} ```That should be it, read the instruction on different uses, using the link above. As you can see very little code change needed for this cool mod.

For those who have [COLOR=Red][B]not modified[/B][/COLOR] these file, here they, just copy over the files in your cart. I have now used product_details.tpl instead of index.tpl for the .js files but leave the css in index.tpl.

As usual backup before you mess.

Have fun.....


[thick russian accent]the Zarbox rocks!~[/accent]

aghh absolute nice! no other word ))

Nice mod.

I had made this for x-cart.

Thank you, I will try it.

[QUOTE][thick russian accent]the Zarbox rocks!~[/accent][/QUOTE]

Thanks Jesse. :rolleyes:

I’m excited. How about an alternate download?

Hi Texas Trophy

[QUOTE]I’m excited. How about an alternate download?[/QUOTE]

Explain a little more?

Cannot download the zip.

Just tried it with firefox, and is ok

Yeah the usual IE and problems downloading from this forum. What’s the deal with that?

Use the link to shadowbox, download the files needed there, make sure you get the latest jquery.js i think it is jquery_123 and follow the instructions in the post. Or use firefox.

Thanks zardos. I’ll report back…I am sure with a great review.

you can download it from the official snorocket site…coming soon…


Thanks for that snorocket

I still like how greybox centered the picture and resized the box to the image’s size.

Very nice zardos! Much appreciated. Very simple mod.

Also thanks sno for providing alternate download.


Nice job! Thanks much!

Thanks tletourneau and Texas Trophy, looks good on both your sites…:smiley:

Looks great.

However, I am having some trouble implementing. At first I thought that the product tabs mod was interfering as the only product it wasn’t working on was the only product that I have added tabs to.

But when I added an additional “test” tab to another product that lightbox was working on it still worked. So I’m stumped.

Any ideas?

try it without the embedded video

it might be a conflict of some sort