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}

Re: Thickbox 2.0 implementation

Hi,
I've installed this Thickbox on my test site, and used the above code to create thumbnails etc rather than text link - thanks a lot for the help given.

However, in Internet Explorer the image is displayed twice (one above the other) whereas in firefox this problem does not occur.

Does anybody else have problems with Internet explorer?

Here is an example:
http://xcart.bpservers.co.uk/xcart/product.php?productid=16126&cat=243&page=1

Maybe i've screwed something up!

Jay

Re: Thickbox 2.0 implementation

Unless you are using the code I placed above, I believe the problem may be that the other code above is for Thickbox 3, and you are using Thickbox 2.
I have combined my code with that to wrap multiple thumbnails and it works fine.

Code:

 

{if $images ne ""}

<div style="white-space:nowrap;color:#D90000;font-weight:bold;padding:2px;margin:10px 0 4px;">Click a thumbnail below to Enlarge image...</div>

<table width="250" cellpadding="5" cellspacing="5">

<tr>

{assign var=loop value=1}

{section name=image loop=$images}

 <td>

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

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

 <tr>

 <td align="center">

 <a href="{$images[image].tmbn_url}" title="{$images[image].alt|escape}" class="thickbox" rel="lightbox_detailed"><img src="{$images[image].tmbn_url}" width="135" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" />

 </td>

 </tr>

 <tr>

 <td align="center">

 {$images[image].alt|escape}{if $images[image].alt|escape eq ""} {$lng.lbl_image} {math equation="value+1" value=$smarty.section.image.index}{/if}</a>

 </td>

 </tr>

 </table>

 {/if}

{* change the number below for how many images wide you want *}

{if $loop eq 3} </tr><tr> {assign var=loop value=0}

{/if}

{assign var=loop value=$loop+1}

{/section}</tr>

</table>

{/if}

Re: Thickbox 2.0 implementation

The code I posted was tested with Thickbox 3.1 and seemed to work fine.

Thickbox 2 was not tried

Re: Thickbox 2.0 implementation

Ah, thought so - the 2 versions are different - so anyone following this thread needs to be careful as it is titled "Thickbox 2.0 implementation".
If you are using v2, then use my code, if v3, use sk8conz's.

Re: Thickbox 2.0 implementation

ok thanks, but i can't seem to work out which version of thickbox i have.
I downloaded it from here:
http://www.7dana.com/106.84.0.0.1.0.phtml

Does anybody know which version this is?

Cheers

Re: Thickbox 2.0 implementation

If you are getting 2 images in IE, then you need to use my code - I would guess you are using Thickbox 2.

Re: Thickbox 2.0 implementation

PAULODMAN - many thanks! that solves it!

Re: Thickbox 2.0 implementation

Quote:

Originally Posted by S Parkinson

ok thanks, but i can't seem to work out which version of thickbox i have.
I downloaded it from here:
http://www.7dana.com/106.84.0.0.1.0.phtml

Does anybody know which version this is?

Cheers

Version 3

Re: Thickbox 2.0 implementation

I'm spinning my wheels here and not having any luck.

Using version 4.1.9 basically out of the box. No modifications.

I downloaded 7dana's zip file today . Looking at the js file it's Thickbox 3

So I'm not sure what part of 7dana's instructions I'm supposed to follow and what part of sk8conz instructions I'm supposed to follow with thickbox 3 in 4.1.9

maybe a quick step by step could help others too since the main/product.tpl is different in 4.1.9.

here's mine .. which I dont think is the same from others posted earlier in this thread:

