...
| Section | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
Tutorial: Making images reorderable
The Lightbox Image Reorderer 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 LightboxImage Reorderer, 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 Image Reorderer needs to know about.
First, add an ID to the element that contains all of the image thumbnails. This ID can be anything unique. For this example, we'll use "image-collection":
...
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.
The Lightbox Image Reorderer pre-defines a number of class names that will be used for this purpose. It's possible, through the optional configuration, to override these class names, but for this example, we'll just define styles for the default class names.
The first style is the default style to be applied to any image thumbnail. For our example, we'll float the images so that they appear to be in a grid, and give them a background colour:
| Code Block | ||||
|---|---|---|---|---|
| ||||
.orderable-default{
background-color: #eee;
float: left;
}
|
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
.orderable-selected{
background-color: #ddd;
float: left;
}
|
The Lightbox Image Reorderer also supports mouse-based drag and drop, and another style is used when the cursor hovers over a thumbnail, to inform users that the thumbnail can be moved using the mouse. For our example, we'll change the background colour again, but we'll use a different colour:
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
.orderable-drop-marker{
height: 10px !important;
width: 4px;
background-color: red;
float: left;
}
|
That's it! Your Lightbox Image Reorderer is now functional, and you can rearrange the images in your collection. Congratulations!