Greybox Smart Window v5.53 Implementation
 

Hello ...

This mod was inspired from Zaja (7Dana) who released the Lightbox JS v2.0 implementation.
Bascially it's a replacement of the detailed images popup to be displayed using Greybox rather than Thickbox.

More Info on Greybox: http://orangoo.com/labs/GreyBox/

Example of Implementation: http://www.onlinebearings.co.uk/205-litre-side-lever-barrel-pump-pr-16351.html

This mod has only been tested on v4.1.8 & v4.1.9

Install Instructions:

1)
Unzip the file and copy the greybox folder into the /skin1 directory.

2)
Open /skin1/greybox/gb_productpage.tpl and ensure the "GB_ROOT_DIR" variable is set to the the URL where the Greybox source files are located.
e.g.

3)
Open the /skin1/customer/main/product.tpl and find the following line:

Straight after the above line add the following:

4)
Within the same file (product.tpl), comment {* *} the following code (Located near the bottom):

Thats It...

Regards

Shafiq :sK

Re: Greybox Smart Window v5.53 Implementation
 

Awesome implementation. Thanks for doing that.

I needed this to work with 4.0 on one site so here's the only modifications I had to do to make to gb_productpage.tpl work with 4.0 branches:

replaced {lng.lbl_click_to_enlarge} with 'enlarge' - you could also add the lang variable if you wish.
replaced the second image href from 4.1 version to 4.0 version.
changed 'http://xcart/skin1/greybox/files/' to '{$SkinDir}/greybox/files/ - stops the 'unsecure page elements' warning in IE if your site uses http & https.

Here's the adapted gb_productpage.tpl - replace the one supplied in the 4.1 zip above to this and your 4.0 site will have a working greybox mod...

Re: Greybox Smart Window v5.53 Implementation
 

Cool ... Thanks for sharing this.

Shafiq :sK

Re: Greybox Smart Window v5.53 Implementation
 

Hi,
Does it work with the CSS for the site? I would rather have a lighter color background like the examples on the Greybox site.
Thanks for sharing that - it is a great improvement from the 4.1.9 default which is "jittery" and not smooth at all.

Re: Greybox Smart Window v5.53 Implementation
 

Haven't messed with with the css file supplied (gb_styles.css) but pretty sure you can change the colour of the background.

Regards

Shafiq :sK

Re: Greybox Smart Window v5.53 Implementation
 

Thank you, I'll give it a try.

Re: Greybox Smart Window v5.53 Implementation
 

Followed the directions to a T and it looks great (when it works) but I now have both features and the GreyBox works on and off. The default x-cart and the GreyBox links appear one above the other.

Sometimes the "Enlarge for detail" link on GreyBox just takes you to the image itself, one has to hit the back button on the browser to go back to the product page.

It looks great in FireFox, but it is so wide in IE 7.0 that the close button is hidden and one has to scroll to the right to see it. It's frustrating for a visitor as the site is fluid and fits fine on my high resolution screen (1280x1024). Is there anyway to reduce the size of the navigation bar?


This is what the code in the product.tpl looks like after commenting out, please see if you see a mistake there:

{*{if $active_modules.Detailed_Product_Images ne "" && ($config.Detailed_Product_Images.det_image_popup ne 'Y' || $js_enabled ne 'Y')}
<br />
{include file="modules/Detailed_Product_Images/product_images.tpl" }
{/if}*}


I found this line further up:

{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"}
{include file="greybox/gb_productpage.tpl" }

Then commented out the first portion and got this error:

Error: Smarty error: [in customer/main/product.tpl line 19]: syntax error: unexpected {elseif} (Smarty_Compiler.class.php, line 476) in /home/...../Smarty-2.6.12/Smarty.class.php on line 1095

Parse error: syntax error, unexpected T_ELSEIF in /home/......./var/templates_c/%%70^70F^70F20BF0%%product.tpl.php on line 40



Any suggestions?

Thanks so much - it looks fantastic! It will be even better when I get rid of the quirks.

Re: Greybox Smart Window v5.53 Implementation
 

How to add this effect in buy now button in 4.1.9?Actually I want to open a new greybox which will say that item is added to cart.How to achieve this in buy now??