X-Cart forums - Lightbox JS v2.0 implementation

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

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Lightbox JS v2.0 implementation (https://forum.x-cart.com/showthread.php?t=23858)

Re: Lightbox JS v2.0 implementation

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}

Re: Lightbox JS v2.0 implementation

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}

Re: Lightbox JS v2.0 implementation

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}

Re: Lightbox JS v2.0 implementation

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}

Re: Lightbox JS v2.0 implementation

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.

Re: Lightbox JS v2.0 implementation

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

Re: Lightbox JS v2.0 implementation

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

Re: Lightbox JS v2.0 implementation

I have the same issue.

Re: Lightbox JS v2.0 implementation

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?

Re: Lightbox JS v2.0 implementation

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