CB1, INC.

I saw a really neat lightweight lightbox a while ago and decided to make a version for Dojo. I've dubbed this version the LightboxNano because it is under 2K over the wire after a build and being gzip'd.

The LightboxNano is not a dijit._Widget. It is designed to be very lightweight and only requires Dojo core and dojo.fx. The LightboxNano was coded for Dojo 1.2, but should work with past versions with little or no modifications.

Features

For being so small, it packs a handful of features:

• Automatically resizes large images to fit in browser window.
• Preloads the larger image to make loading faster.
• Keyboard accessible.
• Instantly makes your website awesome.

Example

The LightboxNano is really easy to use. Here's an example:

<script src="/path/to/dojo.js" type="text/javascript"></script>
<script type="text/javascript">
    dojo.require("dojo.parser");
    dojo.require("dojox.image.LightboxNano");
</script>

<a dojoType="dojox.image.LightboxNano" href="/path/to/large/image.jpg">
    <img src="/path/to/small/image.jpg">
</a>

To see it in action, click the image below:

Styling

When the LightboxNano is created, it adds two <div> tags inside the anchor tag: one for the enlarge icon and one for the loading icon. For example, you can define styles like this:

a:hover .dojoxEnlarge {
    display: block !important;
}
.dojoxEnlarge {
    background: url(images/enlarge.png) no-repeat 0 0;
    top: -5px;
    left: -5px;
    margin: 0 !important;
    width: 16px;
    height: 16px;
}
.dojoxLoading {
    background: #333 url(images/loading-dark.gif) no-repeat center center;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 2px solid #000;
    height: 24px;
    opacity: 0.8;
    filter: alpha(opacity=80);
    padding: 6px;
    width: 24px;
}

Usage

You can declaratively create the LightboxNano using a dojoType on an <a> or <img> tag. Or you can choose to programatically create the LightboxNano:

<script type="text/javascript">
    dojo.addOnLoad(function(){
        new LightboxNano({
            href: "/path/to/large/image.jpg"
        }, "myLink");
    });
</script>

<a id="myLink" href="/path/to/large/image.jpg">
    <img src="/path/to/small/image.jpg">
</a>

If you want to access it for some reason, you'll need to use its jsId.

Parameters

href - String
URL to the large image to show in the lightbox.

duration - int
The delay in milliseconds of the LighboxNano open and close animation.

preloadDelay - int
The delay in milliseconds after the LightboxNano is created before preloading the larger image.

File Sizes

The LightboxNano is pretty small, but it relies on several other core Dojo components. If you do a custom Dojo build containing the LightboxNano and dojo.parser, the dojo.js is 96KB. If you enable HTTP compression on the web server, you can get that down to a nice 32KB.

Limitations

• The LightboxNano does not reposition itself when the browser window is resize or scrolled.
• In IE6, drop down select lists bleed through the LighboxNano layer. This can be fixed with an iframe shim. This was skipped to keep the size down and because we all want IE6 to just go away.

Future Improvements

There's always things that can be done to improve the LightboxNano. Here's a couple ideas and you're welcome to make suggestions in the comments.

• Add support for displaying a caption.
• Add support for dojox.embed to play Flash or Quicktime movies.

Try it Today!

You can download the LightboxNano files here: LightboxNano.tar.gz [594KB]. Soon, the LightboxNano will be in dojox, so you won't need to install it separately.

You can view the original test page here: http://www.cb1inc.com/dojo-1.2/dojox/image/tests/test_LightboxNano.html.

If you end up using the LightboxNano, feel free to link to your site so everyone can see your new awesome website!

Over 2 months in the making and the CB1, INC. website refresh is finally launched. Whoo! The site has been upgraded to Drupal 6, the interface has been cleaned up a bit and lots old content has been removed. Now that the Dojo Toolkit Module is hosted over at Google Code, I removed the documentation.

I've also set up a dedicated site for my side project, the Kimura Framework, and it is awesome. Kimura is a PHP powered framework with several out of the box features for things such as content management, blogs, forums, and more. It is still heavily under development and I've got a bit of cleanup on the existing code. For more information, visit http://www.kimuraframework.org.

