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
******************************************[/COLOR]
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]
[URL]http://mjijackson.com/shadowbox/[/URL]
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`"}
{else}
{assign var="detailed_href" value="`$images.detailed.image_path`"}
{/if}[/COLOR]
{/if} ```Then this:
```php ```And this:
```php {$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]
[/COLOR][/B]
[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]
[/COLOR]
```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}'
{$rdelim};
{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.....