Including Galleries with Lightbox

Lightbox is a utility that allows users to browse your images as a slideshow on top of your web page. Currently, we use it to display images of student work. Take a look at the gallery of Adam Rust's work for an example. Using the Gallery application and a small amount of code in Serena, you can easily put a Lightbox gallery on your page. Here's how:

If you don't already have an account on Gallery, contact the Webmaster for an account.
Log in to your account and click the "Add Album" link.
Fill in the details about your album. Remember the name attribute you give your album. You'll need it later.

NOTE: The 'name' attribute is different than the 'title' attribute. The 'name' is the unique id given to each album and only accepts alphanumeric characters, underscores or dashes.
After you've created your album, click on "Add Items".

Uploading photos to the Gallery application can happen one of two ways: Upload photo files individually or zipping up your photos and uploading the .zip file.

Gallery will only accept photo or zip files that are under 2Mb in size with a maximum of 28Mb total size per upload.
Once your files are uploaded, Open Collage and add the following to the source code of a page:
```
<cmignore>
  <?php
    include_once("Lightbox.php");
    buildLightboxGallery('GALLERY_NAME', N_COLUMNS, N_SCALE_THUMBNAILS, N_IMAGE_CSS);
  ?>
</cmignore>
```
Replace GALLERY_NAME with the name of the gallery you created.

Replace N_COLUMNS with the number of columns of thumbnail images you want displayed. This parameter is optional and defaults to 3 columns.

Replace N_SCALE_THUMBNAILS with the percentage of which you need to scale the thumbnail images. For example, if the thumbnail images are too large, you can scale them to 75% of their full size by replacing N_SCALE_THUMBNAILS with 75. This parameter is optional and defaults to 100% (150px wide/tall).

Replace N_IMAGE_CSS with an array of css selector/value pairs. See the example below for the proper syntax. This parameter is optional and defaults to no value.
Once you've added the above code to the source, you can use the Preview link to see what the page will look like. Once you've adjusted the code to your liking, be sure to approve the page so it will go live.

Simple example:

<cmignore>
  <?php
    include_once("Lightbox.php");
    buildLightboxGallery('Ania_Greiner', 4);
  ?>
</cmignore>

Full Featured Example:

<cmignore>
  <?php
    include_once("Lightbox.php");
    buildLightboxGallery('Ania_Greiner', 4, 50, array('border'=>'1px dashed #888', 'padding'=>'4px', 'margin'=>'10px'));
  ?>
</cmignore>

Produces the following result: