Originally, the content of the slides were entered manually to the HTML file but with the help of HTML5’s very handy localStorage and contentEditable features, I added the ability to create the slide content within the browser, saving it as it’s typed. Most conventional desktop slideshows rely on the mouse to add content and navigate which is slow and often frustrating. To avoid this pitfall and improve the work flow, I added simple keyboard commands to easily navigate (up and down arrows) and add / remove slides (ctrl+A / ctrl+D).

I plan to release the full source of this project and do a code walk through soon but in the meantime, you can view and vote for the project on the 10K Apart website:

View the Project

Features

→

Fully editable slides

→

Ability to quickly and easily Add / Remove slides

→

Persistent content (saved “on the fly” with localStorage)

→

Arrow key navigation

→

Two themes

→

Light weight (under 10k not including jQuery)

Technologies used

→

localStorage

→

contentEditable

→

CSS3 Radial Gradients

→

RGBa

→

Border Radius

→

Box Shadow

→

Text shadow

View the Project

Setting up the Database

function initDatabase() {
	try {
	    if (!window.openDatabase) {
	        alert('Databases are not supported in this browser.');
	    } else {
	        var shortName = 'DEMODB';
	        var version = '1.0';
	        var displayName = 'DEMO Database';
	        var maxSize = 100000; //  bytes
	        DEMODB = openDatabase(shortName, version, displayName, maxSize);
			createTables();
			selectAll();
	    }
	} catch(e) {

	    if (e == 2) {
	        // Version number mismatch.
	        console.log("Invalid database version.");
	    } else {
	        console.log("Unknown error "+e+".");
	    }
	    return;
	}
}

First we check if the browser supports the openDatabase method, is so we continue and define the database parameters:

• shortName is the DB name as it will be referred to by the browser and SQL
• version openDatabase version. 1.0 for this (more on that here)
• displayName The full display name / description of the database
• maxSize This is max size in bytes is the size you expect the database to reach. This is essential for memory management purposes.

Next, we call the createTables(); function where the table is defined and pre-populated with initial data (optional).

Building the Table

function createTables(){
	DEMODB.transaction(
        function (transaction) {
        	transaction.executeSql('CREATE TABLE IF NOT EXISTS page_settings(id INTEGER NOT NULL PRIMARY KEY, fname TEXT NOT NULL,bgcolor TEXT NOT NULL, font TEXT, favcar TEXT);', [], nullDataHandler, errorHandler);
        }
    );
	prePopulate();
}

This basic function executes the executeSql method which runs as the CREATE TABLE query. The SQL syntax is based on SQLite so it should feel familiar to many Web & Mobile developers. For this demo, we are going to pre-populate the newly created page_settings table with some initial data:

function prePopulate(){
	DEMODB.transaction(
	    function (transaction) {
		//Optional Starter Data when page is initialized
		var data = ['1','none','#B3B4EF','Helvetica','Porsche 911 GT3'];
		transaction.executeSql("INSERT INTO page_settings(id, fname, bgcolor, font, favcar) VALUES (?, ?, ?, ?, ?)", [data[0], data[1], data[2], data[3], data[4]]);
	    }
	);
}

Note: although we don’t really need a PK for such a basic demo it will be there for future extensions and advancements.

Now the database is initialized, a table has been created and we have a row of default data inserted. Since the data is stored, you can now reload or page or close and reopen it and the data will remain. To visualize this in Safari, go to Develop > Show Web Inspector > Databases tab where you can view the database and its contents as they are added or changed.

Select the data

After the initial page load the data is stored and we run the selectAll() function to get the data:

function selectAll(){
	DEMODB.transaction(
	    function (transaction) {
	        transaction.executeSql("SELECT * FROM page_settings;", [],
                dataSelectHandler, errorHandler);
	    }
	);
}

The demo consists of only one row so we use * to grab everything from the database but please optimize your queries if you decide to use this example for your own projects.

