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

I just wanted to report back that the very simple greybox solution was FANTASTIC! I wanted to maintain our nutritional tables as tables on an html page instead of an image. That way, (1) they would be readable, and (2) Edits, if required, would be a minor task. A time saver, and so easy to customize by adding styles to the head. In this case I used static pages in the cart (new folder) so I could set the exact dimensions, much like an image.

Thank you so much. My other concern was that with custom page designs I am not using the thumbnails so needed to use a text link instead- it works like a charm.
Cheers
Connie

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by connemara

Great! Glad it worked out so well for you, it is a great little script.

Re: Lightbox JS v2.0 implementation

Anyone using this version in older carts ?
3.4.6

It appeared to work and gave the links for images on the product page but when you click the link there was no image(s) and a GIF text. Pic are in the DB.

Re: Lightbox JS v2.0 implementation

I installed this on 4.1.8 and it works well once the images were moved to the file system.

For clickable thumbnails, I changed the content of thickbox/thickbox_productpage.tpl as outlined earlier in this thread. It works, but I then lose the numbers of the image, close or escape and the <prev next> ability. It also opens to a full screen. Had anybody worked out a better solution for clickable thumbs?

Re: Lightbox JS v2.0 implementation

Any idea how to implement the thickbox mod on the products_t.tpl page? I want to make the thumbnail on that page be able to enlarge and then have a "more details" link below it.

Re: Lightbox JS v2.0 implementation

Would you be so kind and tell me where exactly this line of code should go, inside the thickbox_productpage.tpl file?

display:{cycle values="block,none,none,none,none,none"};

Below is the content of my "thickbox_productpage.tpl" file. Sorry, I am not clear which DIV part you're referring to. Thanks so much for your help!

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

Quote:

Originally Posted by Zaja

Open thickbox_productpage.tpl and add this code to DIV style properties(to image DIV, not wrapper DIV). Also, you can adjust numbers of "none" values...depending on the maximum number of detailed images:

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by TL408

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

Quote:

Originally Posted by Lingerieblowout

..... Pic are in the DB.

This is going to be a problem no matter what solution that you use for images on your site. When images are in the DB, you do not have any URL to feed into any script. Images are displayed by doing an SQL query and spewing out the binary code.

You really need to move your images to the file system whether you use some JavaScript posted here on the forum or whether you use some 3rd party image modification.