Some changes from version 1.0 include (but are not limited to) the following:

• More stable communication between adapters for all frameworks
• Smoother and more consistent animation
• Improved support for Internet Explorer 7
• More modular code design and custom build form
• Improved i18n support
• Much improved skinning API

Really, the list could get quite long here. The truth is that it’s late, I’m tired, and unfortunately, I don’t really keep a nice, neat change log of every change that I make to the code. So I apologize to those of you who find them useful. Perhaps I’ll take that up in the future. In reality, I made hundreds of little tweaks and performance enhancements, so the list would be very long a boring anyways. Just trust me when I say that version 2 is much better than 1 ever was.

Many thanks to Wizzud (in the forums) whose help has been invaluable in squashing numerous bugs and who has generously donated hours of time to help stem the onslaught of support requests.

As always, please post any questions you may have in the forum instead of here on my blog. Enjoy!

• Graduated college
• Took a week-long vacation to Hawai’i
• Ate way too many Mauna Loa’s
• Moved
• Started a new job

I’m pretty sure that at least 3 of the above qualify as major life-altering events, so please excuse me for not having released a major update to Shadowbox in the past few months. ;) I’m back now.

I’ve also been prowling the web to find out how people are using Shadowbox and where it comes short. The biggest problems that I’ve been hearing (and that I’ve tried to address with this release) are the following:

• Support for i18n
• More consistent animation support across libraries (particularly MooTools)
• Better theme/skin support
• Better documentation
• Support for slideshows (on an automatic timer)
• Standalone version without need for an external JavaScript library
• More modular code (file size)

I’m proud to announce that I believe I’ve solved every one of the above issues with this release, as well as squashed a number of minor bugs.

This is just a release candidate, in case I’ve missed something obvious. Please check it out and let me know what you think.

Shadowbox project page

Due to popular demand, the next version of Shadowbox will have much improved i18n support (among other improvements). However, unfortunately I’m only fluent in 1.5 languages (English and some Italian), so I need your help. If you would like Shadowbox translated into your native tongue, please translate the following object and post it here or send it to me.

I’ll be keeping a list of already supported languages on this page. Thanks!

Shadowbox.LANG = {

    code:       'en',

    of:         'of',

    loading:    'loading',

    cancel:     'Cancel',

    next:       'Next',

    previous:   'Previous',

    play:       'Play',

    pause:      'Pause',

    close:      'Close',

    errors:     {
        single: 'You must install the <a href="{0}">{1}</a> browser plugin to view this content.',
        shared: 'You must install both the <a href="{0}">{1}</a> and <a href="{2}">{3}</a> browser plugins to view this content.',
        either: 'You must install either the <a href="{0}">{1}</a> or the <a href="{2}">{3}</a> browser plugin to view this content.'
    }

};

Already supported languages:

• Deutsch
• English
• Español
• Français
• Galego
• Italiano
• 한국말
• Burmese
• Nederlands
• Polski
• Português (Brasil)
• Português (Portugal)
• русский язык
• Slovenčina
• Svenska
• 中文 (Simplified)
• 中文 (Traditional)

Please include the native name of the language with your entry! For example, for French I would write “Français”.

For language codes, see this page.

One major change that I made with the site is in the commenting. Instead of using straight HTML, I switched to using John Gruber’s Markdown format. In fact, pretty much the whole site is based on Markdown now. The posts, comments, and even the comment preview function. By the way, I plan on making the comment preview plugin available on WordPress as soon as I get some time.

If you’re afraid of Markdown, don’t be. It is the most easy-to-use writing tool that I can think of. In fact, I bet you already know most of the rules.

I have a lot of good stuff in the works that I’ll be making publicly available very soon. In the meantime, feel free to let me know what you think of the redesign!

• Extensive and fully documented JavaScript API
• Compatibility with the original Lightbox HTML markup
• Support for image maps
• Numerous other options and bug fixes

If you have any questions about how to use Shadowbox for your project, please ask them in the support forum.

More information here.

You can find it here.

Little did I know.

With a big push from the ubiquitous Rey Bango, here’s what it has done so far:

• 8 beta releases
• 10,734 downloads from Google Code
• Over 1,500 bookmarks on Del.icio.us
• Adapters for 6 major JavaScript frameworks
• And a lot of traffic here on my site

Needless to say, I am very pleased that it has been received so well by the JavaScript community and that so many are getting use out of it. I have received quite a few emails with questions as well as comments on the original post, and I’ve responded to as many as I have time for. Please forgive me if I haven’t gotten around to answering your particular question…I’ve been swamped!

One thing that I have noticed is that quite a few people seem to be using it for purposes other than displaying static pictures and movies. I’ve e-talked with many individuals who are using Shadowbox for inline HTML content, image maps, and Ajax-powered galleries among other things, and I’d like to provide an API in 1.0 that will nicely accommodate several different methods of use.

