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

For clickable thubmnails, here is 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>

{section name=image loop=$images}

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

{if $images[image].tmbn_url} 

<div style="white-space: nowrap;padding-left:10px;"><a href="{$images[image].tmbn_url}" title="{$images[image].alt|escape}" class="thickbox" rel="[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-left:10px;"><a href="{$xcart_web_dir}/product_image.php?imageid={$images[image].imageid}" title="{$images[image].alt|escape}" class="thickbox" rel="[detailed]"><img src="{$images[image].tmbn_url}" width="75" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" /></a></div>

{/if}

{/if}

{/section}

{/if}

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by dfawdon

For clickable thubmnails, here is my thickbox_productpage.tpl

Dfawdon, thank you for your code, however, it does not do what I need for version 4.1 - since it totally blows out variant thumb images (let's say I have a product with 11 colors [i do] - when the customer pulls down the select color menu, the thumb changes! This is a very cool feature and causing me to lose sleep & hair.)

The code I posted before allows each variant to have its own thumb (this is right out of xcart 4.1.3) - I am satisfied with how the images are displayed, and how they appear -- I just need to be able to click on the primary thumb and have it behave as if it were the first thickbox link.

Anyone else?

Thanks!

Jeremy

Re: Lightbox JS v2.0 implementation

What a GREAT mod! ANybody have any idea why it's not working for me though? I did exactly what the instructions said to no and no-go - the loading animation keeps twilrling....

I am using 4.0.18 - any ideas as to what I could be doing wrong?

http://www.homegrownmarket.com/product.php?productid=16143&cat=317&page=1

Thanks in advance!

xo

Re: Lightbox JS v2.0 implementation

Xo, I can't find anything Thickbox related on this page. 8O

Re: Lightbox JS v2.0 implementation

The reason dfawdon's code did not work for me -- the img src tag was not needed...

My next post will be my COMPLETE mod to Thickbox, for 4.1.3, including clickable thumbnail images.

Thanks to all...

Re: Lightbox JS v2.0 implementation

OK... I paid X-Cart to help me figure this out... and I am now presenting my final mod...

This revision to Goran's free contribution is "optimized" for 4.1.3 and allows unique variant thumbnail images (that is, if you have assigned unique thumbs to variants) to be CLICKABLE, and the thumbnail link will call THICKBOX.

This is ONLY for 4.1 and later...

First, install Thickbox as described in Goran's instructions. Then:

1. Enable Detailed Product Images options (4.1 admin settings)

2. Change this code in product.tpl:

FIND:

Code:

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

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

REPLACE WITH:

Code:

{if $active_modules.Detailed_Product_Images ne "" && $config.Detailed_Product_Images.det_image_popup eq 'Y' && $images ne '' && $js_enabled eq 'Y'}

{* comment out the include for the stock popup_image.tpl *}

{* {include file="modules/Detailed_Product_Images/popup_image.tpl"} *}

{* then add the include for thickbox *}

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

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

3. /skin1/thickbox/thickbox_productpage.tpl -- this is the new code. REPLACE what you have with this:

Code:

{section name=image loop=$images}

{if $images[image].avail eq "Y" && $smarty.section.image.index eq 0}

{if $images[image].tmbn_url} 

<div style="white-space: nowrap; padding-left: 10px;">

<a href="{$images[image].tmbn_url}" title="{$images[image].alt|escape}" class="thickbox" rel="[detailed]">

{else}

<a href="{$xcart_web_dir}/image.php?id={$images[image].imageid}&amp;type=D" title="{$images[image].alt|escape}" class="thickbox" rel="[detailed]">

{/if}

{/if}

{/section}

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

{section name=image loop=$images}

{if $images[image].avail eq "Y" && $smarty.section.image.index eq 0}

</a>

</div>

{/if}

{/section}

{if $images ne ""}

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

{section name=image loop=$images}

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

{if $images[image].tmbn_url} 

<div style="white-space: nowrap;padding-left:10px;"><a href="{$images[image].tmbn_url}" title="{$images[image].alt|escape}" class="thickbox" rel="[detailed]"><img src="{$SkinDir}/thickbox/files/zoom.gif" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" />  {$images[image].alt|escape}</a></div>

{else}

<div style="white-space: nowrap;padding-left:10px;"><a href="{$xcart_web_dir}/image.php?id={$images[image].imageid}&amp;type=D" title="{$images[image].alt|escape}" class="thickbox" rel="[detailed]"><img src="{$SkinDir}/thickbox/files/zoom.gif" style="border:0;" alt="{$lng.lbl_click_to_enlarge|escape}" />  {$images[image].alt|escape}</a></div>

{/if}

{/if}

{/section}

{/if}

4. You will probably need to make a minor adjustment to /skin1/thickbox/files/thickbox.css

Comment out lines 4-6 - to look like this:

Code:

/* { padding: 0; margin: 0; }

html, body { min-height: 100%; height: auto !important; height: 100%; } */

/*

5. You could stop here, but then when you call Thickbox, the display will say "image 2 of 2" if you have a single detailed image, or "image 2 of 3" if you have 2 images, etc... so this required one last edit -- in /skin1/thickbox/files/thickbox.js

Line 70 -- FIND:

Code:

TB_imageCount = "Image " + (TB_Counter + 1) +" of "+ (TB_TempArray.length);

REPLACE WITH:

Code:

TB_imageCount = "Image " + (TB_Counter) +" of "+ (TB_TempArray.length - 1);

That's that. Please alert me if you find any issues... This code works perfectly for me in 4.1.3

Goran, feel free to use this or add this to the distribution.

Jeremy

Re: Lightbox JS v2.0 implementation

Has anyone tried to implement this with TelaFirma's image mod?

Re: ThickBox implementation

THANK YOU Zaja!

This mod works great, and it was a real time saver.

Not working on 4.0.18

Hi,

I've just done a fresh install of 4.0.18 and Thickbox does not work.

The loading image just rotates and nothing happens.

Could some have a look here?

http://www.rocasoft.co.uk/product.php?productid=167&cat=111&page=1

cheers

Re: Lightbox JS v2.0 implementation

Did you remove thickbox? All I see on your site is a mega supersized detailed image.