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.

Visit PhpDaddy.com

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

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.