I spent the last hour or so searching for the correct .htaccess file for installing Drupal Clean URLs (Drupal 6.xx) on MediaTemple’s server without any luck. Finally, I was able to piece something together that worked and I thought it would be worth sharing:

< IfModule mod_php5.c>
  php_value magic_quotes_gpc 0
  php_value register_globals 0
  php_value session.auto_start 0
  php_value mbstring.http_input pass
  php_value mbstring.http_output pass
  php_value mbstring.encoding_translation 0
< /IfModule>
< IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteBase /YOUR-SUBDIRECTORY-NAME-HERE
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]
< /IfModule>

I hope that this helps someone in the future.

It has been a crazy summer so far and i’ve been busy working on several big projects which are now in the final stages.

I have a few topics for the blog planned in the next couple of weeks to acompany the portfolio updates.

For now, check out the newest portfolio entry, The Causeway Motel

JavaScript Frameworks have gained wide acceptance among developers since the "Web 2.0" movement and have, in many ways, changed how we use the web. One of the greatest outcomes of this has been the reduction in external popup windows in favor of unobtrusive, JavaScript-based "Modal Window" and "Lightbox" solutions. At work, clients frequently ask us to incorporate content and image overlay solutions into their projects and after experimenting with, and customizing a wide variety of different scripts, I decided to write a comparison of several of the most popular Light Box solutions.

For this comparison, I have evaluated the Light Boxes based on coding techniques, ease of use / customization, community support and frequency of updates. Additionally, I have listed specifications for file size and framework dependency / version for each along with my rating on a 1-10 scale.

The Scripts chosen for this comparison are as follows:

• Lightbox 2   
• Lightview  
• Litebox  
• Thickbox  
• Modalbox  
• Slimbox  
• Multibox  
• jQuery Lightbox Plugin (balupton edition)  

Lightbox 2

The original Lightbox is considered by many to be the first modal window widely available to developers. The latest release, version 2 , like its predecessors, is based on the Prototype framework and uses Scriptaculous effects. This script is very stable, has seen frequent bug fixes and off-shoots throughout its existence and has a very active user-driven support forum. The JavaScript file itself is very nicely documented and offers many configurable options.

Although Lightbox 2 offers the advantage of a large following and easy to configure (and understand) code it does have limitations. The script is called by using the rel attribute which limits its functionality for non-basic methods such as Flash and image maps. Additionally, this script, unlike most others in this comparison, is only capable of displaying images. Update: after some poking around, I found a lightbox clone which appears to be nearily identical to Lightbox 2, but with the ability to display Flash movies natively. For more information, visit this link.

Lightview

Lightview is a somewhat unique take on the standard Lightbox. Smartly written, with an image-free, fully adjustable, rounded corner solution (which works on browsers across the board), Lightbox is a very aesthetically pleasing and also very powerful solution. Unlike the standard Lightbox, and many of it’s clones, Lightview’s content box scrolls with the page so that you are never left wondering where the content is. In addition to images, Lightview also offers the ability to display Flash, Quicktime, AJAX calls, inline content and even full web sites in an i-frame. Lightview features a very neat image gallery option which can be used as a timed (configurable) slide show, which resizes the content box to the dimensions of each image. Another great thing, which I consider a big advantage over most of the competition, is that the Lightview window is called through the class attribute.

One major issue that I have found with Lightview is that, beyond the configuration settings, the script comes pre-compressed with no original source code attached. This causes major headaches when trying to change anything not in the settings or CSS. I encountered this limitation when developing the new version of my site in the portfolio section when I wanted to add two simple hyperlinks to the Lightview window. Although I was able to add the links, I had to place the links in the title attribute, which does not validate as XHTML.

Litebox

Litebox is basically a compact version of Lightbox. Although listed below as ~23k, which is a mere 3k less than the original Lightbox, the true saving is with the compact, 4k Prototype.lite and moo fx libraries used instead of the conventional 120k+ standard Prototype library and somewhat bulky Scriptaculous files. Litebox is a great, lightweight solution but unlike its older, and slightly pudgy sibling, Lightbox 2, this script does not seem to be frequently updated. The last updated date from the Litebox JS file is July, 2006 compared to March 2008 (at the time of this comparison) with Lightbox 2.

