Lightbox2 - How to use with CCK Imagefield and Imagecache

Preparation

First ensure you have the following modules installed: CCK, CCK Imagefield, Imagecache, Lightbox2. You will also need to create some imagecache presets which you can do at /admin/build/imagecache. In addition to that you will need to create a custom content type using CCK at /admin/content/types/add and add an imagefield to it. Images uploaded via this imagefield are the ones you want to display in a lightbox. Let's call your custom content type "photo" for the purpose of this example.

CCK display options

After you have created your photo content type you will need to configure the "Display Field" options for the imagefield you added to it. To do this go to /admin/content/types/photo/display. Under the "Teaser" and "Full" drop-down selects, you will be able to choose from a number of options. These options include various Lightbox2 display choices. They can be broken down into three distinct groups:

Lightbox2 - this option will allow you to open the image in a lightbox. It can be grouped with other images on the node or ungrouped. The grouping is controlled by a setting on /admin/settings/lightbox2 which we will deal with later. Images which are grouped can be navigated through using "Previous" and "Next" buttons.
Lightbox2 slideshow - this option will also allow you to open the image in a lightbox. However, if there are other images on the node, e.g. like in a multi-value field, then the Lightbox2 module will automatically transition between them. A pause/play button is provided, along with "Previous" and "Next" buttons.
Lightbox2 iframe - when the image is clicked on, with this option enabled, the full node content is displayed in the lightbox rather than just the image. The layout of opened node page can be modified using a page-node-lightbox2.tpl.php file in your theme directory.

For each of the option groups, it's possible to choose which imagecache preset is displayed in the node teaser and full node page. With the exception of the iframe group, it's also possible to choose which imagecache preset is displayed in the lightbox itself. For example, if there was a display option like "Lightbox2: thumbnail -> original", then the thumbnail preset would appear on the page. When clicked on the original size image would be displayed in the lightbox.

Views

When creating a view which contains a CCK imagefield, it's possible to set how the image will be displayed in the view. This overrides the display options set on the content type configuration page. After adding your imagefield to a view, you will be able to choose from a number of display options, including the Lightbox2 display options discussed in the last section. Just select the appropriate one for your view.

If you want to have a link at the top of your view, e.g. "Start slideshow", which when clicked will automatically start the slideshow from the first displayed image, then see http://drupal.org/node/356103 for more details.

Views: Slideshow Thumbnails

If you have a field that allows multiple images, and you want to display JUST THE FIRST image as a thumbnail for the entire slideshow, make sure to set your field formatter to a 'compact' value.

Example formatter setting to show only the first thumbnail in a slideshow:
Your View > Fields > Format > Lightbox2 slideshow: [YOUR-IMAGECACHE-PRESET]->original compact)

If you have a field that allows multiple images, and you want to display ALL thumbnails, make sure to adjust your field formatter so it is NOT using 'compact'.

Example formatter setting to show all thumbnails, where each thumbnail links to a single slideshow.

Your View > Fields > Format > Lightbox2 slideshow: [YOUR-IMAGECACHE-PRESET]->original)

Lightbox2 Imagefield Grouping

On the main Lightbox2 settings page, /admin/settings/lightbox2, there is a "CCK Display Settings" collapsed fieldset. This fieldset only appears if you have the imagefield and imagecache modules installed. There is a "Select Imagefield Grouping in Views" option which allows you to control the lightbox2 grouping of imagefields. By default, imagefields in views are grouped by the field name they appear in the view in. You can override that grouping here, so you can group them by fieldname, node id or node id and field name. You can also disable grouping completely.