Lightbox?

You need to edit editor\dialog\fck_image.html (and the js under the fck_image folder)

Too late for RedPicasso, but I've just integrated lightbox into the image browser, so here's a blow by blow for anyone else who wants to do it. I'm using 'slimbox' , which claims to be 100% compatible with lightbox JS. Anyway, the deal is to have a link with the property rel="lightbox" to show off the lightbox effect and rel="lightbox[groupname]" to have the image as part of a group. The title property of the link is used for the text of the lightbox caption, so we provide a text box to enter that in too.

The user will simply upload the small image in the main image dialog box, and will then upload the large image that is going to be displayed in the lightbox in the link dialogue - here they will be able to set it as a lightbox link - either a standalone lightbox, or part of a group, and will be able to set a caption.

The two files concerned are: fckeditor/editor/dialog/fck_image.html, which displays the image dialogue box, and fckeditor/editor/dialog/fck_image/fck_image.js, which processes it.

The following (x)html will create a drop down selection box and text box for captions (i.e. set by the 'title' value in the link)
It goes straight after the div for creating the 'target options' (which I, in fact, removed - I don't want my users to have that option) at line 178 in the html file:

<div>
<span>Display Target Image in a Lightbox:</span><br />
<select id="cmbLightboxValue">
   <option value="" fcklang="DlgGenNotSet" selected="selected">&lt;not set&gt;</option>
   <option value="lightbox">Lightbox (not in a group)</option>
   <option value="lightbox[a]">Lightbox (group a)</option>
   <option value="lightbox[b]">Lightbox (group b)</option>
   <option value="lightbox[c]">Lightbox (group c)</option>
</select>
<div>
<div>
   <br /><span>Lightbox caption:</span><br />
   <input id="txtLightboxCaption" style="WIDTH: 70%" type="text" />
</div>

This only does English - you would need an fcklang property for every element and an equivalent value in every language.js file (i.e. en.js) to make this multilingual.
You then need to allow the .js file to process it - both to collect the data to populate the form with the existing details when it loads, and to update the editor with your chosen details when you submit the form.

First, underneath the 'GetE('cmbLnkTarget').value = oLink.target ;' line at line 189 we need:

GetE('cmbLightboxValue').value = oLink.rel ;
GetE('txtLightboxCaption').value = oLink.title ;

then, after the equivalent property setting line at line 263 we need to add:

SetAttribute( oLink, 'rel', GetE('cmbLightboxValue').value ) ;
SetAttribute( oLink, 'title', GetE('txtLightboxCaption').value ) ;

I then also added the line:

SetAttribute( oLink, 'class', 'imageLink' ) ;

to force a class of 'imageLink' to any link that was around an image, so that no-one has to think about setting a class for the link.

The javascript is very easy to read and amend - it would be easy (I am thinking of doing this) to create a similar dropdown box to set some basic image classes for your .css to reference (float left, right, dropshadow etc...). Also possible to amend the link pop up dialogue in the same way - if you wanted to reference the lightbox from a text link and not just from a thumbnail image.

wowwww!
It's works !!!
Many compliments!!!

richardmorgan

http://www.ludrao.net/home/node/8