So I guess my question is, what are YOU using Shadowbox for?

Please feel free to post links to anything you may have done with it. I’d like to see what you’ve come up with!

/**
 * Converts an RGB color value to HSL. Conversion formula adapted from
 * http://en.wikipedia.org/wiki/HSL_color_space. Assumes r, g, and b are
 * contained in the set [0, 255] and returns h, s, and l in the set [0, 1].
 *
 * @param   {Number}    r       The red color value
 * @param   {Number}    g       The green color value
 * @param   {Number}    b       The blue color value
 * @return  {Array}             The HSL representation
 */
var rgbToHsl = function(r, g, b){
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }

    return [h, s, l];
};

/**
 * Converts an HSL color value to RGB. Conversion formula adapted from
 * http://en.wikipedia.org/wiki/HSL_color_space. Assumes h, s, and l are
 * contained in the set [0, 1] and returns r, g, and b in the set [0, 255].
 *
 * @param   {Number}    h       The hue
 * @param   {Number}    s       The saturation
 * @param   {Number}    l       The lightness
 * @return  {Array}             The RGB representation
 */
var hslToRgb = function(h, s, l){
    var r, g, b;

    if(s == 0){
        r = g = b = l; // achromatic
    }else{
        function hue2rgb(p, q, t){
            if(t < 0) t += 1;
            if(t > 1) t -= 1;
            if(t < 1/6) return p + (q - p) * 6 * t;
            if(t < 1/2) return q;
            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        };

        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }

    return [r * 255, g * 255, b * 255];
};

/**
 * Converts an RGB color value to HSV. Conversion formula adapted from
 * http://en.wikipedia.org/wiki/HSV_color_space. Assumes r, g, and b are
 * contained in the set [0, 255] and returns h, s, and v in the set [0, 1].
 *
 * @param   {Number}    r       The red color value
 * @param   {Number}    g       The green color value
 * @param   {Number}    b       The blue color value
 * @return  {Array}             The HSV representation
 */
var rgbToHsv = function(r, g, b){
    r = r/255, g = g/255, b = b/255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, v = max;

    var d = max - min;
    s = max == 0 ? 0 : d / max;

    if(max == min){
        h = 0; // achromatic
    }else{
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }

    return [h, s, v];
};

/**
 * Converts an HSV color value to RGB. Conversion formula adapted from
 * http://en.wikipedia.org/wiki/HSV_color_space. Assumes h, s, and v are
 * contained in the set [0, 1] and returns r, g, and b in the set [0, 255].
 *
 * @param   {Number}    h       The hue
 * @param   {Number}    s       The saturation
 * @param   {Number}    v       The value
 * @return  {Array}             The RGB representation
 */
var hsvToRgb = function(h, s, v){
    var r, g, b;

    var i = Math.floor(h * 6);
    var f = h * 6 - i;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);

    switch(i){
        case 0: r = v, g = t, b = p; break;
        case 1: r = q, g = v, b = p; break;
        case 2: r = p, g = v, b = t; break;
        case 3: r = p, g = q, b = v; break;
        case 4: r = t, g = p, b = v; break;
        case 5: r = v, g = p, b = q; break;
    }

    return [r * 255, g * 255, b * 255];
};

Special thanks goes to MacPorts’ Ryan Schmidt who helped me out on this thread.

Step One: Install MacPorts

If you’re not familiar with MacPorts, it’s a package management system for Mac OS X. MacPorts makes it easy to install, upgrade, and remove open-source software packages on your Mac. In this tutorial, it’s what I’ll be using to install all of the new software. If you haven’t yet installed MacPorts, the project has a nice installation guide that will guide you through the entire process. But don’t worry, you probably won’t need it. The installer is very straightforward.

Once you get MacPorts installed, update your port trees with the following command:

$ sudo port -d selfupdate

Step Two: Install LightTPD

LightTPD is a great webserver that is very fast and very flexible. In this tutorial, we’ll be taking advantage of some of that flexibility to install two versions of PHP and run them on the same webserver using FastCGI. If you’d like to know more, check out this post by Garrett Albright. He also does a good job explaining why we’ll be using LightTPD instead of Apache. Also, the basic MacPorts installation of PHP and LightTPD in this tutorial will closely follow the instructions given in that post, but with a few slight modifications.

Installing LightTPD using MacPorts is simple:

$ sudo port install lighttpd

If you’ve ever compiled software from source, you’ll recognize the significance of that one line! It does a LOT of stuff for you in the background.

Step Three: Install PHP 5.2