function dataSelectHandler(transaction, results){

	// Handle the results
    for (var i=0; iYour Favorite Car is a '+ newFeature.favcar +'

');

        if(newFeature.fname != 'none') {
       		$('#greeting').html('Howdy-ho, '+ newFeature.fname+'!');
       		$('#fname').val(newFeature.fname);
        } 

       $('select#font_selection').find('option[value='+newFeature.font+']').attr('selected','selected');
       $('select#bg_color').find('option[value='+newFeature.bgcolor+']').attr('selected','selected');
       $('select#fav_car').find('option[value='+newFeature.favcar+']').attr('selected','selected');
    }

}

This function loops through our data and uses a bit of jQuery to apply the specific values to CSS properties on the DOM. Going further, we set the HTML form defaults based on data with the help of jQuery.

Making updates

This function reads the form values, validates the text input and updates the database

function updateSetting(){
	DEMODB.transaction(
	    function (transaction) {
	    	if($('#fname').val() != '') {
	    		var fname = $('#fname').val();
	    	} else {
	    		var fname = 'none';
	    	}
			var bg    = $('#bg_color').val();
			var font  = $('#font_selection').val();
			var car   = $('#fav_car').val();
	    	transaction.executeSql("UPDATE page_settings SET fname=?, bgcolor=?, font=?, favcar=? WHERE id = 1", [fname, bg, font, car]);
	    }
	);
		selectAll();
}

Dropping the table

We could simply remove the row with a DELETE query but since we already check for the presence of data, it makes more sense to DROP the table:

function dropTables(){
	DEMODB.transaction(
	    function (transaction) {
	    	transaction.executeSql("DROP TABLE page_settings;", [], nullDataHandler, errorHandler);
	    }
	);
	location.reload();
}

After the table is dropped, the page is refreshed which triggers the initial database setup procedures defined earlier.

The demo:

View DemoDownload Source

Why should you use Local Databases?

→

They are fast, flexible and never expire. Developers can define the maximum size of the database and since all of the queries are run via JavaScript, no external server calls are required and unlike cookies and sessions, they persist until manually removed.

→

Unlike cookies and sessions, which are created on the server side and then stored in the browser, the information stored in a local database is truly local.

→

Safari and Opera’s local databases are based on SQLite and are threadsafe which prevents multiple instances of the data from being opened concurrently.

→

iPhone and iPad OS support local databases through their Mobile Safari browsers, making this storage platform ideal for mobile web apps.

→

From the UX perspective, the possibility of storing user and page settings and options locally, instantly and securely without the out the need to make external server or server side database calls is incredible. Since the HTML5 is widely supported in Webkit and Opera, there are nearly limitless possibilities for HTML5-based games and web apps.

Why should you NOT use Local Databases?

Local databases are a great way for you to simplify and improve your projects but they have a few obvious drawbacks:

→

Limited cross-browser support in the current form. At the time of this article, Safari 4, iPhone / iPad OS3, Chrome 5 and Opera 10.5 (Desktop) are the only mainstream browsers with support.

→

Not ideal for sensitive information. Sure, JavaScript can do MD5 and SHA1 hashing but if these guys can crack the code while listening to KoЯn, how safe do you feel?

→

Even though SQLite has been around for 10 years now, Webkit / Opera support is much newer and has consequently seen less vetting from those who would want to steal your data.

What about FireFox, Chrome and IE?

→

Firefox introduced support for localStorage in version 3.5 in the key-value pair format (similar to cookies and sessions) but has so far (and for the foreseeable future) stayed away from the SQL Database Storage model. More about that here, here and here

→

Internet Explorer has offered persistent storage support since IE5.5 which they’ve termed userData Behavior. This technique is very limited in features and has a maximum storage size of 128k per page. IE local storage improved in IE8 with the introduction of localStorage. Both IE local storage formats are key-value and there is currently no native local database support in IE—maybe in IE9?

→