I still have hopes for building a Comet server. I've written some great code for it, but I never got around to dumping into a public repo. That will be my goal for next year. :)

It is possible with Apache to host multiple websites with a single static IP address. However, you can only have one SSL certificate per static IP. This post describes setting up Apache with multiple secure virtual hosts and a single self-signed wildcard certificate. To learn about creating the certificate, check out Creating Self-Signed Certs on Apache 2.2. Here's a table of our example hosts:

Domain	Force SSL?	Trusted?	Valid Domain?
www.site-a.com	No	No	Yes
secure.site-a.com	Yes	No	Yes
test.site-a.com	No	No	Yes
www.site-b.com	No	No	No
secure.site-b.com	Yes	No	No

In order for the certificate to be trusted, you need to obtain the certificate from a trusted certificate authority. Since we are using self-signed certificates, they are not trusted and we will see some warning messages. The data will still be encrypted. For this to work, we are going to use name-based virtual hosts. The name and location of Apache's configuration files vary based on which platform you use. This post assumes Ubuntu in which case the configuration files in the /etc/apache2 directory. For starters, we need to tell Apache which ports to listen on by editing the file /etc/apache2/ports.conf.

Listen 80
<IfModule mod_ssl.c>
    Listen 443
</IfModule>

Next we need to add our virtual hosts. They are kept in the /etc/apache2/sites-available directory. For organization purposes, separate your sites into separate config files, then run a2ensite for each site to generate a symbolic link in the /etc/apache2/sites-enabled directory. Here is the configuration for the sites:

NameVirtualHost 192.168.1.200:80
NameVirtualHost 192.168.1.200:443

# http://site-a.com
# https://site-a.com -- Throws warning because cert is for *.site-a.com... see bottom
# http://www.site-a.com
# https://www.site-a.com
<VirtualHost 192.168.1.200:80 192.168.1.200:443>
  ServerName site-a.com
  ServerAlias www.site-a.com
  DocumentRoot /path/to/www.site-a
  # Note: SSL settings only need to be defined once!
  SSLEngine On
  SSLCertificateFile /path/to/thecert.crt
  SSLCertificateKeyFile /path/to/thecert.key
</VirtualHost>

# Not SSL, redirect to https://secure.site-a.com
<VirtualHost 192.168.1.200:80>
  ServerName secure.site-a.com
  Redirect / https://secure.site-a.com/
</VirtualHost>

# https://secure.site-a.com
<VirtualHost 192.168.1.200:443>
  ServerName secure.site-a.com
  DocumentRoot /path/to/secure.site-a
</VirtualHost>

# http://test.site-a.com
# https://test.site-a.com
<VirtualHost 192.168.1.200:80 192.168.1.200:443>
  ServerName test.site-a.com
  DocumentRoot /path/to/test.site-a
</VirtualHost>

# http://www.site-b.com
# https://www.site-b.com -- Throws warning because cert is for *.site-a.com
<VirtualHost 192.168.1.200:80 192.168.1.200:443>
  ServerName www.site-b.com
  DocumentRoot /path/to/secure.site-b
</VirtualHost>

# Not SSL, redirect to https://secure.site-b.com
<VirtualHost *:80>
  ServerName secure.site-b.com
  Redirect / https://secure.site-b.com/
</VirtualHost>

# https://secure.site-b.com -- Throws warning because cert is for *.site-a.com
<VirtualHost 192.168.1.200:443>
  ServerName secure.site-b.com
  DocumentRoot /path/to/secure.site-b
</VirtualHost>

Despite having a wildcard certificate for *.site-a.com, you will get an invalid domain message when you don't supply the subdomain (i.e. http://site-a.com). The only way I know of to solve this is with 2 static IPs and 2 certs where one cert is for site-a.com and the other is for *.site-a.com. I'm using 192.168.1.200 for the server's IP address behind the firewall. You could try using * instead of 192.168.1.200 in the <VirtualHost> blocks, but I haven't tested this. Leave a comment if you happen to test this. :) Assuming the stars have aligned, you should have several secured virtual hosts!