Using Lightbox2 with TinyMCE or FCKEditor

Last updated January 8, 2010. Created by stella on April 28, 2008.
Edited by thaddeusmt, ari-meetai, ass45sin. Log in to edit this page.

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

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

Using TinyMCE

Go to the TinyMCE settings page (admin/settings/tinymce) and edit one of your created profiles.
On Buttons and plugins settings: make sure the advanced image and image checkboxes are checked.
On CSS settings, CSS classes: add the newly created class Lightbox2, using the = format. (i.e, trigger=triggerclass) then click "Update Profile".
Create your content and click on the image button on the TinyMCE toolbar,.
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.
On the Appearance tab, click on the Class pull down menu and choose the Lightbox2 trigger class (i.e. "triggerclass"), then click "Insert".
With the inserted image clicked, click the Insert/edit link on the TinyMCE toolbar.
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

Create your content, and on the FCKEditor toolbar click the image button.
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.)
On the Advanced tab, in the Stylesheet Classes textfield type in the Lightbox2 trigger class (i.e. "triggerclass"), then click OK.
With the inserted image clicked, click the Insert/Edit Link on the FCKEditor toolbar.
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

Comments

anyone else feel they need a "combobox" type input for FCKeditor

Posted by austintnacious on August 30, 2009 at 5:32am

So I've spent hours trying to work this out a.) because I'm sick of having to manually enter values into FCKeditor's dialogues to get IMCE uploaded images to work with lightbox and to allow easy default or selectable values for things like title="" style="" etc..

The idea being I want site editors to be able to do userfriendly stuff while I still want to be able to enter custom / raw values.

I'm not a programmer but this is what I've come up with, it's based on the patch referenced above (http://dev.fckeditor.net/attachment/ticket/2627/fck-rel.patch).
For Example, I want to present a drop down select list with default options for rel="[value1|value2|etc]" but I also want a plain text area that I can use to input my own value for rel="value3".

So looking at the patch referenced above in the first section [changes to ./editor/dialog/fck_link.html] I've altered the code for txtAttRel to present a drop down select list with a default empty value and a value for lightbox2. Then I've added another form input element which I've given id="txtAttRel2"

					<td valign="top">
							<span fckLang="DlgGenRel">Link Relationship</span><br />
							<select id="txtAttRel" style="WIDTH: 100%">
								<option value=""></option>
								<option value="lightbox2">lightbox2</option>
							</select>
							<input id="txtAttRel2" style="WIDTH: 100%" />
					</td>

In the first set of changes to the javascript which handles the form submission [./editor/dialog/fck_link/fck_link.js] rather than just adding a way for the javascript to capture the value of txtAttRel, I've added a second line to capture my additional value for txtAttRel2. See below. . .

	GetE('txtAttRel').value                 = oLink.rel ;
	GetE('txtAttRel2').value                 = oLink.rel ;

Then in the second set of changes I've added an if/else clause to set rel="" to the value of txtAttRel if txtAttRel is not empty.
If txtAttRel is empty then rel="" is set to the value of txtAttRel2

if(GetE('txtAttRel').value != '' )
			SetAttribute( oLink, 'rel'              , GetE('txtAttRel').value ) ;
		else
			SetAttribute( oLink, 'rel'              , GetE('txtAttRel2').value );

Makesense!?

I hope so! It seems to work and it allows me as the site admin to do more complex stuff with FCKeditor while still allowing for user-friendly dropdown selects for use by site editors / users.

Again, I'm not a programmer so this might not be the best way to achieve this but it's the best I could figure out.

How did you enter the code? I

Posted by rjperry on July 16, 2010 at 2:51pm

How did you enter the code? I am also not a programmer. Where should i insert the code you gave? Is there a certain line i should insert this at? Thank you for your patience.

Custom filter for all content image as lightbox

Posted by ledom on February 22, 2013 at 5:26pm

I did not find a solution to use lightbox2 on all image inserted with Insert module into wysiwyg.
So i wrote a custom filter with regex replacement.
If someone need this to, it can find it there: http://drupal.org/node/210555#comment-7098188