A while back I created a portfolio website for a friend of mine, Andrew Holder. As his artwork grew in popularity, traffic to his site began to erupt. The portfolio section of the site is pulled dynamically from a database. When experiencing traffic spikes, the connection to the database would fail, exceeding the maximum connections allowed. Not good.

The website is hosted on Media Temple’s Grid-Service (gs) which only allows 30 database connections at a given time. This caused the site to throw a mysql_connect() error once the limit was exceeded.

Error: Warning: mysql_connect() [function.mysql-connect] : Too many connections

So, the solution seemed that I needed a way to cache these files. A few Google searches later led me to an article over at PaperMashup. Basically, the way it works is by utilizing PHP’s output buffering. It checks to see if the page has been previously cached and if so, delivers the cached content. Otherwise, it loads the page normally, storing the output within the internal buffer. Before spitting out the contents to the user, it creates a cached version.

I’ve included the code snippet below similar to how it’s used at andrewholder.net. For the original code and a more in depth explanation, have a look at the article.

<?php
// Cache page contents
$filename	= (isset($_GET['id'])) ? $_GET['id'] : $cur_art;
$cache_file = 'cache/' . $filename . '.htm';
$cache_time = 3600; // 1 hour
// Serve the cached file if it's older than $cache_time
if (file_exists($cache_file) &&
	time() - $cache_time < filemtime($cache_file)) {
	include($cache_file);
	exit;
}
ob_start();

// Page contents goes here!

$cached = fopen($cache_file, 'w'); // Cache the contents to a file
fwrite($cached, ob_get_contents());
fclose($cached);
ob_end_flush(); // Send the output to the browser
?>

With the ever-growing popularity of jQuery and the ubiquitous use of lightboxes throughout the internet, I figured why not compile a list? Well, here it is!

Updated – 4/5/2009 – Fullsize

Updated – 3/30/2009 – jqModal

Fullsize

This concept spawns from the idea of creating a standardized solution for browsers to handle image popups rather than javascript frameworks. Although there is no support for this at the moment, they have created a jQuery plugin that supports this concept.

URL: http://www.addfullsize.com/

Features:

• Support: images
• File size: 8kb (Packed)
• Browsers Supported: Firefox, IE 6+7+8, Safari, Opera, Chrome

jqModal

A simple modal framework that’s lightweight, powerful and flexible. More examples of jqModal in action can be viewed here.

URL: http://dev.iceburg.net/jquery/jqModal/

Features:

• Support: images, ajax, inline and framed content
• File size: 3kb

ColorBox

URL: http://colorpowered.com/colorbox/

Features:

• Support: images, ajax, inline and framed content
• File size: 10kb
• Generates valid W3C valid XHTML and CSS

facebox

URL: http://famspam.com/facebox

Features:

• Support: images, ajax, divs
• File size: 2kb (gzipped & minified)
• Generates valid W3C valid XHTML and CSS

lightBox

URL: http://leandrovieira.com/projects/jquery/lightbox/

A jQuery version of the popular Lightbox2 based on prototype and scriptaculous.

Features:

• Support: images
• File size: 7kb (packed) / 10kb (minified)
• Available WordPress plugin

Lightbox (Balupton Edition)

URL: http://www.balupton.com/sandbox/jquery_lightbox/

A jQuery version of the popular Lightbox2 based on prototype and scriptaculous.

Features:

• Support: images
• File size: 21kb
• Browsers Supported: Firefox 2+3, IE6+7, Safari 3, Opera 9.5

Lightbox (Mesozen)

URL: http://warren.mesozen.com/jquery-lightbox/

A jQuery version of the popular Lightbox2 based on prototype and scriptaculous.

Features:

• Support: images
• File size: 15kb

ThickBox

URL: http://jquery.com/demo/thickbox/

Features:

• Support: images, ajax, inline and iframed content
• File size: 10kb (compressed)
• Browsers Supported: IE6, IE7+, Firefox 2+, Opera 9+, Safari 2+

prettyPhoto

URL: http://www.no-margin-for-errors.com/projects/prettyPhoto/

Features:

• Support: images, Flash
• File size: 2kb (gzipped)
• Browsers Supported: IE6, IE7+, Firefox 2+, Opera 9+, Safari 3

piroBox

URL: http://www.pirolab.it/pirobox/

Features:

• Support: images
• File size: 13kb (packed)
• Browsers Supported: IE6, IE7+, Firefox 2+, Opera 9+, Safari, Chrome

Fancy Zoom

URL: http://orderedlist.com/demos/fancy-zoom-jquery/

Based loosely off Cabel’s FancyZoom.

Features:

• Support: images, html, flash
• File size: 5kb (minified)

FancyBox

URL: http://fancy.klade.lv/home

Features:

• Support: images, ajax, html, inline and iframed content
• File size: 8kb (packed)
• Browsers Supported: IE6, IE7, Firefox 3, Opera 9, Safari 3

NyroModal

URL: http://nyromodal.nyrodev.com/

Very robust modal that can handle just about any content thrown at it.

Features:

• Support: images, ajax, inline and iframed content
• File size: 17kb (packed)
• Generates valid W3C valid XHTML (Transitional)