Being the current stable release at the time of this writing, PHP 5.2 should automatically install when you run port install php5. However, because we’ll be running on LightTPD using mod_fastcgi, we’ll need to include the fastcgi variant. Note: You may also want to use other variants such as mysql5 or postgresql to include database libraries, but those are outside the scope of this tutorial. If you do decide to include support for MySQL, I’ll show you how to hook it up to 5.3 later on.

$ sudo port install php5 +fastcgi

This command will install PHP 5 with all of its dependencies, and will also compile a FastCGI module that we can use with our LightTPD installation. This could take a while, so make sure you have something to do while everything compiles.

Step Four: Install PHP 5.3

If you don’t need PHP 5.3 right now, you can skip this part. Otherwise, download the latest PHP 5.3 snapshot from here and uncompress it on your machine. Because I’m a big fan of using /usr/local, I uncompressed mine to /usr/local/src, but you can decompress yours anywhere you like. Now we’re going to do something special. Remember all those packages that MacPorts installed automatically for us when we installed PHP 5.2? We can use those same packages to compile 5.3.

$ cd /usr/local/src/php5.3-*
$ ./configure --prefix=/usr/local --mandir=/usr/local/share/man --infodir=/usr/local/share/info --with-config-file-path=/usr/local/etc --enable-calendar --with-iconv=/opt/local --enable-exif --enable-ftp --enable-wddx --with-zlib=/opt/local --with-bz2=/opt/local --with-libxml-dir=/opt/local --with-gettext=/opt/local --with-xmlrpc --enable-soap --enable-bcmath --enable-mbstring --enable-dba --with-openssl=/opt/local --with-mhash=/opt/local --with-mcrypt=/opt/local --with-xsl=/opt/local --with-curl=/opt/local --with-pcre-regex=/opt/local --with-gd --with-jpeg-dir=/opt/local --with-png-dir=/opt/local --enable-gd-native-ttf --without-pear --with-freetype-dir=/opt/local --with-ldap=/usr --with-kerberos=/usr --with-iodbc=/usr --with-sqlite --with-pdo-sqlite=/opt/local --enable-sqlite-utf8

If you’re using MySQL 5…

If you don’t have a MacPorts install of MySQL 5 already, you can find directions on how to do that here. From this point, I assume you’ve already got it installed and working.

If you’d like to compile support for MySQL 5 into your PHP 5.3 build, you’ll need a few additional steps. By way of explanation, the PHP installer expects a certain directory structure in the MySQL directory. However, the MacPorts install of MySQL 5 moves things around a bit. No problem, we’ll just set up a temporary directory with some symlinks to help the PHP build find everything.

$ cd /usr/local/tmp
$ mkdir mysql5
$ ln -s /opt/local/lib/mysql5 mysql5/lib
$ ln -s /opt/local/include/mysql5 mysql5/include

These commands will create a temporary directory at /usr/local/tmp/mysql5 that contains two symlinks to the actual locations of the MacPorts MySQL 5 installation. Next, we need to make sure to tell the PHP configure script about these. Add the following flags to the configure command we made above.

--with-mysql=/usr/local/tmp/mysql5 --with-pdo-mysql=/opt/local/bin/mysql_config5 --with-mysql-sock=/opt/local/var/run/mysql5/mysqld.sock --with-mysqli=/opt/local/bin/mysql_config5

After you run the configure, you can delete the /usr/local/tmp/mysql5 directory.

Step Five: Configure PHP and LightTPD

When the PHP installation(s) is finished, we need to create and modify our php.ini file.

$ cd /opt/local/etc/
$ cp php.ini-recommended php.ini

The above commands copy the recommended initialization file (php.ini-recommended) that ships with the default distribution to a new file (php.ini) that will be used when PHP gets fired up. Open the file (/opt/local/etc/php.ini) in your text editor, and find the following line (in my php.ini, it was on line 565):

; cgi.fix_pathinfo=1

and uncomment it (i.e. change it to)

cgi.fix_pathinfo=1

That’s all for now so save and close the file. If you’ve installed 5.3 as well, you can find that configuration file at /usr/local/etc/php.ini (assuming you installed everything where I did). Be sure to make the same change in that file as well.

Now it’s time to modify your LightTPD configuration file. Like PHP, LightTPD ships with a default configuration file that you should copy at first to get you started.

$ cd /opt/local/etc/lighttpd/
$ cp lighttpd.conf.default lighttpd.conf

Open your newly created LightTPD configuration file (/opt/local/etc/lighttpd/lighttpd.conf) in a text editor, find the line (line 24 in my file) that says

#                               "mod_fastcgi",

and uncomment it (i.e. remove the hash at the beginning of the line). This line tells LightTPD to enable the mod_fastcgi module.

Immediately following this section of the configuration file is a section that tells the webserver where you want to serve files from and where you keep your error logs. I use /usr/local/www as my webserver root, so I have mine configured like this:

## a static document-root, for virtual-hosting take look at the
## server.virtual-* options
server.document-root        = "/usr/local/www/public-html/"

## where to send error-messages to
server.errorlog             = "/usr/local/www/logs/lighttpd/error.log"

My document root is /usr/local/www/public-html. This is the directory that you’ll place all of your publicly visible HTML and/or PHP files in. A few lines down, you’ll notice the following:

#server.event-handler = "freebsd-kqueue" # needed on OS X

Since we’re on OS X, uncomment this line. Okay, take a breather. We’re almost done.

Step Six: Configure FastCGI

All that’s left is to tell LightTPD how to handle requests for PHP files. Recall that we’re going to be running PHP with FastCGI, so we’ll need to configure the fastcgi module. Look for the line in your LightTPD configuration file that says

#### fastcgi module

Just below this line is where you’ll put the following configuration data for a normal PHP 5.2 install.

fastcgi.server = ( ".php" =>
    ( "localhost" =>
        (
            "socket" => "/tmp/php5-fastcgi.socket",
            "bin-path" => "/opt/local/bin/php-cgi",
            "broken-scriptfilename" => "enable",
            "allow-x-send-file" => "enable",
            "min-procs" => 2,
            "max-procs" => 2,
            "bin-environment" => (
                "PHP_FCGI_CHILDREN" => "4",
                "PHP_FCGI_MAX_REQUESTS" => "500"
            )
        )
    )
)

If you’d like to know what’s going on here, you can find a lot of information in the fastcgi.txt file. Basically, we’re telling LightTPD to treat any request for a file that ends in “.php” as PHP.

If you don’t want to install PHP 5.3, you’re done! However, it’s easy to add a 5.3 configuration directive as well. You need to do three things:

1. Figure out what criterion the server can use to determine that the file should be treated as PHP 5.3 instead of 5.2. In my case, I put all of my experimental 5.3 stuff in a special directory at my webserver root, /php53/.
2. Change the temporary socket location
3. Change the binary executable location

My PHP 5.3 configuration section follows. Yours may be different depending on personal preference.

$HTTP["url"] =~ "/php53/" {
    fastcgi.server = ( ".php" =>
        ( "localhost" =>
            (
                "socket" => "/tmp/php53-fastcgi.socket",
                "bin-path" => "/usr/local/bin/php-cgi",
                "broken-scriptfilename" => "enable",
                "allow-x-send-file" => "enable",
                "min-procs" => 2,
                "max-procs" => 2,
                "bin-environment" => (
                    "PHP_FCGI_CHILDREN" => "4",
                    "PHP_FCGI_MAX_REQUESTS" => "500"
                )
            )
        )
    )
}

Here we use a special hash variable $HTTP to parse the URL request and look for our special directory. This feature of the LightTPD webserver offers some incredible flexibility. We can actually use any regular expression we want in place of the /php53/ above.

Then, if the URL matches our regular expression, we tell the server to use the executable in /usr/local/bin/php-cgi (the 5.3 executable) to create the temporary socket at /tmp/php53-fastcgi.socket. Comparison with the first directive should make the differences obvious.

Make sure it all worked!

Time to test it out. First we need to fire up the webserver. Before starting LightTPD, we can use the following command to make sure it likes our config file.

$ lighttpd -t -f /opt/local/etc/lighttpd/lighttpd.conf

If everything is okay, you should see a Syntax OK message. If something’s not right, go back and check your work. This next command will actually start the webserver.

$ lighttpd -D -f /opt/local/etc/lighttpd/lighttpd.conf

Now, go to your webserver root (specified in Step 5 above), and create a file called info.php. Put the following code inside.

<?php

phpinfo();

?>

Now open up your browser and navigate to http://localhost/info.php. You should see a page with all of your PHP 5.2 configuration information.

To test the PHP 5.3 install, make a special php53 directory (assuming you followed the above configuration) in your webserver root and place a copy of the above info.php file in it. Now point your browser to http://localhost/php53/info.php and you should see the configuration information for 5.3!

Enjoy.

Update: Version 1.0 is now available.

A few weeks ago, I was looking for a Lightbox-like script that would allow me to display more than just pictures. In addition to static images, my client required the ability to display various types of movies including QuickTime and SWF. The only script that fit the bill was Lightwindow—a nice piece of work to be sure—but it required the Prototype + Scriptaculous combo and I was already using YUI.

Besides, I thought, it would be really great to have a full-featured media viewing application that was library agnostic. Then, if I need to use a different framework for some particular reason, I can easily switch.

Thus was born Shadowbox—a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application built entirely in JavaScript. It’s currently in beta testing phase, so please let me know on this post if you find any bugs.

More info here.