Child pages
  • Tutorial - Image Reorderer

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Warning

This tutorial is incomplete - treat it with caution.

Section
Column
width40%

This page will walk the reader through the steps necessary to use the Lightbox component. For specific information about the Lightbox API, see Lightbox API.

Column
Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
titleLightbox: Making images reorderable
borderStylesolid
Table of Contents
minLevel3
maxLevel5

...

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

...