{* $Id: product.tpl,v 1.46.2.2 2007/06/04 11:13:13 max Exp $ *}
{capture name=dialog}
<table width="100%">
<tr>
<td valign="top" align="left" width="30%">
{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product}
<p />
{if $smarty.get.mode ne "printable"}
<a href="product.php?productid={$product.productid}&a mp;mode=printable" target="_blank"><img src="{$ImagesDir}/print.gif" width="23" height="22" name="print" alt="{$lng.lbl_printable_version|escape}" /></a>
{/if}
</td>
<td valign="top">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>{$lng.lbl_sku}</td>
<td>{$product.productcode}</td>
</tr>
{if $product.category_text}
<tr>
<td>{$lng.lbl_category}</td>
<td>{$product.category_text}</td>
</tr>
{/if}
{if $usertype eq "A"}
<tr>
<td>{$lng.lbl_vendor}</td>
<td>{$product.provider}</td>
</tr>
{/if}
<tr>
<td>{$lng.lbl_availability}</td>
<td>{if $product.forsale eq "Y"}{$lng.lbl_avail_for_sale}{elseif $product.forsale eq "B"}{$lng.lbl_pconf_avail_for_sale_bundled}{elseif $product.forsale eq "H"}{$lng.lbl_hidden}{else}{$lng.lbl_disabled} {/if}</td>
</tr>
<tr>
<td colspan="2">
<br />
<br />
<span class="Text">{$product.descr}</span>
<br />
<br />
</td>
</tr>
<tr>
<td colspan="2"><b><font class="ProductDetailsTitle">{$lng.lbl_price_info}< /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"> </td>
</tr>
<tr>
<td width="50%">{$lng.lbl_price}</td>
<td nowrap="nowrap"><font class="ProductPriceSmall">{include file="currency.tpl" value=$product.price}</font></td>
</tr>
<tr>
<td width="50%">{$lng.lbl_in_stock}</td>
<td nowrap="nowrap">{$lng.lbl_items_available|substitu te:"items":$product.avail}</td>
</tr>
<tr>
<td width="50%">{$lng.lbl_weight}</td>
<td nowrap="nowrap">{$product.weight} {$config.General.weight_symbol}</td>
</tr>
</table>
<br />

<table cellspacing="0" cellpadding="0">
<tr>
<td>{include file="buttons/modify.tpl" href="product_modify.php?productid=`$product.produ ctid`"}</td>
<td>  </td>
<td>{include file="buttons/clone.tpl" href="process_product.php?mode=clone&productid=`$p roduct.productid`"}</td>
<td>  </td>
<td>{include file="buttons/delete.tpl" href="process_product.php?mode=delete&productid=`$ product.productid`"}</td>
</tr>
</table>

</td>
</tr>
</table>
{/capture}
{if $smarty.get.mode eq "printable"}
{include file="dialog.tpl" title=$product.producttitle content=$smarty.capture.dialog extra="width=440"}
{else}
{include file="dialog.tpl" title=$product.producttitle content=$smarty.capture.dialog extra='width="100%"'}
{/if}

Re: Thickbox 2.0 implementation

Hi,

My install was on a "fresh" 4.1.9 as well.

Follow 7danas install instructions. They work.

Then once that is running you can make the mods I listed

Re: Thickbox 2.0 implementation

dana's instructions specify:

3. The same file(product.tpl), comment this out with a {* *}:

{if $active_modules.Detailed_Product_Images ne "" && ($config.Detailed_Product_Images.det_image_popup ne 'Y' || $js_enabled ne 'Y')}
<p />
{include file="modules/Detailed_Product_Images/product_images.tpl" }
{/if}

but I cant find that code in my product.tpl.

am I looking right at it?

Re: Thickbox 2.0 implementation

Here's my product.tpl
skin1\customer\main is where it lives

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"}&nbsp;

{/if}

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

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

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

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

</form>

{/capture}

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

Re: Thickbox 2.0 implementation

continued - file was tooooo long

Code:

{/if}

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

<p />

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

{/if}

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

<p />

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

{/if}

{* removed for thickbox

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

<p />

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

{/if}

*}

{if $active_modules.Upselling_Products ne ""}

<p />

{include file="modules/Upselling_Products/related_products.tpl" }

{/if}

