This is an alternative lightbox script for jQuery which can parse the RSS of the post or page of your blog then displays images inside them (off course only with specific image group you defined). The script will open the image in popup just like other lightbox scripts.

THE LUMEBOX is an Open-Source Lightbox clone written as a jQuery plugin with a few added features. One of the main features is that it can parse RSS feeds just as easily as displaying images.

The plugin was started as a project in the Research and Development initiative within Sogeti which lets its consultants work with a variety of projects when they are in between customer objects. The Lumebox project was started on my initiative to gain more experience in creating Open Source tools and utilities.

Usage

Prerequisites

The Lumebox was written using jQuery 1.3.2 so I recommend that it is used in combination with this or a later version but it might very well work with previous versions as well, I just haven’t tested it.

Setup

There’s a few CSS-classes in the lumebox.css file that needs to be loaded for the Lumebox to pop properly. Whether this file is loaded as is or if the the classes are copied to another CSS file doesn’t matter as long as they are loaded. Copy the stop32.png-file to the same directory as the CSS-file or change the location of url in the #lumebox-close class.

Initialization

Place the following in your header after the jQuery import to load the plugin:

<script type=”text/javascript” src=”js/jquery.lumebox.js”>

and then somewhere on your page or in a javascript-file call the init function to traverse the document and search for lumebox keywords after the page has finished loading:

<script type="text/javascript">

$(function(){

    $.lumebox.init();

});

</script>

Usage

Add rel=”lightbox” to any links that you want to be parsed by the Lumebox and the title with the caption. It’ll find the target of the link and use it for source to the image in the popup and the content of the title attribute as caption. Images and feeds can be grouped by naming them rel=”lightbox[groupName]“. To avoid potential confusion between images and feeds all RSS-feeds have to be grouped in a name starting with “rss”, for example rel=”lightbox[rssGroup1]“.

Options

Options are passed as an object when initializing the Lumebox. All have default values to the only ones that has to be specified are the ones which need to change, defaults are shown in the parentheses.

• showAsList (false): If true all items in a group will be shown in a list in the Lumebox.
• rss (empty array): An array of urls to RSS-feeds.
• proxy (empty string): path/url to local proxy to use when fetching external feeds.
• duration (“fast”): Keyword (slow, normal, fast) or duration in milliseconds used for animating transitions.
• popupMaxWidth (680): The max total width of the popup including margins.
• fullscreen (false): Boolean that optimizes the lumebox for full screen viewing.
• opacity (0.7): The opacity of the overlay.
• loop (true): Whether to start over at item number one after pressing next at the last item.
• scrollToTop (false): Force scroll to the top of the popup everytime it’s opened.
• autoNext (false): Loads the next item after autoNext milliseconds if the Lumebox is open.
• parentElementId (false): The id of an element to use as a parent for the popup, it will be inserted just before this element is closed. If no element id is passed the Lumebox is inserted right before the closing body-tag.
• useParentOffset (true): Whether to use the offset of the closest positioned parent when positioning the popup i the z-axis
• useGestures (false): Whether to use gestures for post navigation in addition to keys. Click and drag left loads the previous post, click and right the next
• graphicsDir (“style/”): Relative path to the directory where the icons are stored.

RSS Parser

The RSS parser that’s built into the plugin is compatible with RSS and ATOM feeds and can be used on its own. It takes two parameters, the URL to parse and a function to execute when it has fetched and parsed the feed. Since it uses Ajax the URL must be local or go through a local proxy, since it fetches XML jsonp callbaks can’t be used. The following example will hopefully clear up how it can be used:

jQuery.lumebox.parseFeed({

    url: "/rss",

    success: function(feed){

        console.log("Feed title: " + feed.title);

        jQuery.each(feed.items, function(j, post){

            console.log("Post title: " + post.title);

        });

    }

});