Lightbox Integration Tutorial - v0.3

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

Lightbox: Making images reorderable

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. The Lightbox component includes an HTML template that looks like this:

<html>
  <head>
    <title>Fluid Lightbox</title>
    <script type="text/javascript" src="Fluid-all.js"></script>
  </head>

  <body>

    <form id="reorder-form">

      <div rsf:id="lightbox:" id="lightbox-parent" >
        <div rsf:id="lightbox-temp-container:" id="gallery:::gallery-thumbs:::" class="image-container" tabindex="2">

          <!-- the following div is repeated for each image -->
          <div rsf:id="lightbox-cell:" id="gallery:::gallery-thumbs:::lightbox-cell:0:">
            <div rsf:id="lightbox-client-cell:">
              <div class="image-inner-container">
                <a id="focus-element1" href="Dragonfruit.jpg">
                  <img id="fluid.img.first" src="Dragonfruit.jpg" alt="Dragonfruit"/>
                </a>
              </div>
              <div class="image-title">
                <a href="Dragonfruit.jpg">Dragonfruit</a>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- this script attaches the Lightbox functionality -->
      <script type="text/javascript"  rsf:id="init-script">
        fluid.lightbox.createLightboxFromId ("gallery:::gallery-thumbs:::");
      </script>

    </form>

  </body>
</html>

Let's have a look at this template in more detail:

Fluid Components

Community

Other Fluid Projects

More Information

Page Operations

Browse Space

Tutorial: Making images reorderable