OK... I paid X-Cart to help me figure this out... and I am now presenting my final mod...
This revision to Goran's free contribution is "optimized" for 4.1.3 and allows unique variant thumbnail images (that is, if you have assigned unique thumbs to variants) to be CLICKABLE, and the thumbnail link will call THICKBOX.
This is ONLY for 4.1 and later...
First, install Thickbox as described in Goran's instructions. Then:
1. Enable Detailed Product Images options (4.1 admin settings)
2. Change this code in product.tpl:
FIND:
Code:
{if $active_modules.Detailed_Product_Images ne "" && $config.Detailed_Product_Images.det_image_popup eq 'Y' && $images ne '' && $js_enabled eq 'Y'}
{include file="modules/Detailed_Product_Images/popup_image.tpl"}
{else}
{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail" type="P"} {/if}
REPLACE WITH:
Code:
{if $active_modules.Detailed_Product_Images ne "" && $config.Detailed_Product_Images.det_image_popup eq 'Y' && $images ne '' && $js_enabled eq 'Y'}
{* comment out the include for the stock popup_image.tpl *}
{* {include file="modules/Detailed_Product_Images/popup_image.tpl"} *}
{* then add the include for thickbox *}
{include file="thickbox/thickbox_productpage.tpl" }
{else}
{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail" type="P"} {/if}
3. /skin1/thickbox/thickbox_productpage.tpl -- this is the new code. REPLACE what you have with this:
Code:
{section name=image loop=$images}
{if $images[image].avail eq "Y" && $smarty.section.image.index eq 0}
{if $images[image].tmbn_url}
<div style="white-space: nowrap; padding-left: 10px;">
<a href="{$images[image].tmbn_url}" title="{$images[image].alt|escape}" class="thickbox" rel="[detailed]">
{else}
<a href="{$xcart_web_dir}/image.php?id={$images[image].imageid}&type=D" title="{$images[image].alt|escape}" class="thickbox" rel="[detailed]">
{/if}
{/if}
{/section}
{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail" type="P"}
{section name=image loop=$images}
{if $images[image].avail eq "Y" && $smarty.section.image.index eq 0}
</a>
</div>
{/if}
{/section}
{if $images ne ""}
<div style="white-space:nowrap;color:#FF1493;font-weight:bold;padding:2px;margin:10px 0 4px;">{$lng.lbl_detailed_images} ¬</div>
{section name=image loop=$images}
{if $images[image].avail eq "Y"}
{if $images[image].tmbn_url}
<div style="white-space: nowrap;padding-left:10px;"><a href="{$images[image].tmbn_url}" title="{$images[image].alt|escape}" class="thickbox" rel="[detailed]"><img src="{$SkinDir}/thickbox/files/zoom.gif" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> {$images[image].alt|escape}</a></div>
{else}
<div style="white-space: nowrap;padding-left:10px;"><a href="{$xcart_web_dir}/image.php?id={$images[image].imageid}&type=D" title="{$images[image].alt|escape}" class="thickbox" rel="[detailed]"><img src="{$SkinDir}/thickbox/files/zoom.gif" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> {$images[image].alt|escape}</a></div>
{/if}
{/if}
{/section}
{/if}
4. You will probably need to make a minor adjustment to /skin1/thickbox/files/thickbox.css
Comment out lines 4-6 - to look like this:
Code:
/* { padding: 0; margin: 0; }
html, body { min-height: 100%; height: auto !important; height: 100%; } */
/*
5. You could stop here, but then when you call Thickbox, the display will say "image 2 of 2" if you have a single detailed image, or "image 2 of 3" if you have 2 images, etc... so this required one last edit -- in /skin1/thickbox/files/thickbox.js
Line 70 -- FIND:
Code:
TB_imageCount = "Image " + (TB_Counter + 1) +" of "+ (TB_TempArray.length);
REPLACE WITH:
Code:
TB_imageCount = "Image " + (TB_Counter) +" of "+ (TB_TempArray.length - 1);
That's that. Please alert me if you find any issues... This code works perfectly for me in 4.1.3
Goran, feel free to use this or add this to the distribution.
Jeremy