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

If the page doesn't load completely, thickbox will not work.

If there is a net hiccup for any reason and you instantly click on the detailed images, it will take you to the image page, not thickbox.

Unless you are specifically going onto a pgae to test detailed images, NO CUSTOMER will ever do this. Thanks for wasting my bandwidth to test your problem. :-)

The solution (and I've done this) is to optimize your page load speed and make sure your enitre page loads fast. Lose the elements that slow you down.

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by carpeperdiem

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

This worked a treat in 4.1.5.

Thanks Jeremy :-)

Re: Lightbox JS v2.0 implementation

I did find one issue, if you have "Do not redirect customers from HTTPS to HTTP" enabled you receive, "this page has secure as well as unsecured data" warning. I unchecked this option and the error went away.
Any ideas on what is being called in thickbox that would cause this?

Thanks

Re: updated to latest ThickBox 2.1

ThickBox x-cart hack is updated with latest ThickBox 2.1 code. download

ThickBox 2.1 Change Log:
---------------------------
- Updated jQuery code to release 1.0.2
- Fixed scrolling issues with FireFox
- The escape key will now close ThickBox
- Removed the necessity to have an extension to use the iframe content and ajax content (image content still requires an extension)
- When opening iframe content with thickbox the window will only appear after the window has loaded its content (This will not work in Safari)
- Moved the next and previous keyboard functionality for the gallery images to the left < key (previous) and right > key (next). By doing this it fixes a known issue with safari and the arrow keys. This also allows sites design to be scrolled horizontally to use the arrow keys accordingly.
- ThickBox will now work with sites that scroll horizontally. So, a ThickBox, not matter if you scroll a website horizontally or vertically will always show up centered in the window.

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by photo

Stupid IE bug, just tested using Firefox and Opera on https and works perfect...take a look:
http://gemal.dk/blog/2005/01/27/iframe_without_src_attribute_on_https_in_internet_ explorer/

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by Zaja

Stupid IE bug, just tested using Firefox and Opera on https and works perfect...take a look:
http://gemal.dk/blog/2005/01/27/iframe_without_src_attribute_on_https_in_internet_ explorer/

Thanks Zaja,
So the fix would be,

Quote:

The solution you ask? Create a blank.html page and then write:
<iframe id="if" src="blank.html"></iframe>
The blank.html only contains <html></html>

and place it in the root directory?
I have just unchecked "Do not redirect customers from HTTPS to HTTP" for now (will probably leave it that way) and it is working fine.
Also wanted to say thanks for the great mod! :D

Re: Lightbox JS v2.0 implementation

Thanks photo,

I have fixed this https/IE bug(download package is alredy updated), added src='skin1/thickbox/files/blank.html' to iframe code..in thickbox.js and blank.html file in /thickbox/files directory.

Re: Lightbox JS v2.0 implementation

Quote:

Originally Posted by Zaja

Thanks Zaja :D/

Re: Lightbox JS v2.0 implementation

I have installed Thickbox 2.0 & modified it so that I have thumbnail images instead of text links, but they are all vertical down the page under the main product picture. In the demo, they are horizontal. I would prefer horizontal. Can someone give me VERY basic, step-by-step directions on how to do it?

Re: Lightbox JS v2.0 implementation

Amy, open thickbox_productpage.tpl and remove div▓s around thumbnail images.