ode - a simple personal publishing platform for the web

I wrote a series of posts about the lightbox style gallery script Colorbox, and using Colorbox with Ode. (Though there is really nothing specific to Ode about it.) So without making a long read even longer, the posts are:

• A Colorbox how-to: Part 1 -- What is Colorbox and why do I like it
• A Colorbox how-to: Part 2 -- Using Colorbox (Short and sweet)
• A Colorbox how-to: Part 3 -- Using Colorbox (a detailed guide)

Enjoy. (And I'd love to see your first Colorbox gallery.)

Update: Forgot to actually install the script on this site so the gallery in Part 1 was broken. Ha. Fixed.

You can believe me that it takes just a couple minutes to install Colorbox (because that's about as long as it just took me. But I've read my how-to. ;)

What is Colorbox?

Colorbox is "a lightweight customizable lightbox plugin for jQuery."

What does that mean? Let's break that question down into a couple of parts.

Colorbox is a JQuery plugin

JQuery is a very popular Javascript library. It builds on top of what Javascript can do on it's own, adding functionality or reimplementing features of the language so that they are easier to use, more concise, and compatible with a wider range of web browsers, in addition to other benefits.

From JQuery website:

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

For our purposes here, it means that in addition to ColorBox itself, we'll need to link to JQuery (because Colorbox assumes that JQuery will be available). As you'll see, including JQuery is as easy as copying and pasting a short code snippet.

As a JQuery plugin, colorbox() adds to what JQuery can do on it's own. More specifically, it adds a .colorbox() method to JQuery DOM objects that we can use to create photo galleries. You'll see exactly how this works later on in this how-to.

Colorbox is a lightbox

What is a lightbox?

Whether you can define it or not, you're probably familiar with this kind of thing. A lightbox script is a way to present photos and photo galleries (as well as types of content), so that the content appears to float in front of the current webpage.

Typically an inline photo included as part of the page content serves as a placeholder for the gallery. When the gallery is run, by clicking on the link to the lightbox gallery (again an image, button, text link, etc.), the page seems to fade into the background while the first photo in the gallery appears front and center on top of the original page.

Visitors can then click through the photos, and when finished dismiss the gallery and return to the original page. (Usually by by clicking a close button, pressing the 'esc' key on the keyboard, or clicking on a portion of the page still visible 'behind' the the gallery.)

Here's an example of a lightbox style photo gallery that uses Colorbox.

The photos aren't especially interesting. These are just some pictures I took recently in and around Boston, MA USA (which is where I live).

Lightbox style galleries are just one type of photo gallery. And Colorbox is just one example of a lightbox style gallery.

Read the rest of this post

My first attempt at this resulted in a very long and detailed write up. I decided to also provide a quick guide to using Colorbox without the detailed explanations.

If you don't need anything more than a bunch of code snippets and short description of where they go then this may be enough. If you'd like to have a explanation of what all of these bits and pieces do, how they fit together, and exactly how it all works, then you'll want to read Part 3. Everything I say here is also covered in the longer post.

I should say you that you can find all of the information required to use Colorbox at the official Colorbox website. (After all, that's where I got it from.)

In addition to demos and other info about features, etc., the Colorbox site includes the following resources you may find especially useful:

• A Beginner's Guide

  Colorbox is a JQuery plugin. If you are familiar working with JQuery plugins then you may want to skip the beginner's guide in favor of looking through the source on the demos page, as is recommended on the beginner's guide page. Otherwise the beginner's guide is a good place to start. Alternatively you can keep reading this post.

• The complete list of recognized settings

  Before or after you get Colorbox working, you'll want to look here to familiarize yourself with the options available. There are quite a few useful options. I'd bet you'll find something you want to modify.

• An FAQ

  It's not a bad idea to quickly glance through a FAQ even before you've had a chance to come up with questions of your own. Frequently asked questions are asked frequently because the associated issues tend to come up a lot.

  It's probably a safe bet something mentioned in the FAQ will be useful to you. (If not now, then soon.)

Part 1: Installation and Setup (Preparing to use Colorbox)

Step 1: Get all of the Colorbox related files to your server.

1.1 - Download colorbox from the project website.

1.2 - Go through the example galleries included as part of the Colorbox distribution and pick a style that you'd like to use as a starting point for your own galleries.

1.3 - Upload the minified version of the colorbox script ('jquery.colorbox-min.js') included with the Colorbox distribution, and both the 'colorbox.css' file and the 'images/' directory (and it's contents) from the example gallery you've chosen.

I recommend placing all of these in the same folder on the server.

For example:

/resources/

    scripts/

        colorbox/

            jquery.colorbox-min.js
            colorbox.css
            images/

Step 2: Include JQuery and Colorbox in your theme

Link to the JQuery script in the head section of your page._ theme file.

<!-- JQuery script (hosted by Google), 1.7.2 current as of 2012/0428 -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>;

Read the rest of this post

Part 1: Installation and Setup (Preparing to use Colorbox)

Step 1: Download Colorbox

Visit the Colorbox site and download the current version (1.3.19 as the date of this post.) The download is a .zip file. After unarchiving the file you'll have a directory containing:

colorbox/
colorbox.ai
content/
example1/
example2/
example3/
example4/
example5/
readme.md

The markdown formatted readme (readme.md) is primarily a changelog.

The example directories (e.g. 'example1', 'example2', ...) each contain an index.html file which is a simple HTML document with links for several Colorbox example galleries (and supporting resource files).

The examples serve two purposes:

• First, they demonstrate Colorbox.

  You drag and drop the index.html files from the example folders to a web browser (or otherwise open the files in a browser) to see Colorbox in action.

• Second, and more importantly, these example directories each contain a stylesheet and a UI sprite that you can use in your own galleries.

  Each of the examples features a different style. To get started you will probably want to quickly go through each of the examples to to have a look at all of your choices.

  Decide which you like the best, and then use the stylesheet and UI images from that example for your own gallery. It's worth noting that tweaking these styles should be relatively easy. All you would need to do is modify the included stylesheet, replace the image sprite, or both. To get started, just pick from the examples.

By the way, these are the same examples that you'll find on the Colorbox site.

The 'content' directory contains images and other content that are displayed in the example galleries. These are not the resources for the examples (e.g. stylesheets, interface elements). Those resources are contained in each of the example directories. 'content' is what it sounds like it is, the content of the examples. Your galleries will have their own content.

That leaves just the 'colorbox' directory and the file 'colorbox.ai'.

'colorbox.ai' is an Adobe Illustrator file. I don't have Illustrator or any app capable of opening .ai files, so I actually don't know what this file is exactly. (I tried, without success, to open the file with Inkscape, an open source Illustrator alternative available for Linux, Windows, and Mac platforms.) I assume it contains vector design elements related to the examples.

The 'colorbox' directory contains 2 versions of the Colorbox Javascript file.

colorbox/

    jquery.colorbox-min.js
    jquery.colorbox.js

'jquery.colorbox-min.js' is a minified version of the script. It is the one you'll want to link to on your page(s). 'Minification' involves removing all unnecessary bits from source file (and sometimes reworking the code itself, for example shortening the names of variables) so that it the source is as small as possible. This often renders the file all but unreadable but doesn't change the behavior of the code in anyway. It's an especially popular technique with Javascript, because Javascript code is typically downloaded to the client before it's executed. (Minification does not significantly impact the time it takes the code to execute.)

'jquery.colorbox.js' is the human readable version of the same code.

Read the rest of this post

I'm not going to tell you much here that you can't learn from the project page for 'Zoom' at jacklmoore.com. But I'm going to be a little more explicit about, and my instructions will be Ode specific. (Though honestly there is really nothing Ode specific about this.) Maybe reading this will cause you to give it a try and add another tool to your toolbox.

Zoom is a lightweight JQuery script that does a super useful thing. It allows you to display a reduced sized version of a larger an image and yet allow users to zoom in to see a much larger version of the image in place. Rather than showing you the full image, it displays only the portion of the larger image that fits within the same sized box as the reduced size version. Does that make any sense? If not an example should make it perfectly clear.

Click and hold the image below to see what I am trying to describe.

Click the image and hold to zoom

This lets visitors closely inspect a large image within the normal page layout. Something that wouldn't be possible otherwise. That's not to say that there aren't other approaches. You could instead link a reduced size image to a larger version, such that clicking on the small image would open the larger one outside of the context of the page. This might be a new window or, as is increasingly common, 'floating' in front or on top of the page. Just linking 2 images together doesn't require any scripting at all. A simple anchor tag with an href attribute will take care of that. And there are quite a few different tools to that allow you to enlarge images in more sophisticated ways. I like zoom in some cases because it emphasizes that the image is meaningful within the context of its place on the page.

So enough of that. How do we implement it?

Read the rest of this post