{if $active_modules.Recommended_Products ne ""}

<p />

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

{/if}

{if $active_modules.Customer_Reviews ne ""}

<p />

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

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

Re: Thickbox 2.0 implementation

when I go to edit my templates ... and I navigate to main/product.tpl ...

sk8conz, my file looks nothing like your product.tpl ... so I'm really confused.

Across the top of yours it says {* $Id: product.tpl,v 1.147.2.16 2007/06/28 05:47:00 max Exp $ *}

Across the top of mine it says {* $Id: product.tpl,v 1.46.2.2 2007/06/04 11:13:13 max Exp $ *}

and mine was just installed about 10 days ago.

Could this be a factor why yours has 3 times as many lines as mine? and why mine doesnt have the code I"m supposed to comment out?

Could someone look at my product.tpl file (posted earlier today) and let me know if I'm missing something

please and thank you

Re: Thickbox 2.0 implementation

Sk8conz .. was your 4.1.9 installed more recently than 10 days ago? because you have a different version number at the top of your product.tpl

I'm not sure how i can modify my product.tpl when it doenst contain the code I'm supposed to append and comment out.

Can anyone help:?

Re: Thickbox 2.0 implementation

The correct file is in :-

skin1\customer\main

NOT

skin1\main

Re: Thickbox 2.0 implementation

That's all the information I needed.

Thank you very much.

Re: Thickbox 2.0 implementation

Has anyone come up with a way to load another image for the thumbnails, to speed up the initial page loading?
https://image-reflections.com/xcart/product.php?productid=54&cat=0&page=1&featured
i have 15 detailed images and this page loads so slow, and is a waste of bandwidth if they don't actual look at them.

Re: Thickbox 2.0 implementation

Excellent mod. It works out fine. Please make sure that you edit product.tpl from skin1/customer/main/

Re: Thickbox 2.0 implementation

Quote:

Originally Posted by sk8conz

Here's my product.tpl
skin1\customer\main is where it lives

Code:

<snip>



tmbn_url=$product.tmbn_url id="product_thumbnail" type="P"}&nbsp;

{/if}

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

{if $active_modules.Magnifier ne "" && $config.Magnifier.magnifier_image_popup eq 'Y' && <snip>

Are you sure about this, it looks like Thickbox is commented out? Anyway, I used the code from post #47 in a fresh install of 4.1.8 and it works very well except for one thing...
If the "customer" scrolls down the page and then clicks on one of the thumbnails the Thickbox opens at the top of the page instead of centered over the "darkend" area. Any ideas on how to fix this? Otherwise it works perfect. BTW, a fresh install of 7Dana's code does the same thing.

Re: Thickbox 2.0 implementation

I've installed Thickbox but everypage that I have alternate images is aligned 'left' in the browser. how do I correct this.....all other pages follow css and work fine.

example page is http://www.atozfabrication.com/store/product.php?productid=16137&cat=0&page=1

Re: Thickbox 2.0 implementation

This is most likely in your skin1/customer/product.tpl. There is a section that deals with only one image, whether it is a full size image or a thumbnail, and another separate section that deals with multiple "detail" images. My guess is the single image section is centered, and the detailed one is not. Realize of course the detailed images are usually called by another template, and the page formatting may actually be done there.

Re: Thickbox 2.0 implementation

I have installed the mod and it looks excellent . However I have couple of annoyances.

1. I have some flash included on my pages in product detailed description. The problem is that flash is showing through my thickbox . Is it any way where I can specify something like bring to front or send to back?
I can't disable the flash because is used to demo sounds . The site sells doorbells
www.mrdoorbell.com and sound is quite important.

2. My product descriptions are quite long even 6-7 words . When using the thickbox the description underneath the detailed images pushes all my long description to the right and it messes the website layout. How can I modify it in such a way that it will say only "Click to enlarge " instead the whole name ?

Thank you .

I have atached two pictures so you can have an idea about the problems.