Prior to version 4, local database storage support in Chrome was limited to implimentaiton via the Google Gears API. Gears offers a very similar SQLite-based local storage component that works across most browsers including IE6+, FireFox, Opera and Safari. The Gears platform was created to let developers create web applications that can be used offline and also offers support for other features such as Canvas, Desktop support and Geolocation. The downside is that users must install the Google Gears browser extension on their machine before they can access these features. Additionally, Gears requires developers to include a JavaScript file in their application in order to use Gears which makes it a less than ideal choice for the low-bandwidth mobile web application world. More on the Google Gears Database API here.

*UPDATE* As January 2010 Chrome now offers full local database storage support natively in effort to move to a more standards-based approach. Gears is still being supported in its current form (no new development or further platform compatibility, though) for the time being. More information on this change can be found here. (Thanks for the correction, Colin)

Resources

• Safari Reference Library: Using the JavaScript Database
• WebKit Does HTML5 Client-side Database Storage
• MozillaZine Weblog: Not Implementing Features Is Hard

• Opera: Persistent client side storage for your persistent needs
• Opera Web Storage: easier, more powerful client-side data storage

• Unlock data – mobile example
• Webkit CSS 3D + Local DB Demo
• Storage Notes Demo

The demo:

View DemoDownload Source

The demo page showcases a number of CSS3 techniques including:

• Gradients (Radial and Linear)
• “Rounded” Border Images
• Border Radius
• Drop Shadows (Box and Text)
• Transforms
• Keyframe Animations
• Transitions
• Image Masking
• :target Pseudo Selector
• Multiple Backgrounds
• CSS Columns

Examples in the demo include:

• Image gallery with randomized CSS transitions (supplemented with jQuery)
• Image-less 3D Bar Chart
• Pure HTML / CSS Accordion links
• Navigation with CSS animated hover effects
• jQuery powered “View Mode” with CSS3 visual enhancements

After exploring the demo use the “CSS View Mode” feature to see example code, my comments and suggested resources / examples for each example.

The demo:

View DemoDownload Source

Final thoughts

Although the upcoming FireFox 3.7/ 4.0 is said to include support for CSS transitions, you will need to use a Webkit browser for now to see some of the advanced examples. I recommend updating to the latest version for full support. I designed this demo for Webkit, Firefox 3.6+ and Opera 10.5.3 and have intentionally used browser vendor prefixes accordingly. There are, of course, other browsers which offer (limited) support of CSS3 properties but this demo is geared towards mainstream browsers (that is my way of saying don’t use IE on this demo).

    $('a.fb_dynamic').each(function(){
           var dWidth 	= parseInt($(this).attr('href').match(/width=[0-9]+/i)[0].replace('width=',''));
           var dHeight 	=  parseInt($(this).attr('href').match(/height=[0-9]+/i)[0].replace('height=',''));
			$(this).fancybox({
				'width':dWidth,
				'height':dHeight,
				'autoScale'     	: false,
				'transitionIn'		: 'elastic',
				'transitionOut'		: 'elastic',
				'type'			: 'iframe'
			});
      });

With this code in place Fancybox can be called by simply adding the class fb_dynamic and then specifying the width and height in the URL’s parameters:

Free iPods!!!!

Going one step further, if you need to make the Fancybox call from Flash (another feature not in the API) you can create a simple JavaScript function and make the call from your SWF or AS file:

	/**************************************************************
	Call Fancybox from Flash with a Dynamic width and Height
		@w = integer [width]
     @h = integer [height]
     @u = string [url]
      example funtion call: flashFancybox(500,600,'http://darkcrimson.com')
	***************************************************************/
			function flashFancybox(w,h,u) {
			    var fbflash = $('a#fbflash');
                                fbflash.attr('href', u+ '?width=' + w + '&height=' + h );
				fbflash.trigger('click');
			}
          $(function () {
              // Create dynamic link, change append location to change FB animation start point
	      $('#body').append('  ');
          });

