| Section | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
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:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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 Fluid-all.js javascript file:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<head> <title>Image Collection</title> <script type="text/javascript" src="Fluid-all.js"></script> </head> |
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
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script type="text/javascript">
fluid.lightbox.createLightboxFromIds ("image-collection", { orderChangedCallback : function(){} });
</script>
|
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.
...