Page 1 of 1

Setting rel="lightbox" with editor

Posted: Fri May 08, 2009 10:15 am
by wosee
Is there a way to edit picture links for lightbox without editing the source? I know that slimbox is able to detect .gif, .png and .jpg automatically, but then slimbox isn't able to make the previous and next links at Holger's Svarrer's gallery. Moreover, IE6 seems to crash the server when you try to klick onto a image in the gallery with slimbox.

So is there a way to put a rel=" " to imagelinks with FCKeditor e.g.?

Re: Setting rel="lightbox" with editor

Posted: Sat May 09, 2009 6:32 pm
by wosee
+push+

No ideas?

Re: Setting rel="lightbox" with editor

Posted: Sun May 10, 2009 9:47 am
by Connie
Don't be so impatient ;)

Here is info from the SLIMBOX-"Hack" for FCKEditor which tells you what to do when you want to use Lightbox, this Hack was published for CMSMadeSimple but you can use it with CMSimple as well, I think.
You can find the files at this adress: http://dev.cmsmadesimple.org/project/files/301
You should download the zip, install the needed files and as described below, refer to them in the template:

lib/slimbox/js/mootools.js
lib/slimbox/js/mootools.js
lib/slimbox/js/slimbox.js
lib/slimbox/css/slimbox.css

in the CMSMadeSimple-Configuration, the files sit in the folder /lib
you can try to use that schema as well
To install this hack, just follow these few simple steps:
----[OPEN FILE: FCKeditor/editor/dialog/fck_image.html]------------------

----[FIND IN FILE]-------------

<div id="divLnkBrowseServer" align="right">
<input type="button" value="Browse Server" fcklang="DlgBtnBrowseServer" onClick="LnkBrowseServer();" />
</div>

----[ADD AFTER]----------------

<div>
<span fcklang="DlgLnkRel">Effect</span><br />
<select id="txtRel" />
<option value="">Nothing</option>
<option value="lightbox">Light Box</option>
</select><br />
</div>
<div>
<span fcklang="DlgLnkTitle">Title:</span><br />
<input id="txtTitle" style="width: 100%" type="text" /><br />
</div>

----[CLOSE FILE]----------------

----[OPEN FILE: FCKeditor/editor/dialog/fck_image/fck_image.js]----------

----[FIND IN FILE]--------------

GetE('cmbLnkTarget').value = oLink.target ;

----[ADD AFTER]-----------------

GetE('txtTitle').value = oLink.title;
GetE('txtRel').value = oLink.rel;

----[FIND IN FILE]---------------

SetAttribute( oLink, 'target', GetE('cmbLnkTarget').value ) ;

----[ADD AFTER]------------------

SetAttribute( oLink, 'rel', GetE('txtRel').value);
SetAttribute( oLink, 'title', GetE('txtTitle').value );

----[CLOSE ALL FILES]-------------

...


1. Open your template, add the following lines to the header

<script type="text/javascript" src="lib/slimbox/js/mootools.js"></script>
<script type="text/javascript" src="lib/slimbox/js/slimbox.js"></script>
<link rel="stylesheet" href="lib/slimbox/css/slimbox.css" type="text/css" media="screen" />

2. Copy the slimbox folder into your /lib/ folder on the server.
If it works. you should describe how to transfer it to a CMSimple-Installation in the CMSimple WIKI, I think you should as well contact the author. you can find him at forum.cmsmadesimple.org

cheers!

Re: Setting rel="lightbox" with editor

Posted: Sun May 10, 2009 10:53 am
by wosee
Nice one, it works fine. But there is not much to transfer, you can follow the instructions in your quote without any changes. Although I think you should integrate the ability to set a rel="" to pictures so everyone who likes to use a *box can put his code there.

Well, thickbox e.g. uses the class attribute and I still couldn't find out how multibox works, so I guess it won't be that useful...
Thanks for your help.

Re: Setting rel="lightbox" with editor

Posted: Sun May 10, 2009 11:53 am
by Connie
I am glad it works.

But:
Although I think you should integrate the ability
we are not the FCKEditor-Developers, go there and post your suggestion ;=)