View DemoDownload Source

The XML

First, lets take a look at the XML structure:

In it’s most basic form, the XML file contains the main <data> node with subsequent <entry> nodes. Within each entry we are defining the meta data such as <date>, <cost> and <category>. Also within the entry are a <name> and <description> field which are wrapped in CDATA blocks that will allow us to use special characters and punctuation without compromising the validity of the XML file.

AJAX

Using jQuery’s wonderfully simple AJAX method to make an XMLHttpRequest. The basic code for making the AJAX request for the example XML file shown below:

$.ajax({
type: 'GET',
url: 'xml/data.xml',
dataType: 'xml',
success: function(xml_list) {

var xmlArr = [];

$(xml_list).find('entry').each(function() {

	var xml_date      	= $(this).attr('date');
	var xml_cost 	  	= $(this).attr('cost');
	var xml_category  	= $(this).attr('category');

	var xml_name  	  	= $(this).find('name').text();
	var xml_description = $(this).find('description').text();
					  // Add matched items to an array
	xmlArr += '<tr filterCriteria="';
	xmlArr += xml_cost;
	xmlArr += '"><td>';
	xmlArr += xml_date;
	xmlArr += '</td><td class="xml_name">';
	xmlArr += xml_name;
	xmlArr += '</td><td>';
	xmlArr += xml_description;
	xmlArr += '</td><td>';
	xmlArr += xml_category;
	xmlArr += '</td><td class="xml_cost">$';
	xmlArr += xml_cost;
	xmlArr += '</td></tr>';

}); // end each loop

 //Append array to table (this way is much faster than doing this individually for each item)

	$(xmlArr).appendTo(wrapper +' table tbody');

The first two things to note in the code are the dataType and success parameters. We use dataType to specify that we are requesting an XML fie and using a function in success to manipulate and display the XML data. Next, we use jQuery’s super handy find() method to search the XML document for entry nodes. We then chain the each() function to iterate through the data that is returned from the find(). Next, variables are created for each of the items we will be displaying. Using variables as opposed to the selector name caches the data so that it is not called in each iteration. Note that there are two methods of assigning the variables in this example; the first simply assigns available attributes to the variables while the second has to traverse one step deeper to return the values of the name and description nodes.

Making it work

At this point we’ve covered the basic concepts but it is time to actually do something practical with the data. Displaying the results in HTML is easy but while we’re writing the markup, lets add some placeholders for filtering the data.

< $10
$10 – $20
$20 +
Any price




Date
Name
Description
Category
$

Ignore the <UL> for now and notice that we are adding elements to the the <thead> but not the <tbody>. Jump back to the JavaScript file and add this line below the var declaration for description and add:

$('<tr filterCriteria= "'+ xml_cost +'"></tr>')
.html('
'+ xml_date  +'
'+ xml_name  +'
'+ xml_description  +'
'+ xml_category +'
$'+ xml_cost  +'

')
.appendTo(wrapper +' table tbody');

This line is in our loop so it will iterate a populated <tr> for each entry in our XML and append it to the <tbody></tbody> of the table.

Making it useful

The parser is now built and displays the data from our XML file but it lacks practicality. What if you want to sort by Computer Accessories? What if you want to show all items less than $20? These start to become serious issues as the length of the XML document increases.

We will cheat a little bit and tie in Christian Bach’s incredibly useful tablesorter jQuery plugin to do the sorting in this example. I won’t go into detail on the options and uses of this plugin because they are already covered thoroughly on the tablesorter plugin site.

Filtering is done by simply using jQuery’s hide() and show() on specifically tagged table rows. We’ve already created the HTML in previous steps so all that is left is to assign a onClick event and add a switch to create the filter. To add sorting to the table we’ve created add the following after the each() function inside the AJAX call:

 window.setTimeout('$("'+ wrapper +' table").tablesorter({sortList:[[0,0],[0,0]], widgets: [\'zebra\']});', 120);

The selector is wrapped in an interval because both the tablesorter script call and our AJAX call happen concurrently on page load which causes the tablesorter to fire before the table is fully populated with or XML. The 120ms on the interval is somewhat arbitrary and it can be changed as needed. Additionally, if you prefer not to use the interval, you might be able to do so depending on your particular use and XML file size. Also, note the use of the “zebra widget” option; this will assign a “stripe” class to odd numbered rows which allows for alternate row background colors.

var nav_link = $('#xml_nav li a');
nav_link.click( function() {
var tr = wrapper +' table tbody tr';
$(tr).show(); //Show all rows
switch ($(this).attr("class")) {
case  "filter_10 hit" :
$(tr).filter(function (index) {
return parseFloat($(this).attr('filterCriteria')) > 10;
}).hide();
break;

case  "filter_10_20 hit" :
$(tr).filter(function (index) {
return parseFloat($(this).attr('filterCriteria')) < 10 || parseFloat($(this).attr("filterCriteria")) > 20  ;
}).hide();
break;

case  "filter_20 hit" :
$(tr).filter(function (index) {
return parseFloat($(this).attr('filterCriteria')) < 20;
}).hide();

break;

case  "filter_0 hit" :
$(tr).show();
break;

}
/* Remove all instances of the stripe (alternating row) class
   Then re-apply stripe class as to visible alternating rows
*/
$(tr).removeClass('stripe');
$(tr + ':visible:odd').addClass('stripe');
});

In a previous step we generated the HTML that is inserted into our table and you might have noticed an attribute was added to the cost <td> called filterCriteria. The code above uses the value of this attribute to determine which items to show / hide. Obviously, this will only work if the value of cost is an integer. Feel free to develop a more elegant solution.

Finishing up

The last step that I will cover is adding a simple preloader to display as AJAX grabs the XML data. At the top of the function place the following line:

     $('


').html('
Loading Data...

').prependTo($('body'));

Inside of the xml_parser() function in the AJAX call’s success parameter place these two lines:

$('#preload_xml').remove();
$(wrapper).show();

Thes four lines of code will first hide our wrapper div and then dynamically construct a div with a loading message and then remove the code from the page once everything is loaded and finally show the wrapper again.

We now have a parser that sorts and filters XML data. There are many other features that could be added such as a more complex content filter and code cleanup to make things even more re-usable. If you find this code useful and decide to use it in your projects, I encourage you to modify the code as you find necessary and please feel free to share your examples.

Other Considerations

There is a great jQuery XML parser plugin called jParse which can be used to grab display the contents of an XML file with little effort. Other than the reliance on AJAX to call the XML file, the approach used by jParse differs considerably from the approach that I took in this article. If you are looking strictly for XML display, I recommend looking into jParse.

View DemoDownload Source

Introduction

The Wordpress platform is fairly secure “out of the box” but because the deployment script has been simplified for ease of use, many things such as default usernames and paths are predetermined. While this is convenient, it also creates potential for attacks by hackers who can easily find your default administration pages with a basic search on most search engines. You can see for yourself by searching Google with the following query: inurl:wp-admin: site:us . With just this basic example, the admin path to nearly 20,000 blogs is at your fingertips.

While this information alone is not enough to gain access your site, a hacker who has an exploit or a basic script to guess your password can potentially access your blog’s administration area without ever viewing your site. Below I’ve outlined a few of the most essential tips and additionally provided some insight on how to clean WordPress if your site once its been hacked.

Use random names for your Database and tables

Throw in some random numbers or letters; it is going to be a much more difficult attack your site with malicious queries or XSS if the attacker cannot identify your DB name.

I’ve been working in WordPress for several years now and have not noticed significant changes in the table structure. Hackers know this and can write queries on your default wp_posts and wp_comments tables in their sleep. Even if your Database has a strong name, it is a wasted effort if you do not use a unique table prefix. I suggest something completely random and meaningless containing both a number and letter.

Don’t use “WP_” as a table prefix

Throw in some random numbers or letters; it is going to be a much more difficult to use XSS attacks since the hacker will have to work a lot harder to target your DB.

Rename the ‘admin’ user

Having a strong password will certainly reduce the chances of unauthorized access but since hackers know that the default account login is admin , they are already 50% of the way in. Renaming the admin account can be difficult if not impossible to change from WordPress itself, so I recommend doing this directly from the database. Access your users table and simply rename the admin account to something harder to guess. It probably goes without saying but after you change the username, don’t make your Nickname the same as your login.

Server Configuration

Some hackers attempt to access WordPress through the admin interface which allows them full control of the content of your blog but what about the hackers who want to steal your traffic or install a prominent ad for “v1@gr@” on every page of your site?

Many exploits are aimed at the internal WordPress files which can potentially give the hacker complete control of not only your blog content but your entire server. Fortunately, blocking most of these attacks can be done with a few simple .htaccess tricks.

The majority of WP’s “guts” are located in the wp-includes and wp-content folders. I recommend placing an .htaccess similar to the one below in both the wp-includes and wp-content directories. Note:you might need to customize the <files> section depending on your plug-in requirements and WP version.

Order Allow,Deny
Deny from all

 Allow from all

This code will deter XSS attacks on your core PHP files and make it more difficult for hackers who do get into run malicious files that they’ve left in these directories in the future.

Another area in need of some .htaccess fun wp-admin folder. For this folder, we will require server authentication before accessing anything in the admin folder. To do this, create a .htpasswd file and then add create a .htaccess file with the code below (change AuthName and Require user fields as desired):

AuthType Basic
AuthName "Please insert coins to ride the Pony"
AuthUserFile /path/to/your/.htpasswd
Require user barbiegrrrl45453

This type of authentication can be confusing to less technical users, more information can found here and I also recommend checking with your host as I’ve found that many major hosting companies have a “protect a directory” feature in their admin panels.

As a final “sledgehammer” method, .htaccess makes it easy to block geographical areas from accessing your site all together. The basic syntax is show below and should be placed in the .htaccess located in the blog’s root directory (this file already exists so be careful not to remove any of the existing code)

order allow,deny
deny from 000.867.530.9
allow from all

To block a specific country you can refer to the aptly named BlockACountry.com for a list of specific IP addresses. Please note that by doing this, you are, in theory, blocking _EVERYONE_ from the specified country. This method can also increase page load times if the list is too long.

Have you already been hacked?

Issues such as inability to login to your account, mysterious ads and comments and random errors are obvious signs of that something is wrong. But what if your site has been hacked without any visual signs? These types hacks are typically the most frustrating and most difficult to check. The usual signs are HTML comments or hidden / broken code with spam keywords and / or links.

This type of attack is usually done when a hacker gains access to your server and then modifies your WP files to generate the malicious code. It is important to catch these types of attacks as early as possible (and to monitor your files occasionally) because Google’s bots typically can detect the malicious code which will often get you marked as a “Malicious / Spyware” site or in some cases get your site blacklisted altogether .

The specific files targeted vary depending on the purpose of the attack but after dealing with several types of attacks in the past, the most common files are custom JavaScript files linked in the header (usually hacked to show ads or deceive the user by creating invisible links), index.php ( typically injected an eval() statement that generates HTML) and through the .htaccess located in the root directory (typically used to generate traffic to malware / ad sites). These are the first three places that I check when I investigate a hacked site but there is also a good chance that the hacker will leave an innocently named file such as a .jpg or .swf which contains a “an all access pass” to your server.

The other type of attack wherein the hacker gains unauthorized access to your database can usually be resolved much easier. With this type of attack you will be able to tell if anything is out of place with the posts or comments tables since these are published on your site but it is also very important to check the users and options tables for un-authorized users and suspicious entries.

If all else fails, back up your database and files and start with a fresh install and then add your theme files and data in small batches once you deem them clean. There is also a great plugin to check if your code has been hacked.

Common Sense Messures

Regarding user accounts, I suggest using this feature with caution. At very least, accounts should require administrator approval. For those who are paranoid, you can always rename or remove the wp-register.php file (after you set up all of your accounts) so that no additional accounts can be created.

One of the easiest things you can do is make sure that the version if WordPress your site is running is the most current. It can be tedious but it is the most effective and easiest way to protect your site. <soapbox>While I am a fan of WordPress, I am usually wary of choosing it as a CMS solution for my clients because of the potential for vulnerabilities in older versions. I suggest to anyone reading this who uses WordPress as a CMS on client projects to consider the potential issues and plan for (and perform!) routine upgrades accordingly.</soapbox>

My last recommendation is to create a secret key in your wp-config.php. The secret key is a hashing salt which makes it more difficult for a hacker running a password hacking script to gain unauthorized access. Wordpress has a secret key generator which I highly recommend using for this operation. Below is a SAMPLE key, please make sure to change it if you use it on your blog! Note: the exact implementation of these keys depends on your WordPress version. Since you’ve read this far down, I assume you have already upgraded or will be shortly, but visit the entry in WordPress’ Codex for more information.

define('AUTH_KEY', ':dr+%/5V4sAUG-gg%aS*v;&xGhd%{YKC^Z7KKGh j>k[.Nf$y7iGKdJ3c*[Kr5Bg');
define('SECURE_AUTH_KEY', 'TufWOuA _.t>#+hA?^|3RfGTm>@*+S=8\"\'+\"}]<2V^$T])=8Xh2a:b:}U_E');
define('NONCE_KEY', 'k1+EOc-&w?hG8j84>6L9v\"6C89NH?ui{*3\\(t09mumL/fFP_!K$JCEkLuy ={x{0');

If you have any questions, suggestions or corrections feel free to add them in the comments.

Getting An API Key

To get started with the Flickr API, you need to sign into Flickr and Apply for an API key. After you register for the API Key, you should browse through Flickr’s API page to see some examples of what is possible. As you will see, there are quite a few methods listed which might seem a bit daunting. The nice thing is all of the provided methods are well documented and after one successful implementation, working through the rest is fairly repetitious.

Hot, Steamy PHP Action

We will be using cURL to get the data from Flickr. Some might prefer another method such as PHP’s file_get_contents, there are advantages to both but you can read a book (or Google) for more information on this.

Getting started with the cURL request:

$params = array(
	'api_key'	=> 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
	'method'	=> 'flickr.photosets.getPhotos',
	'photoset_id'	=> '72157622566216264',
	'extras'	=> 'original_format',
	'format'	=> 'php_serial'
);
$encoded_params = array();
foreach ($params as $k => $v){ $encoded_params[] = urlencode($k).'='.urlencode($v); }

In the code above we first put the API key and then choose the Method (which is listed on the Flickr API page link listed earlier in the tutorial). Next we specify the photo set id which for this example is the set seen in my Portfolio. The parameters for “Extras” depend on the Method used and desired options and range from date uploaded to author to tags. For this example we will be calling “original_format” which will pull a link to the full size version of the image. Finally, we choose “php_serial” as the format which will return a serialized PHP string with the data (Alternatively you could use JSON but we can save that fun for a JavaScript tutorial).

Please note: to use the “original_format” parameter you will need to be a Flickr Pro member.

$ch = curl_init();
$timeout = 5; // set to zero for no timeout
curl_setopt ($ch, CURLOPT_URL, 'http://api.flickr.com/services/rest/?'.implode('&', $encoded_params));
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
$file_contents = curl_exec($ch);
curl_close($ch);

 $rsp_obj = unserialize($file_contents);

The code above makes the cURL call to Flickr’s API with the data we set in the previous code block, unserializes the cURL object’s returned data and creates a new Array called $rsp_obj.

Let’s pause and take a look at some of the data that was returned with a little print_r($_rsp_ojb) action:

Array
(
    [photoset] => Array
        (
            [id] => 72157622566216264
            [primary] => 4003748546
            [owner] => 7332638@N08
            [ownername] => benlister
            [photo] => Array
                (
                    [0] => Array
                        (
                            [id] => 4003748546
                            [secret] => 69b188c174
                            [server] => 2643
                            [farm] => 3
                            [title] => Chicago (Montrose Harbor)
                            [isprimary] => 1
                            [originalsecret] => 728e01b6c1
                            [originalformat] => jpg
                        )

                    [1] => Array
                        (
                            [id] => 4052220478
                            [secret] => ec5e79cbbe
                            [server] => 2780
                            [farm] => 3
                            [title] => Seattle Sci-Fi Museum Exterior
                            [isprimary] => 0
                            [originalsecret] => 625519fc32
                            [originalformat] => jpg
                        )

..............

The array output above tells us pretty everything we will need to create links to all sizes of each photo in the set. To display each photo in the photo set we first need to step into the [photo] section of the [photoset] array.

if ($rsp_obj['stat'] == 'ok') {

		$photos = $rsp_obj["photoset"]["photo"];

	echo "
";

	foreach($photos as $photo) {

               $farm              = $photo['farm'];
               $server            = $photo['server'];
               $photo_id          = $photo['id'];
               $secret            = $photo['secret'];
               $photo_title       = $photo['title'];


	}
	  echo "


";

	} else {
            echo "Error getting photos";
       }

[note: the codeblock is not displaying the following img src line correctly in the line above so it has been moved below]

src="http://farm'.$photo['farm'].'.static.flickr.com/'.$photo['server'].'/'.$photo['id'].'_'.$photo['secret'].'_t.jpg" alt="'.$photo['title'].'"

The code above first checks to see if the data was returned ok before trying to iterate through the array. Once we have verified that we have the data, we name the [photo] array more intuitively.

Putting it all together

Let’s break down the URL piece by piece to better understand whats going on: For example if the URL is as follows:

http://farm3.static.flickr.com/2421/4002906997_5e9de854c6_t.jpg

• $photo["farm"] = 3
• $photo["server"] = 2421
• $photo["id"] = 4002906997
• $photo["secret"] = 5e9de854c6
• _s = 75px square thumbnail
• _t = 100px thumbnail
• _m = 240px thumbnail

To get the “normal” 500px image, use the sequence above minus the “underscore letter” ending.

To get the full “original size” takes a bit more work:

src="http://farm'.$photo['farm'].'.static.flickr.com/'.$photo['server'].'/'.$photo['id'].'_'.$photo['originalsecret'].'_o.jpg"

UPDATE 7/10: I realized that I haven’t updated this in a while and wanted to share a much easier way to get the original full-size image:

	// In the params array, replace:
	'extras'	=> 'original_format',

	// With:
	'extras'	=> 'url_o',

	//And to call the image:

	src="'.$photo['url_o'].'"

You should now be able to create a sample image page from a photo set in all sizes. You can also apply these principles to almost any of Flickr’s API Methods to achieve more customized results. Enjoy!

View thumbnail Sample Page

This overhaul has been an extremely long process and has convinced me that I am without a doubt the most difficult to please client. Although I’ve been involved in well over a dozen freelance projects so far this year, I am glad that the nearly 9 month process of brainstorming, trial an error, redesigns and coding for this project is now over.

Apart from the design  face lift, my Portfolio has been completely re-designed and programmed with some custom jQuery and Flickr API magic.

The Blog has also been reconfigured and is now considerably easier to navigate through than the previous version. I have a number of tech tutorials and random topics that I plan to write about over the next few days weeks months so make sure to subscribe to my RSS feed.

< 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.

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.