Greybox Smart Window v5.53 Implementation

chamberinternet · #1 11-05-2007, 06:01 AM

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.

Code:

var GB_ROOT_DIR = "http://www.yourdomain.com/skin1/greybox/files/";

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

Code:

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

Straight after the above line add the following:

Code:

{include file="greybox/gb_productpage.tpl" }

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

Code:

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

Thats It...

Regards

Shafiq :sK

donavichi · #2 03-05-2008, 04:54 AM

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

Code:


{if $images ne ""}

    {section name=image loop=$images}
        {if $images[image].avail eq "Y"}
            {if $images[image].tmbn_url} 
                <div style="display:{cycle values="block,none,none,none,none,none"};">
                    <a href="{$images[image].tmbn_url}" title=" {$images[image].alt|escape}" rel="gb_imageset[detailed]">enlarge</a>
                </div>
            {else}
                <div style="display:{cycle values="block,none,none,none,none,none"};">
                    <a href="{$xcart_web_dir}/product_image.php?imageid={$images[image].imageid}" title="{$images[image].alt|escape}" rel="gb_imageset[detailed]">enlarge</a>                </div>
            {/if}
        {/if}
    {/section}
    

    <script type="text/javascript">
        var GB_ROOT_DIR = "{$SkinDir}/greybox/files/";
    </script>
    
    <script type="text/javascript" src="{$SkinDir}/greybox/files/AJS.js"></script>
    <script type="text/javascript" src="{$SkinDir}/greybox/files/AJS_fx.js"></script>
    <script type="text/javascript" src="{$SkinDir}/greybox/files/gb_scripts.js"></script>

    <link href="{$SkinDir}/greybox/files/gb_styles.css" rel="stylesheet" type="text/css" />

{/if}

chamberinternet · #3 03-05-2008, 08:14 AM

Cool ... Thanks for sharing this.

Shafiq :sK

Acquamarina · #4 03-18-2008, 05:59 AM

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.

chamberinternet · #5 03-18-2008, 06:04 AM

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

Acquamarina · #6 03-19-2008, 04:38 AM

Thank you, I'll give it a try.

Acquamarina · #7 03-19-2008, 08:44 AM

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.

RahulNeo · #8 07-08-2010, 10:15 AM

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