...
| 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.
...