Thickbox

Thickbox was written in the lightweight jQuery framework and weighs in at an amazing 10k compressed and only 15k uncompressed. Additionally, the developer wrote the script to run with the compressed version of jQuery which only adds 20k instead of the 120k+ with Prototype. The script does not have the community-driven support forums that the previous three scripts have but the author states that you may email him with detailed questions or bugs. Thickbox does not offer a lot of the customization options seen in Lightbox, Lightview etc… But does provide both an uncompressed and compressed version for developers to extend at will. The "out of the box" appearance for Thickbox is not as aesthetically pleasing as some of it’s alternatives but keeping with its easily extendable theme, images and CSS can be added as desired to alter the look. One annoyance that I found was, when activated, the mouse scroll wheel becomes inoperative which requires you to use the browser’s side scroll bar.

Thickbox offers quite a few features for such a small package including inline content, i-frame as well as both single and multiple image support. The author claims that both Flash and PDF files can work with this script but notes that these media types are untested.

Modalbox

Modalbox is a very powerful tool which allows the developer to not only show single page content or images like many other modal windows but perform complex tasks with AJAX call backs which allows the end user to perform multiple tasks with few clicks and no browser refreshes. Unlike similar scripts, Modalbox uses AJAX instead of deprecated i-frames and even supports scrolling. The project is supported in Google Code and has a Wiki as well as detailed information about uses, bugs, etc…

I have used this for multiple client projects and have have received positive feedback with not hitches during the development process. One potential issue with Modbalbox is that it relies on Prototype and Scriptaculous which can be a little heavy for large scale projects but for those cases, there is a mootools clone called MOOdalBox which has the same Google Code backing and support.

Slimbox

Slimbox is a mootools clone of Lightbox 2. The entire script plus images and CSS is amazingly only 13k uncompressed. This project has support forums and the homepage for the project allows visitors to post comments in which the author often responds to questions. After playing around with this script, I was impressed with the small file size but found the overall package to be somewhat buggy, particularly with the dark page cover when scrolling.

Multibox

Multibox is a versatile Lightbox that is able to display a large variety of different media types including images, audio (Real Player, MP3), video (Windows Media Player and QuickTime, FLV), as well as the standard image and content (AJAX and inline). The default design is pleasant enough that most developers won’t need to do aesthetic modifications but doing so would be fairly easy due to the way the script was written.

The code is fairly straightforward but is not as well structured as some of the other options; one thing that caught my eye was the use of JavaScript to print the actual HTML code for the box. In other scripts, this is done dynamically at the savings of dozens of lines of code. It also appears that there is no form of support (or update log) for this script so it looks like bug fixes could be an issue.

jQuery Lightbox Plugin (balupton edition) 1.0

This jQuery plugin, based on Lightbox2 delivers unusually smooth scrolling (far better than Lightbox2) as well as many efficiency benefits and a small file size. Unlike many of the other scripts in this comparison, this plugin requires no configuration and a smart automatic URL detection which means that only one file has to be included in the display file. The jQuery Lightbox Plugin can be used manually or automatically to generate Lightboxes which means that it can be set, like many others with the rel attribute or with on event such as onclick. This is a huge advantage and makes The jQuery Lightbox Plugin potentially the most versatile in this comparison. Additionally, most media types can be used without modification including Qucktime, Flash and other embedded content types.

The only real downside that I found with this script was the lack of clear documentation. Although the instructions are fairly clear, it takes some digging around to find the information you are looking for. Luckily, this script is listed on the jQuery plugin site which includes support request and bug report sections as well as a log of changes.

Other considerations and Conclusions

One additional script that was too task specific to include in this comparison but I wanted to include a link. GMapsOverlay is a moo-tools based Lightbox that is used specificially to display configurable Google Maps.

