This tutorial is incomplete - treat it with caution.
Tutorial: Making images reorderable
The Lightbox is a Fluid component designed to provide the ability to re-order images within a collection. Let's suppose you have some simple markup displaying a small collection of images. To use the Lightbox, your image thumbnails must each be within a
<div> element, and the collection of thumbnails must be contained within an element. A simple example of this could be:
<html> <head> <title>Image Collection</title> </head> <body> <div> <div><img src="img1.jpg"/></div> <div><img src="img2.jpg"/></div> <div><img src="img3.jpg"/></div> </div> </body> </html>
Step 1 - Include the Fluid component library
The first step is to include the Fluid component library code in your file. Do this by adding a script tag to the header referencing the
Step 2 - Add element IDs
The second step is to add IDs to the elements that the Lightbox needs to know about.
I know this seems a bit complex, but in the real world, these IDs will be generated by the server, and you won't have to write them by hand.
Step 3 - Add initialization script
The third step is to actually create the Lighbox by calling the initialization script. This initialization function has the form
Step 4 - Define styles
The final step is to create styles so that 'interesting moments' in the reordering of images are easily apparent to the user.