Welcome to AjaxDaddy.com
A large collection of nifty web 2.0 demos
Home
Demos
Send me a message
Ajax Books
Next
Prev
Greybox
Read more and download "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
Name
Url
Comment
Captcha
1
Sorell
2008-08-24 03:41:20
the back button doesn't work after closing the gallery - moz and opera - any fixes?
2
Kamal Muhuri
2007-11-23 02:56:57
Awesome, nice Demo...
3
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!
4
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.
5
Somadollara
2007-07-21 05:26:27
Thnx for this script it gives my gallery pages fancy look.
6
Rod
2007-07-18 20:40:14
AWESOME!!!! I was looking so badly for this script!!! Thanks
7
Carl
2007-06-21 19:03:14
doesn't like safari 3.0 for pc