CKEditor + Lightbox?

I was looking long for the solution, then I found that you need to edit ckeditor source files a little bit.
So, this

http://www.chilipepperdesign.com/2010/01/08/adding-the-rel-and-title-att...

helped me a lot. Now I can insert an image in the middle of content, and it should appear in lightbox. One little problem, that you must insert an image (I use IMCE) and then go to link tab to write the link to that image, but it's a little problem.

I've found it works to create/edit the content using the CKEditor, embedding any images you want, and then just before submitting switch to "source mode" and just go through the raw html and add the rel="lightbox" fragment to the image markups. Making sure you are still in "source mode", hit the submit button and those changes are saved to the database.

The pain here is if you ever need to edit that content, you must do so in "source mode" because if you make edits in "rich text mode", your rel="lightbox" fragments will be removed upon submit.

At some point, maybe last spring, I traded emails with the CKEditor author and he said that logic respecting the lightbox attributes would be added. I've not checked, but perhaps they are no longer being stripped? One still needs to go into source mode to enter then anyway, so the only change adding support for them would be being able to return to rich text mode and not have the lightbox attributes removed.

I looked for it too, and I found it's as simple as adding custom CSS class in Lightbox2:

Lightbox2 > Automatic image handling > Custom class images

Drop down list:
Automatic handler for custom class images:
Lightbox

Custom image trigger classes:
MyNewClass

and this class you must enter in image settings window as a CSS class name

Hope I helped someone, for me this working well :)

edited 2011-02-04

Now I found easier way to use lightbox. Module "Image Resize Filter" can add rel="lightbox" to every image and it can automatically add link to thumbnail, to bigger image.

Yes, it's possible however I wouldn't recommend custom hacks on modules as doing this will become a maintenance headache as time goes on.

My example below uses the WYSIWYG module along with the CKEditor library. The exact modules were:

CKEditor 3.4.1
IMCE 6.x-2.1
IMCE Wysiwyg API bridge 6.x-1.1
Lightbox2 6.x-1.11
Wysiwyg 6.x-2.3

The goal was to place images into a page and when an image is clicked on, it opens a larger version in Lightbox. If there's a number of images on the page, they would be linked to each other via a static slideshow (i.e. using the prev and next Lightbox rollover controls to advance to the next image).

First, in the Lightbox2 configuration, select the Automatic Image Handling tab and at the bottom of that, open up Custom Class Images. For the 'Automatic handler for custom class images', select Lightbox Group and then write in one custom image trigger class in the box below (I used 'popup' as the class name).

Using IMCE, upload the original image (which gets scaled to the maximum set in the IMCE profile of 800 x 600 in my case). This would be the large lightbox image to be opened. Still within IMCE use the Resize feature (but not the preset Thumbs sizes, which can end up cropping images) to create a smaller image and select that to put into your page. In the Image Properties window > Image tab, write in a caption in the Alternative Text area. Then in the Link tab, select the original image as the one to link to. Lastly, in the Advanced tab, write in your custom class in the Stylesheet Class field. Click 'Ok' the window and save or preview the page.

The result was:
<a href="/sites/default/files/1/my-image-large.jpg" rel="lightbox[popup][mycaption]" class="lightbox-processed"><img style="width: 200px; height: 150px;" src="/sites/default/files/1/my-image-small.jpg" class="popup" alt="mycaption" title="mycaption"></a>

Voila! Two images are used, the rel attribute's values are written, the title and alt are taken care of. Clicking on one image in a series gives slideshow controls to go the next/prev slides. No hacks. There is a caveat to this however in that at present, images uploaded through IMCE will not allow the 'Download Original Image' link to show. The only way I've found to get this to work is unfortunately by a hack, found here: http://drupal.org/node/232649#comment-3496264. It would be great if these two lines mentioned in that post were integrated into Lightbox2 for Drupal.

Hope this info helps.

In CKEditor, Link . Select the Advanced tab and enterLightbox in the Relationship field.

Yes, it is very simple. I use Lightbox2 with CKEditor as follow:
1) From within CKEditor window (edit the node), right-click the image you have made in your node > choose Image button properties > copy the URL of the image
2) Click Link button on your CKEditor > paste the URL on to link info > click Advance Tab > type lightbox on the relationship > click OK
3) Save the node and done!
Hope this helps :)