X-Cart forums - Thickbox 2.0 implementation

X-Cart forums (https://forum.x-cart.com/index.php)

- Third Party Add-Ons for X-Cart 4 (https://forum.x-cart.com/forumdisplay.php?f=45)

- - Thickbox 2.0 implementation (https://forum.x-cart.com/showthread.php?t=27058)

Re: Thickbox 2.0 implementation

has anyone been able to make this work with 4.1.7? i can't seem to find the detailed image line which i need to comment out.

any help will be greatly appreciated.

Re: Thickbox 2.0 implementation

got it to work. problem now is it shows up as a link like mentioned before instead of a thumbnail.

anyone who has any idea at all on how to show thumbnails instead of a link?

Re: Thickbox 2.0 implementation

I'm using the following code for my thickbox_productpage.tpl

Code:

 

{if $images ne ""}

<div style="white-space:nowrap;color:#D90000;font-weight:bold;padding:2px;margin:10px 0 4px;">{$lng.lbl_detailed_images} &not;</div>

<table width="250"><tr>

{section name=image loop=$images}

<td>

{if $images[image].avail eq "Y"}

{if $images[image].tmbn_url} 

<a href="{$images[image].tmbn_url}" title="{$images[image].alt|escape}" class="thickbox" rel="lightbox_detailed"><img src="{$images[image].tmbn_url}" width="75" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> {$images[image].alt|escape}{if $images[image].alt|escape eq ""} {$lng.lbl_image} {math equation="value+1" value=$smarty.section.image.index}{/if}</a></div>

{else}

<a href="{$xcart_web_dir}/image.php?id={$images[image].imageid}&amp;type=D" title="{$images[image].alt|escape}" class="thickbox" rel="lightbox_detailed"><img src="{$SkinDir}/thickbox/files/zoom.gif" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> {$images[image].alt|escape}{if $images[image].alt|escape eq ""} {$lng.lbl_image} {math equation="value+1" value=$smarty.section.image.index}{/if}</a></div>

{/if}

{/if}

</td>

{/section}</tr>

</table>

{/if}

Re: Thickbox 2.0 implementation

Use this code:

Quote:

{if $images ne ""}
<div style="white-space:nowrap;color:#D90000;font-weight:bold;padding:2px;margin:10px 0 4px;">{$lng.lbl_detailed_images} ¬</div>
<table width="250"><tr>
{section name=image loop=$images}
<td>
{if $images[image].avail eq "Y"}
{if $images[image].tmbn_url}
<div style="white-space: nowrap;padding:0 0 1px 3px;"><a href="{$images[image].tmbn_url}" title=" {$images[image].alt|escape}" class="thickbox" rel="lightbox_detailed"><img src="{$images[image].tmbn_url}" width="75" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> </a></div>
{else}
<div style="white-space: nowrap;padding:0 0 1px 3px;"><a href="{$xcart_web_dir}/image.php?id={$images[image].imageid}&type=D" title=" {$images[image].alt|escape}" class="thickbox" rel="lightbox_detailed"><img src="{$SkinDir}/thickbox/files/zoom.gif" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> {$images[image].alt|escape}{if $images[image].alt|escape eq ""} {$lng.lbl_image} {math equation="value+1" value=$smarty.section.image.index}{/if}</a></div>
{/if}
{/if}
</td>
{/section}</tr>
</table>
<script type="text/javascript" src="{$SkinDir}/thickbox/files/jquery-compressed.js"></script>
<script type="text/javascript" src="{$SkinDir}/thickbox/files/thickbox.js"></script>
<style type="text/css" media="all">@import "{$SkinDir}/thickbox/files/thickbox.css";</style>
{/if}

Adjust the line that I bolded to make the thumbnails whatever size you like.

Re: Thickbox 2.0 implementation

Hmmm just one bug with this, it doesn't seem to wrap. I have tested it with 4 images and it just pushes the text over and it looks terrible. Anyone have a fix for this?

You can see what I mean here: http://www.babyplanetboutique.com/xcart/product.php?productid=73&cat=1&page=1

Re: Thickbox 2.0 implementation

Edit: My Code is for Thickbox version 3 or 3.1

I tried this wonderful mod and had the same problem with multiple images not wrapping. I have a working version that gracefully wraps and lets you specify how many images per row before wrapping.

New thickbox_productpage.tpl

PHP Code:


		
			
{if $images ne ""}
<div style="white-space:nowrap;color:#D90000;font-weight:bold;padding:2px;margin:10px 0 4px;">{$lng.lbl_detailed_images} &not;</div>
<table width="250"><tr>
{assign var=loop value=1}
{section name=image loop=$images}
<td class = image_bdr>
{if $images[image].avail eq "Y"}
{if $images[image].tmbn_url} 
<div style="white-space: nowrap;padding:0 0 1px 3px;"><a href="{$images[image].tmbn_url}" title=" {$images[image].alt|escape}" class="thickbox" rel="lightbox_detailed"><img src="{$images[image].tmbn_url}" width="100" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> </a></div>
{else}
<div style="white-space: nowrap;padding:0 0 1px 3px;"><a href="{$xcart_web_dir}/image.php?id={$images[image].imageid}&amp;type=D" title=" {$images[image].alt|escape}" class="thickbox" rel="lightbox_detailed"><img src="{$SkinDir}/thickbox/files/zoom.gif" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> {$images[image].alt|escape}{if $images[image].alt|escape eq ""} {$lng.lbl_image} {math equation="value+1" value=$smarty.section.image.index}{/if}</a></div>
{/if}
{/if}
</td>
{* change the number below for how many images wide you want *}
{if $loop eq 5} </tr><tr> {assign var=loop value=0}
{/if}
{assign var=loop value=$loop+1}
{/section}</tr>
</table>
<script type="text/javascript" src="{$SkinDir}/thickbox/files/jquery-compressed.js"></script>
<script type="text/javascript" src="{$SkinDir}/thickbox/files/thickbox.js"></script>
<style type="text/css" media="all">@import "{$SkinDir}/thickbox/files/thickbox.css";</style>
{/if}

You also need to change the location of the thickbox_productpage.tpl include in the customer\main\product.tpl file

PHP Code:


		
			
</table>
{include file="thickbox/thickbox_productpage.tpl" }
<input type="hidden" name="productid" value="{$product.productid}" />
<input type="hidden" name="cat" value="{$smarty.get.cat|escape:"html"}" />
<input type="hidden" name="page" value="{$smarty.get.page|escape:"html"}" />

On 4.1.9 this code is around line 208

Hope this helps someone

Re: Thickbox 2.0 implementation

Edit: My Code is for Thickbox version 3 or 3.1

Heres a slightly tweaked version. It has better cosmetics, and centers the image thumbnails.

PHP Code:


		
			
{if $images ne ""}
<div style="white-space:nowrap;color:#D90000;font-weight:bold;padding:2px;margin:10px 0 4px;">{$lng.lbl_detailed_images} &not;</div>
<table width="100%" ><tr>
{assign var=loop value=1}
{section name=image loop=$images}
<td class = image_bdr align="center">
{if $images[image].avail eq "Y"}
{if $images[image].tmbn_url} 
<div style="white-space: nowrap;padding:0 0 1px 3px;"><a href="{$images[image].tmbn_url}" title=" {$images[image].alt|escape}" class="thickbox" rel="lightbox_detailed"><img src="{$images[image].tmbn_url}" width="100" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> </a></div>
{else}
<div style="white-space: nowrap;padding:0 0 1px 3px;"><a href="{$xcart_web_dir}/image.php?id={$images[image].imageid}&amp;type=D" title=" {$images[image].alt|escape}" class="thickbox" rel="lightbox_detailed"><img src="{$SkinDir}/thickbox/files/zoom.gif" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> {$images[image].alt|escape}{if $images[image].alt|escape eq ""} {$lng.lbl_image} {math equation="value+1" value=$smarty.section.image.index}{/if}</a></div>
{/if}
{/if}
</td>
{* change the number below for how many images wide you want *}
{if $loop eq 5} </tr><tr> {assign var=loop value=0}
{/if}
{assign var=loop value=$loop+1}
{/section}</tr>
</table>
<script type="text/javascript" src="{$SkinDir}/thickbox/files/jquery-compressed.js"></script>
<script type="text/javascript" src="{$SkinDir}/thickbox/files/thickbox.js"></script>
<style type="text/css" media="all">@import "{$SkinDir}/thickbox/files/thickbox.css";</style>
{/if}

Also need to add this to your css file

Code:

.image_bdr {BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid}

Re: Thickbox 2.0 implementation

Does anyone know how to get thickbox working with images on a static page?
Thanks!

Re: Thickbox 2.0 implementation

Any ideas? I have the table holder on my product.tpl but i try all and none idea work Can anyone take a look and tell me whats wrong?

Thanks!

Code:



{* $Id: product.tpl,v 1.147.2.16 2007/06/28 05:47:00 max Exp $ *}

{include file="main/include_js.tpl" src="main/popup_image.js"}

{if $active_modules.Special_Offers}

{include file="modules/Special_Offers/customer/product_offers_short_list.tpl" product=$product}

{/if}

{include file="form_validation_js.tpl"}

{if $product.product_type eq "C" && $active_modules.Product_Configurator}

{include file="modules/Product_Configurator/pconf_customer_product.tpl"}

{else}

{capture name=dialog}

<form name="orderform" method="post" action="cart.php?mode=add" onsubmit="javascript: return FormValidation();">

<table width="100%">

<tr>

    <td class="PImgBox" rowspan="2">



{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"}

{elseif $product.force_image_type eq 'W' && $product.variantid}

{include file="product_thumbnail.tpl" productid=$product.variantid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail" type="W"}&nbsp;

{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}



{* Added by Pedro *}

{include file="thickbox/thickbox_productpage.tpl" }

{* end Pedro *}



{if $active_modules.Magnifier ne "" && $config.Magnifier.magnifier_image_popup eq 'Y' && $zoomer_images ne '' && $js_enabled eq 'Y'}

{include file="modules/Magnifier/popup_magnifier.tpl"}

{/if}

    </td>

    <td valign="top" width="100%">



<table width="100%" cellspacing="0" cellpadding="0">

<tr>

    <td>{if $product.fulldescr ne ""}{$product.descr}<br><br><a href="#mytabber" onClick="javascript:tabShow(1)">{$lng.lbl_see_full_description}{include file="mediabox/mediabox.tpl"}</a>{else}{$product.descr}{/if}</td>

{if $product.taxed_price gt 0 and $product.list_price gt 0}

    <td align="right" valign="top" width="60" id="save_percent_box"{if $product.taxed_price >= $product.list_price} style="display: none;"{/if}>



<table width="60" cellspacing="1" cellpadding="2">

<tr>

    <td class="SaveMoneyLabel">

<br />

{math equation="100-(price/lprice)*100" price=$product.taxed_price lprice=$product.list_price format="%3.0f" assign=discount}

&nbsp;<span id="save_percent">{ $discount }</span>%

    </td>

</tr>

</table>



    </td>

{/if}

</tr>

</table>



<p />

<table width="100%" cellpadding="0" cellspacing="0">

<tr><td colspan="2"><b><font class="ProductDetailsTitle">{$lng.lbl_details}</font></b></td></tr>

<tr><td class="Line" height="1" colspan="2"><img src="{$ImagesDir}/spacer.gif" class="Spc" alt="" /></td></tr>

<tr><td colspan="2">&nbsp;</td></tr>

<tr>

    <td width="30%">{$lng.lbl_sku}</td>

    <td nowrap="nowrap" id="product_code">{$product.productcode}</td>

</tr>

{if $config.Appearance.show_in_stock eq "Y" and $config.General.unlimited_products ne "Y" and $product.distribution eq ""}

<tr>

    <td width="30%">{$lng.lbl_in_stock}</td>

    <td nowrap="nowrap" id="product_avail_txt">

{if $product.avail gt 0}{$lng.txt_items_available|substitute:"items":$product.avail}{else}{$lng.lbl_no_items_available}{/if}

    </td>

</tr>

{/if}

{if $product.weight ne "0.00" || $variants ne ''}

<tr id="product_weight_box">

    <td width="30%">{$lng.lbl_weight}</td>

    <td nowrap="nowrap"><span id="product_weight">{$product.weight|formatprice}</span> {$config.General.weight_symbol}</td>

</tr>

{/if}

{if $active_modules.Extra_Fields ne ""}

{include file="modules/Extra_Fields/product.tpl"}

{/if}

{if $active_modules.Feature_Comparison ne ""}

{include file="modules/Feature_Comparison/product.tpl"}

{/if}

{if $active_modules.Subscriptions ne "" and $subscription}

{include file="modules/Subscriptions/subscription_info.tpl"}

{else}

<tr><td class="ProductPriceConverting" valign="top">{$lng.lbl_price}:</td>

<td valign="top">

{if $product.taxed_price ne 0 || $variant_price_no_empty}

<font class="ProductDetailsTitle"><span id="product_price" style="white-space: nowrap;">{include file="currency.tpl" value=$product.taxed_price plain_text_message=true}</span></font><font class="MarketPrice"> <span id="product_alt_price" style="white-space: nowrap;">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product.taxed_price plain_text_message=true}</span></font>

{if $product.taxes}<br />{include file="customer/main/taxed_price.tpl" taxes=$product.taxes}{/if}

{else}

<input type="text" size="7" name="price" />

{/if}

</td>

</tr>

{/if}

</table>

<p />

<table width="100%" cellpadding="0" cellspacing="0">

<tr><td colspan="2">

<b><font class="ProductDetailsTitle">{$lng.lbl_options}</font></b>

</td></tr>

<tr><td class="Line" height="1" colspan="2"><img src="{$ImagesDir}/spacer.gif" class="Spc" alt="" /></td></tr>

<tr><td colspan="2">&nbsp;</td></tr>

{if $active_modules.Product_Options ne ""}

{ include file="modules/Product_Options/customer_options.tpl"}

{/if}

<tr><td height="25" width="30%">{$lng.lbl_quantity}{if $product.min_amount gt 1}<br /><font class="ProductDetailsTitle">{$lng.txt_need_min_amount|substitute:"items":$product.min_amount}</font>{/if}</td>

<td>

{if $config.General.unlimited_products eq "N" and ($product.avail le 0 or $product.avail lt $product.min_amount) and $variants eq ''}

<script type="text/javascript" language="JavaScript 1.2">

<!--

var min_avail = 1;

var avail = 0;

var product_avail = 0;

-->

</script>

<b>{$lng.txt_out_of_stock}</b>

{else}

{if $config.General.unlimited_products eq "Y"}

{assign var="mq" value=$config.Appearance.max_select_quantity}

{else}

{math equation="x/y" x=$config.Appearance.max_select_quantity y=$product.min_amount assign="tmp"}

{if $tmp<2}

{assign var="minamount" value=$product.min_amount}

{else}

{assign var="minamount" value=1}

{/if}

{math equation="min(maxquantity+minamount, productquantity+1)" assign="mq" maxquantity=$config.Appearance.max_select_quantity minamount=$minamount productquantity=$product.avail}

{/if}

{if $product.distribution eq "" and !($active_modules.Subscriptions ne "" and $subscription)}

{if $product.min_amount le 1}

{assign var="start_quantity" value=1}

{else}

{assign var="start_quantity" value=$product.min_amount}

{/if}

{if $config.General.unlimited_products eq "Y"}

{math equation="x+y" assign="mq" x=$mq y=$start_quantity}

{/if}

<script type="text/javascript" language="JavaScript 1.2">

<!--

var min_avail = {$start_quantity|default:1};

var avail = {$mq|default:1}-1;

var product_avail = {$product.avail|default:"0"};

-->

</script>

<select id="product_avail" name="amount"{if $active_modules.Product_Options ne '' && $product_options ne ''} onchange="check_wholesale(this.value);"{/if}>

{section name=quantity loop=$mq start=$start_quantity}

<option value="{%quantity.index%}"{if $smarty.get.quantity eq %quantity.index%} selected="selected"{/if}>{%quantity.index%}</option>

{/section}

</select>

{else}

<script type="text/javascript" language="JavaScript 1.2">

<!--

var min_avail = 1;

var avail = 1;

var product_avail = 1;

-->

</script>

<font class="ProductDetailsTitle">1</font><input type="hidden" name="amount" value="1" /> {if $product.distribution ne ""}{$lng.txt_product_downloadable}{/if}

{/if}

Re: Thickbox 2.0 implementation

Continue....

Code:

 {/if}

</td></tr>

<tr><td colspan="2">

<input type="hidden" name="mode" value="add" />

{include file="customer/main/product_prices.tpl"}

{if $config.General.unlimited_products eq "Y" || ($product.avail gt 0 and $product.avail ge $product.min_amount) || $variants ne ''}

{if $js_enabled}

<br />

{if $product.forsale ne "B"}

<table cellspacing="0" cellpadding="0">

<tr>

    <td>{include file="buttons/add_to_cart.tpl" style="button" href="javascript: if(FormValidation()) document.orderform.submit();"}</td>

    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>

    <td>

{if ($login ne "" || $config.Wishlist.add2wl_unlogged_user eq 'Y') && $active_modules.Wishlist ne ""}

{include file="customer/add2wl.tpl"}

{/if}

    </td>

</tr>

</table>

{else}

{$lng.txt_pconf_product_is_bundled}

{/if}

{if $smarty.get.pconf ne "" && $active_modules.Product_Configurator}

<br /><br />

<input type="hidden" name="slot" value="{$smarty.get.slot}" />

<input type="hidden" name="addproductid" value="{$product.productid}" />

{include file="buttons/button.tpl" button_title=$lng.lbl_pconf_add_to_configuration style="button" href="javascript:if (FormValidation()) `$ldelim`document.orderform.productid.value='`$smarty.get.pconf`';document.orderform.action='pconf.php';document.orderform.submit()`$rdelim`"}

{if $config.General.unlimited_products ne "Y" && $product.pconf_avail le 0}

<br />

<font class="Message"><b>{$lng.lbl_note}:</b> {$lng.lbl_pconf_slot_out_of_stock_note}</font><br />

{/if}

<br />

{$lng.txt_add_to_configuration_note}

<br />

{/if}

{else}

{include file="submit_wo_js.tpl" value=$lng.lbl_add_to_cart}

{/if}

{/if}

{if $active_modules.Feature_Comparison ne ""}

{include file="modules/Feature_Comparison/product_buttons.tpl"}

{/if}

<br /><br />

</td>

</tr></table>

</td>

</tr>

</table>

<input type="hidden" name="productid" value="{$product.productid}" />

<input type="hidden" name="cat" value="{$smarty.get.cat|escape:"html"}" />

<input type="hidden" name="page" value="{$smarty.get.page|escape:"html"}" />

</form>

{/capture}

{include file="dialog.tpl" title=$product.producttitle content=$smarty.capture.dialog extra='width="100%"'}



<div class="tabber" id="mytabber">

{if $active_modules.Magnifier ne "" && ($config.Magnifier.magnifier_image_popup ne 'Y' || $js_enabled ne 'Y')}

<div class="tabbertab">

<h2>Product Magnifier</h2>

{include file="modules/Magnifier/product_magnifier.tpl" productid=$product.productid}

</div>

{/if}

{if $config.Appearance.send_to_friend_enabled eq 'Y'}

<div class="tabbertab">

<h2>{$lng.lbl_send_to_friend}</h2>

{include file="customer/main/send_to_friend.tpl" }

</div>

{/if}

{*

{if $active_modules.Detailed_Product_Images ne "" && ($config.Detailed_Product_Images.det_image_popup ne 'Y' || $js_enabled ne 'Y')}

<div class="tabbertab">

<h2>{$lng.lbl_detailed_images}</h2>

{include file="modules/Detailed_Product_Images/product_images.tpl" }</div>

{/if}*}



<div class="tabbertab" id="description">

<h2>{$lng.lbl_full_description}</h2>

{include file="customer/main/full_description.tpl"}</div>



<div class="tabbertab">

<h2>{$lng.lbl_more_tabs}</h2>

<div class="tabber" id="mytabber">

{if $active_modules.Recommended_Products ne ""}

<div class="tabbertab tabbertabdefault">

<h2>{$lng.module_name_Recommended_Products}</h2>

{include file="modules/Recommended_Products/recommends.tpl" }</div>

{/if}

{if $active_modules.Customer_Reviews ne ""}

<div class="tabbertab tabbertabdefault">

<h2>{$lng.lbl_customer_reviews}</h2>

{include file="modules/Customer_Reviews/vote_reviews.tpl" }</div>

{/if}

<div class="tabbertab">

<h2>{$lng.lbl_more_tabs}</h2>

<div class="tabber" id="mytabber">



{if $active_modules.Upselling_Products ne ""}

<div class="tabbertab">

<h2>{$lng.lbl_related_products}</h2>

{include file="modules/Upselling_Products/related_products.tpl" }{include file="customer/pricematch.tpl"}</div>



{/if}</div></div></div>



</div>



{/if}



{if $active_modules.Product_Options ne '' && $product_options ne '' && ($product.product_type ne "C" || !$active_modules.Product_Configurator)}

<script type="text/javascript" language="JavaScript 1.2">

<!--

check_options();

-->

</script>

{/if}