Imagebox

URL: http://www.intelliance.fr/jquery/imagebox/

Wasn’t able to get this working in Chrome (1.0.154.48)

Features:

• Support: images
• File size: 18kb

GreyBox

URL: http://orangoo.com/labs/GreyBox/

Features:

• Support: images, Flash, ajax, html, inline and iframed content
• File size: 22kb
• Browsers Supported: IE5.5+, Firefox 1.5+, Opera 8.5+, Safari

Hotbox

URL: http://www.s3maphor3.org/demo/hotbox/

Hotbox isn’t your typical lightbox. Its purpose is to provide a quick information panel that is activated upon pressing the spacebar.

Features:

• Activated by pressing the spacebar
• Browsers Supported: IE7, Firefox 3, Opera 9.63, Safari 3

Shadowbox

URL: http://www.mjijackson.com/shadowbox/

Not only can Shadowbox function without the use of JavaScript frameworks, it can also accommodate just about all of them. Through the use of adapters, Shadowbox works seamlessly with other frameworks such as Yahoo! User Interface Library, Ext, Prototype, jQuery, MooTools, and Dojo Toolkit.

Features:

• Support: images, html, swf, flv, qt, wmp, ajax, inline and iframed content
• File size: 22kb (core file only)
• Browsers Supported: IE6+, Firefox 1.5+, Opera 9+, Safari 2+
• Commercial use may require license – $20

Visual Lightbox

URL: http://lightbox2.com/

Visual Lightbox is an all-in-one application that allows you to generate photo galleries from your desktop without writing a single line of code. It’s free for non-commercial use, otherwise you’ll have to fork over $25 for the Business Edition.

Features:

• Commercial use requires license – $25

Can’t decide which JavaScript compressor to use? Then have a look at CompressorRater. It compares various popular JavaScript compression utilities suchs as JSMin, Packer, YUI Compressor and Dojo ShrinkSafe. It will even compare the results with and without the affects of gzip compression.

Give CompressorRater a try.

I recently had a project where I needed a way to show/hide content within a div similar to the SlideToggle() effect. The only difference was that I wanted to show part of the content within the div when the page loaded. Inspired by Chris Pollock , here’s what I came up with.

Also not that because the content within the div was delivered dynamically, I didn’t know how much text there would be. For example, if there was only a single line of text, yet the minimum height was set to a value more than the text, the effect would fail miserably. In order to avoid this, I checked to ensure the default height was greater than the minimum height. If it came up short, there would be no slide effect and only the text would be displayed.

Demo

Xhtml

<div id="container">
	<h1>jQuery slide with minimum height
	<h2>About Billabong</h2>
	<div id="wrap">
		<div>
			<p>Gordon Merchant founded Billabong in Burleigh Heads on the Gold Coast in 1973. Combining his passion for surfing with hard work, Gordon designed boardshorts, manufacturing them on the kitchen table and selling through local surf shops and markets.</p>
			<p>Gordon developed his own stitching technique, which made the garments more durable, cost effective and less labor intensive. He employed machinists, moved the operation into a factory, set up a distribution network and sponsored a team of renowned Australian surfers. The business thrived.</p>
			<p>Since those beginnings, Billabong has expanded its product range to include boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.</p>
			<p>Information courtesy of <a title="Billabong" href="http://www.billabong.com/us/">Billabong</a>.</p>
		</div>
		<div id="gradient"></div>
	</div>
	<div id="read-more"></div>
</div>

jQuery

$(function(){
	var slideHeight = 75; // px
	var defHeight = $('#wrap').height();
	if(defHeight >= slideHeight){
		$('#wrap').css('height' , slideHeight + 'px');
		$('#read-more').append('<a href="#">Click to Read More</a>');
		$('#read-more a').click(function(){
			var curHeight = $('#wrap').height();
			if(curHeight == slideHeight){
				$('#wrap').animate({
				  height: defHeight
				}, "normal");
				$('#read-more a').html('Close');
				$('#gradient').fadeOut();
			}else{
				$('#wrap').animate({
				  height: slideHeight
				}, "normal");
				$('#read-more a').html('Click to Read More');
				$('#gradient').fadeIn();
			}
			return false;
		});
	}
});

CSS

/* simple reset */
html,body,div,h2,p {margin:0;padding:0;}

html {
font:1em Arial, Helvetica, sans-serif;
color:#444;
}
a {color:#0087f1;}
p {margin-bottom:5px;}
#container {
margin:0 auto;
width:600px;
}
#container h2 {
font-size:20px;
color:#0087f1;
}
#wrap {
position: relative;
padding: 10px;
overflow: hidden;
}
#gradient {
width:100%;
height:35px;
background:url(images/bg-gradient.png) repeat-x;
position:absolute;
bottom:0;
left:0;
}
#read-more {
padding:5px;
border-top:4px double #ddd;
background:#fff;
color:#333;
}
#read-more a {
padding-right:22px;
background:url(images/icon-arrow.gif) no-repeat 100% 50%;
font-weight:bold;
text-decoration:none;
}
#read-more a:hover {color:#000;}