Lightbox JS v2.0 implementation

TL408 · #**181** 10-26-2007, 12:37 PM

Can you help me double check the codings below? Maybe there is a typo some where. After replacing the codes in my "thickbox_productpage.tpl" with the ones below, it totally remove all other area on my product details page. The one thing left on there was the picture itself.

Thank you again for your help!

http://img80.imageshack.us/x.jpg

Quote:

Originally Posted by Zaja

Don't forget to adjust numbers of "none" values...depending on the maximum number of detailed images:

Code:

 
<div style="display:block;margin:auto 0;padding:10px 2px;">
{section name=image loop=$images}
{if $images[image].avail eq "Y"}
{if $images[image].tmbn_url} 
<div style="white-space: nowrap;padding:0 0 1px 3px;display:{cycle values="block,none,none,none,none,none"};">
<a href="{$images[image].tmbn_url}" title="{$images[image].alt|escape}" class="thickbox" rel="lightbox_detailed"><img src="{$images[image].tmbn_url}" height="50" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> {if $images[image].alt|escape eq ""} {$lng.lbl_image} {math equation="value+1" value=$smarty.section.image.index}{/if}</a></div>
</div>
{else}
<div style="white-space: nowrap;padding:0 0 1px 3px;display:{cycle values="block,none,none,none,none,none"};">
<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>
</div>
{/if}
{/if}
{/section}
</div>
<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}

Zaja · #**182** 10-26-2007, 12:59 PM

Sorry my mistake, use this code:

Code:

<div style="display:block;margin:auto 0;padding:10px 2px;">
{section name=image loop=$images}
{if $images[image].avail eq "Y"}
{if $images[image].tmbn_url} 
<div style="white-space: nowrap;padding:0 0 1px 3px;display:{cycle values="block,none,none,none,none,none"};">
<a href="{$images[image].tmbn_url}" title="{$images[image].alt|escape}" class="thickbox" rel="lightbox_detailed"><img src="{$images[image].tmbn_url}" height="50" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> {if $images[image].alt|escape eq ""} {$lng.lbl_image} {math equation="value+1" value=$smarty.section.image.index}{/if}</a>
</div>
{else}
<div style="white-space: nowrap;padding:0 0 1px 3px;display:{cycle values="block,none,none,none,none,none"};">
<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}
{/section}
</div>
<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}

TL408 · #**183** 10-26-2007, 08:52 PM

Thanks for the quick reply! I copied and pasted this same code into my "thickbox_productpage.tpl" file and still same issue as above

Am I missing something?

Quote:

Originally Posted by Zaja

Sorry my mistake, use this code:

Code:

<div style="display:block;margin:auto 0;padding:10px 2px;">
{section name=image loop=$images}
{if $images[image].avail eq "Y"}
{if $images[image].tmbn_url} 
<div style="white-space: nowrap;padding:0 0 1px 3px;display:{cycle values="block,none,none,none,none,none"};">
<a href="{$images[image].tmbn_url}" title="{$images[image].alt|escape}" class="thickbox" rel="lightbox_detailed"><img src="{$images[image].tmbn_url}" height="50" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /> {if $images[image].alt|escape eq ""} {$lng.lbl_image} {math equation="value+1" value=$smarty.section.image.index}{/if}</a>
</div>
{else}
<div style="white-space: nowrap;padding:0 0 1px 3px;display:{cycle values="block,none,none,none,none,none"};">
<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}
{/section}
</div>
<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}

TL408 · #**184** 10-26-2007, 10:00 PM

Well.....I got it to work by use this code instead. Thank you again for all the help. Have a wonderful weekend!

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="150"><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;display:{cycle values="block,none,none,none,none,none,none,none,none,none,none,none,none,none,none,none,none,none,none,none,none"};">


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

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

TheMommyMarketplace · #**185** 10-27-2007, 02:46 PM

Is anyone successfully using this in 4.1.9? I just upgraded & now thickbox works sometimes & doesn't work sometimes--it's very random. I use thumbnail images displayed horizontally. If anyone has the correct code & can post it I'd appreciate it.

impact-computers · #**186** 10-30-2007, 04:30 AM

Can anyone confirm if this works with version 4.0.xx? and if it does can someone post the code? may be in a new thread

I've tried reading through all 11 pages got can't wprk out if its 4.0.x compatible!

thanks

HWT · #**187** 11-09-2007, 02:25 AM

After implimenting this, the html in my detailed descriptions now seeems to be ignored. I've tried the fixes on page one with no results. Anybody have any ideas how to fix this?

my current /thickbox/files/thickbox.css:

Code:

/*{padding: 0; margin: 0;}*/
#TB_window { font: 12px Arial, Helvetica, sans-serif; color: #333; }
#TB_secondLine { font: 10px Arial, Helvetica, sans-serif; color: #666; }
#TB_window a {color: #666;}
#TB_window a:hover {color: #000;}
#TB_window a:focus {color: #666;}
/* ---------->>> thickbox settings <<<---------------------*/
#TB_overlay { position: fixed; z-index: 100; top: 0; left: 0; background: #000; filter: alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; height: 100%; width: 100%; }
* html #TB_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); }
#TB_window { position: fixed; background: #fff; z-index: 102; color: #000; display: none; border: 4px solid #ccc; text-align: left; top: 50%; left: 50%; }
* html #TB_window { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); }
#TB_window img#TB_Image { display: block; margin: 15px 0 0 15px; border: 1px solid #ccc; }
#TB_caption{ height: 25px; padding: 7px 30px 10px 25px; float: left; }
#TB_closeWindow{ height: 25px; padding: 11px 25px 10px 0; float: right; }
#TB_closeAjaxWindow{ padding: 7px 10px 5px 0; margin-bottom: 1px; text-align: right; float: right; }
#TB_ajaxWindowTitle{ float: left; padding: 7px 0 5px 10px; margin-bottom: 1px; }
#TB_title{ background: #e8e8e8; height: 27px; }
#TB_ajaxContent{ clear: both; padding: 2px 15px 15px 15px; overflow: auto; text-align: left; line-height: 1.4em; }
#TB_ajaxContent.TB_modal{ padding: 15px; }
#TB_ajaxContent p{ padding: 5px 0 5px 0; }
#TB_load{ position: fixed; display: none; height: 13px; width: 208px; z-index: 103; top: 50%; left: 50%; margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 *//* -height/2 0 0 -width/2 */ }
* html #TB_load { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); }
#TB_HideSelect{ z-index: 99; position: fixed; top: 0; left: 0; background: #fff; border: none; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; height: 100%; width: 100%; }
* html #TB_HideSelect { /* ie6 hack */position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}
#TB_iframeContent{ clear: both; border: none; margin-bottom: -1px; margin-top: 1px; _margin-bottom: 1px; }

TA · #**188** 11-09-2007, 05:03 AM

I have the same issue.

Zaja · #**189** 11-09-2007, 08:58 AM

Quote:

Originally Posted by HWT

After implimenting this, the html in my detailed descriptions now seeems to be ignored. I've tried the fixes on page one with no results. Anybody have any ideas how to fix this?

Can you please explain more in details what is ignored, html formating or entire html description? Link, screenshots?

cutterc · #**190** 11-24-2007, 04:06 PM

Is there a way to have all your detailed images show up as individual thumbnail images? I installed that and is works great but it shows only the first detailed image. If you have multiple you don't see those until you open up the first one.

Also the animated .gif image is shown on top of the detailed images instead of behind, is there a fix to this? Fixed...the script tags were not encapsulated with {literal} tags....that fixed the animated .gif showing on top...