Using Lightbox2 with TinyMCE or FCKEditor

You can easily use Lightbox2 on anchored images inserted by TinyMCE or FCKEditor, by using the "custom image trigger classes" feature.

Note that IMCE may also be used.

Lightbox2 Setting

1. Go to the Lightbox2 Automatic image handling settings page (admin/settings/lightbox2/automatic).
2. Choose the appropriate Lightbox2 image handler from the drop-down list, e.g. 'Lightbox', 'Lightbox grouped', 'Slideshow', etc.
3. In the Custom image trigger classes textarea, add a new class that will be used to trigger the Lightbox (e.g. "triggerclass")
4. Click "Save Configuration". Note: This feature is not available when using Lightbox2 Lite.

Using TinyMCE

1. Go to the TinyMCE settings page (admin/settings/tinymce) and edit one of your created profiles.
2. On Buttons and plugins settings: make sure the advanced image and image checkboxes are checked.
3. On CSS settings, CSS classes: add the newly created class Lightbox2, using the = format. (i.e, trigger=triggerclass) then click "Update Profile".
4. Create your content and click on the image button on the TinyMCE toolbar,.
5. In the Insert/edit image window on the General tab, click on "browse" and insert a thumbnail image. You may also want to set an image description as it will be the caption for image.
6. On the Appearance tab, click on the Class pull down menu and choose the Lightbox2 trigger class (i.e. "triggerclass"), then click "Insert".
7. With the inserted image clicked, click the Insert/edit link on the TinyMCE toolbar.
8. On the Insert/edit link window, browse for the bigger image and click on "Insert", continue creating / editing your content and save it.

Using FCKEditor

1. Create your content, and on the FCKEditor toolbar click the image button.
2. In the Image Properties window, Image info tab, click "browse" and insert a thumbnail image. (You would also want to type in the Alternative text: as it will be the caption for image.)
3. On the Advanced tab, in the Stylesheet Classes textfield type in the Lightbox2 trigger class (i.e. "triggerclass"), then click OK.
4. With the inserted image clicked, click the Insert/Edit Link on the FCKEditor toolbar.
5. In the Insert/edit link window, browse for the bigger image and click on "Insert", continue creating / editing your content and save it.

There is a patch for FCKeditor queue to allow configuration of the rel attribute on links, see http://dev.fckeditor.net/attachment/ticket/2627/fck-rel.patch

Here is an unofficial hack for the new CKEditor to also allow configuration of the rel attribute on links: http://www.chilipepperdesign.com/2010/01/08/adding-the-rel-and-title-att...

For more advanced integration of FCKEditor, IMCE and Lightbox2, check out this article: http://drupal.org/node/314566