Although I have listed the file sizes for the scripts evaluated in this comparison, some of which are more attractive than others, further compression can be applied to most of these scripts using applications such as: DoJo Toolkit’s ShrinkSafe or Packer.

So, after reading all of this, which one of these Lightboxes is right for you? That depends—I typically use Prototype because I have worked with it in the past quite often—but, there are many alternatives and clones using other JavaScript Frameworks or none at all so it depends on your specific need. Keeping that in mind, it is possible to use multiple frameworks together.

My non-technical friends frequently ask about the process behind web development; they are baffled when they see a robust website and learn that it began life as a big, blank box Photoshop. When I started development for the new version of my site, I decided to chronicle the process from beginning to end to shed light on the design process that I use.

Below you will find a chronological time line of the design process.

My original idea was to include vector art as a main part in the design. Not having a lot of experience doing abstract vector art, I played around in Illustrator for a few hours and came up with the piece above.In my previous 8 versions of Dark Crimson, I relied on the namesake color but decided that I wanted something different for this version. After a few days of testing various color pallets, I decided on a blue-green color base.

Since my site has always been somewhat “experimental”, I typically embrace the idea of making the plan up as I go along rather than meticulously planning everything as I do for most web projects. Following this spirit, I was not sure which direction to go, Flash like 7 of the last 8 versions, or XHTML / JavaScript. I decided to make the decision after the preliminary design.After about a week of perfecting the textures and colors, I made the above design as a starting point.

After picking apart my original design, I decided to test its feasibility in Flash. Although the design turned out very visually appealing, it was not practical for the type of site that I wanted to develop. Click here to see this concept.

Next, I decided to test the waters of the original concept in XHTML. The result was more user-friendly than the Flash version but it wasn’t what I was looking for. Click here to see this concept.

Although the grungy-paper texture is was trendy, I didn’t think it had its place in the design. I re-worked the concept and came up with navigation scheme for the next concept. Also, having spent several days working on the vector art piece, I wanted to utilize it in the design. Click here to see this concept.

I further worked the design concept and needed a splash image for the homepage. My goal was to design something to compliment the overall green color scheme while also creating a visually appealing theme that would be used variously throughout the site. Since I was going for a theme that would look great on a 17′’ monitor or a 70′’ TV, I wanted to make sure that the design flowed into a solid color as seamlessly as possible. The Spalsh also had to accommodate readable content for the homepage.

I liked the original but I felt that the colors clashed with the overall theme and that it did not flow as I had originally imagined. I also realized that I was not making use of the vector graphic that I created earlier and tried to find a way to incorporate it. The result is seen in the screenshot above. With the addition of some carefully tweaked brushes and filters, I was able to successfully utilize both of my original key design components. Click here to see this concept.

Almost three years after the launch of DCP Version 8, DCP 9 has officially launched! I started the process in November, 2007 and have been working on and off since then to create something that I am proud of.

The new version has been built from the ground up using Code Igniter which is a lightweight, open-source PHP framework (MCV). I had been wanting to learn CI for a long time and building this site has converted me to a true Code Igniter fanboy.

I have also created some cool new features for this version including a live RSS feed from my Last FM account which updates what I am currently listening in iTunes and on my iPod in realtime. I have also created a feed from a Yahoo! Pipe that I created featuring randomly selected top rated stories from popular blogs and social news sites which you can see, along with my Last FM feed in the footer of the site. The portfolio has also been completely overhauled (and will probably be tweaked frequently) and is now much more robust and easy to use than previous versions.

I plan to update the blog frequently with tutorials, stories etc.. so check back often.

I hope you enjoy the new site!

The final version of DCP 9 will launch on Friday April 4, until then check back often for new updates and tweaks.

This is the my first experience with Wordpress and after a few dozen hours of poking around the code and template, I must say, I am impressed.

I am looking forward to posting regularly on the blog after the official launch of Dark Crimson Productions v9.0

I am hoping to launch the new site in full effect by Mid March. In the meantime, I will be likely be tweaking the blog settings and templates, but for now, stay tuned!