Next Prev

Greybox

Use GreyBox as it's very easy to setup and you can modify the style as it is controlled through CSS.
The size is only 22KB.

Web 2.0 Box Generator

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<base href="http://www.ajaxdaddy.com/web20/greybox/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
    <title>GreyBox - Examples</title>

    <script type="text/javascript">
        var GB_ROOT_DIR = "./greybox/";
    </script>
    <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />
    <link href="static_files/help.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>

    <script type="text/javascript" src="greybox/AJS.js"></script>
    <script type="text/javascript" src="greybox/AJS_fx.js"></script>
    <script type="text/javascript" src="greybox/gb_scripts.js"></script>
    <script type="text/javascript" src="static_files/help.js"></script>

<h3>One website</h3>
<ul>
    <li>
        <a href="http://google.com/" title="Google" rel="gb_page_center[640, 480]">Launch google.com in a 640x480 window</a>
    </li>
    <li>
        <a href="http://google.com/" title="Google" rel="gb_page_fs[]">Launch google.com in fullscreen window</a>
    </li>
</ul>

<h3>Website gallery</h3>
<ul>
    <li>
        <a href="http://google.com/" title="Google" rel="gb_pageset[search_sites]">Launch Google search</a>
    </li>
    <li>
        <a href="http://search.yahoo.com/" rel="gb_pageset[search_sites]">Launch Yahoo search</a>
    </li>
    <li>
        <a href="http://www.koders.com/" rel="gb_pageset[search_sites]">Launch Koders search</a>
    </li>
</ul>

<h3>Image gallery</h3>
<script type="text/javascript">
var image_set = [{'caption': 'Flower', 'url': 'http://static.flickr.com/119/294309231_a3d2a339b9.jpg'},
                 {'caption': 'Nice waterfall', 'url': 'http://www.widerange.org/images/large/plitvicka.jpg'}];
</script>

<ul>
    <li>
        <a href="#" onclick="return GB_showImageSet(image_set, 1)">Launch gallery</a>
    </li>

    <li>
        <a href="static_files/night_valley.jpg" rel="gb_imageset[nice_pics]" title="Night valley">
            <img src="static_files/night_valley_thumb.jpg" />
        </a>
    </li>

    <li>
        <a href="static_files/salt.jpg" rel="gb_imageset[nice_pics]" title="Salt flats in Chile">
            <img src="static_files/salt_thumb.gif" />
        </a>
    </li>
</ul>

<h3>Without loading</h3>
<script type="text/javascript">
GB_myShow = function(caption, url, /* optional */ height, width, callback_fn) {
    var options = {
        caption: caption,
        height: height || 500,
        width: width || 500,
        fullscreen: false,
        show_loading: false,
        callback_fn: callback_fn
    }
    var win = new GB_Window(options);
    return win.show(url);
}
</script>
<ul>
    <li>
        <a href="http://google.com/" onclick="return GB_myShow('Google', this.href)">Visit Google without loading</a>
    </li>
</ul>

</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Houston Brown

2009-04-30 16:07:15

I must use a onLoad in the body tag and when i do, GeyBox stops working. How can I get around this? I see in the FAQ that there is a work around for preloading images, but I am not preloading images? my onload statement looks like this (onLoad="P7_initPM(1,0,1,-20,10);") Many thanks.

IzrraelSan

2009-03-04 05:07:02

Thats a really good script, but ¿how can i do to change the size of that windows?, to 800 x 600 for example. thanks

MUSTa

2009-03-03 06:57:06

is there a way to trigger the greybox by clicking a submit button but not an href link

Sebastian

2009-02-23 06:25:52

hi, i am interested in the version without loading. it works pretty fine, thanks for the work, but how would i make window size in procentage of the window size, because many users have different screens.

Alex

2009-02-10 12:04:33

I have the exact same problem as cindycin..... help

CindyCin

2008-09-13 13:24:58

I've opened up a page that submits a form. When submitted it takes you to another page that has a back link (via Javascript History code). It doesn't take me back a page, instead it closed the greybox. Is there a workaround to make the Javascript History code simply go back to the previous page that was displayed in the GreyBox?

Sorell

2008-08-24 03:41:20

the back button doesn't work after closing the gallery - moz and opera - any fixes?

Kamal Muhuri

2007-11-23 02:56:57

Awesome, nice Demo...

MissMandy

2007-11-22 20:16:19

Does anyone know what the code would be if I wanted to incorporate an SWF or Flash file? Thank you!

PowerUp

2007-07-23 07:03:04

This script is good, but has cross domain issue. That is, you cannot hotlink the scripts from other domains.

Somadollara

2007-07-21 05:26:27

Thnx for this script it gives my gallery pages fancy look.

Rod

2007-07-18 20:40:14

AWESOME!!!! I was looking so badly for this script!!! Thanks

Carl

2007-06-21 19:03:14

doesn't like safari 3.0 for pc

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Greybox

Use GreyBox as it's very easy to setup and you can modify the style as it is controlled through CSS.
The size is only 22KB.

Comment on this example

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Greybox

Use GreyBox as it's very easy to setup and you can modify the style as it is controlled through CSS. The size is only 22KB.

Comment on this example

Use GreyBox as it's very easy to setup and you can modify the style as it is controlled through CSS.
The size is only 22KB.