There's a very popular JavaScript out there called Lightbox JS 2.0. It's a great way to show off images and create impromptu photo galleries. The only problem is that it's heavy and dramatically degrades the performance of your website. Fortunately there's a 'clone' called Slimbox that utilizes mootools JavaScript library to produce the same effect but with far less JavaScript, and advanced loading techniques that subsequently produces faster loading and more responsive pages. Versatility III fully integrates the JavaScript and the CSS so all you have to do to utilize this technique is an an extra element to your image link.

Check out the demo below:

This month we've made using Slimbox even easier than ever! We've created a new GPL mambot that is WYSIWYG safe and doesn't require you to enter any HTML code directly as the previous solution did.

The Syntax is {slimbox}image_url{/slimbox} If you want the image to be part of an 'album', you can use the syntax {slimbox album=|albumname|}image_url{/slimbox}. To provide text descriptions, please use the syntax {slimbox title=|your description|}image_url{/slimbox}. you can also use both album and title in the same tag.

{slimbox album=|colo|}images/stories/colorado/image1.jpg{/slimbox}
{slimbox album=|colo| title=|some title|}
  images/stories/colorado/image4.jpg{/slimbox}
{slimbox}images/stories/colorado/image3.jpg{/slimbox}

Using the RocketTheme Slimbox Mambot

The new RocketTheme Slimbox mambot helps to dynamically create Photo galleries with minimal effort from yourself. This great utility also produces thumbnails of your selected photos/images, which, on selection, generate the whole image/photo in a javascript based window. It is the perfect tool to showcase photographs and other gallery images in a professional environment.

How to implement Slimbox

Slimbox galleries or single images can inserted in Content, Static Content and Custom modules. By utilising a few simple commands, you can easily insert a gallery onto your page. For this tutorial, we will be using the TinyMCE editor and be inserting slimbox images into a Static Content Item. The precedure is indentical with ordinary content and custom module.

• Login to the Joomla! Administration Control Panel
  
  Either, use the Administrator link on your mainmenu when you are logged into the Frontend of your website or use the direct web address of the Administrator Control Panel, www.yoursite.com/administrator. Enter the Administrator's Username and password.
  
  
• Navigate to the Static Content Manager
  
  Once you have logged in, hover over the Content link on the top taskbar, scroll down to Static Content Manager.
  
  
• The Static Content Manager
  
  When you have selected the Static Content Manager link, you will be sent to the Static Content Manager control panel. Select either Edit or New, depending on whether you want to add typography to an existing or new item.
  
  
• The Slimbox Commands
  
  To add slimbox galleries into your content, you must enter code the following into your Content editor. The image url is a relative URL. The relation is to the images/stories directory on your Joomla! install.
  
  {slimbox}image_url{/slimbox}
  The above refers to a single image being loaded by slimbox.
  
  {slimbox title=|your description|}image_url{/slimbox}
  The above refers to an image being loaded by slimbox with a title and a description.
  
  {slimbox album=|albumname|}image_url{/slimbox}
  The above refers to an image being loaded by slimbox in an album. For example, if 2 images had the same album and albumname, you would be able to navigate to it through the javascript window.
  
  
• The Examples
  
  For the examples of the slimbox command, all images are located within the directory images/stories/photos. If we wanted to load photo1.jpg by itself, we would enter:
  
  {slimbox}photos/photo1.jpg{/slimbox}
  
  
  
  If we wanted to load photo1.jpg, photo2.jpg and photo3.jpg as part of an album, we would use the following syntax:
  
  {slimbox photos=|photos|}photos/photo1.jpg{/slimbox}{slimbox photos=|photos|}photos/photo2.jpg{/slimbox}{slimbox photos=|photos|}photos/photo3.jpg{/slimbox}.
  
  Remember, if you place the slimbox tags next to one another, they will load side by side.
  
  
• Navigating to the Slimbox settings
  
  To change the settings, hover over Mambots on the top taskbar. This will highlight Site Mambots which you will select. You will then be taken to the Mambot Manager. You will notice the Mambot called, "RokSlimbox". Select the name to edit the bot.
  
  
• The Settings
  
  The following screenshot shows you the settings of the mambot. Thumbnail Extensions describes the name needed to create a manual thumbnail. In this case the extension is _thumb so a thumbnail for photo1.jpg is photo1_thumb.jpg. Thumbnail CSS class denotes the CSS name given to thumbnails in slimbox. Custom Thumbnail directory gives the option for a personal folder for thumbnails. The width, height and quality show the parameters of the thumb images themselves.
  
  
• The Thumbnails
  
  The latest RokSlimbox allows you to create your own thumbnails as well as the automated precedure witnessed in previous versions. You will create your own thumbnail image and install to the same directory as your slimbox image unless stated otherwise as in Step 6. Make sure the thumbnail image has the Thumbnail Extension has described in Step 6.