Lightbox in FCKeditor gebruiken

Inhoudsopgave


1. Intro
  1.1. Lightbox
  1.2. FCKeditor
2. Lightbox combineren met FCKeditor
  2.1. In het afbeeldingmemu
  2.2. In het linkmenu
3. Lightbox installeren
4. Problemen
  4.1. Ik zie de extra velden niet in mijn FCKeditor!
  4.2. Andere problemen
5. Lui of weinig tijd? Kijk hier!

1. Intro


1.1. Lightbox

Lightbox is een javascript welke toelaat om afbeeldingen over de huidige pagina te laten openen. Voorbeelden kan je bekijken op de Lightbox site.

1.2. FCKeditor

FCKeditor is een WYSIWYG editor, welke gebruik maakt van javascript. FCKeditor kan worden gebruikt voor een CMS of een blog.
Noot: We maken gebruik van FCKeditor 2.6.4.1

2. Lightbox combineren met FCKeditor


2.1. In het afbeeldingmemu

Om de gebruiker te laten kiezen of er gebruik van Lightbox gemaakt wordt bij een afbeelding of niet in zijn FCKeditor scherm moeten we het bestand fckeditor/editor/dialog/fck_image.html aanpassen:

Zoek het volgende (regel 180-182):
CODE
  1.  
  2. <div id="divLnkBrowseServer" align="right">
  3.         <input type="button" value="Browse Server" fcklang="DlgBtnBrowseServer" onclick="LnkBrowseServer();" />
  4. </div>
  5.  

Voeg toe daaronder:

CODE
  1.  
  2. <div>
  3.         <span fcklang="DlgLnkRel">Lightbox</span><br />
  4.         <select id="txtRel" />
  5.                 <option value="lightbox">Aan</option>
  6.                 <option value="">Uit</option>
  7.         </select><br />
  8. </div>
  9. <div>
  10.         <span fcklang="DlgLnkTitle">Titel:</span><br />
  11.         <input id="txtTitle" style="width: 100%" type="text" /><br />
  12. </div>
  13.  


We hebben nu 2 nieuwe velden in het Link menu gemaakt. Het eerste is een selectbox waar men kan aangeven of er gebruik gemaakt moet worden van Lightbox of niet, het 2de is een optionele titel die verschijnt als er afbeelding op het scherm staat.

Nu gaan we de verwerking van de link regelen. Open hiervoor het bestand fckeditor/editor/dialog/fck_image/fck_image.jf.

Zoek het volgende (regel 192-193):
CODE
  1.  
  2. GetE('txtLnkUrl').value  = sLinkUrl ;
  3. GetE('cmbLnkTarget').value      = oLink.target ;
  4.  


Voeg toe daaronder:
CODE
  1.  
  2. GetE('txtTitle').value = oLink.title;
  3. GetE('txtRel').value = oLink.rel;
  4.  


Zoek het volgende (regel 267-268):
CODE
  1.  
  2. SetAttribute( oLink, '_fcksavedurl', sLnkUrl ) ;
  3. SetAttribute( oLink, 'target', GetE('cmbLnkTarget').value ) ;
  4.  


Voeg toe daaronder:
CODE
  1.  
  2. SetAttribute( oLink, 'rel', GetE('txtRel').value);
  3. SetAttribute( oLink, 'title', GetE('txtTitle').value );
  4.  


Nu wordt er in de link naar de afbeelding rel="lightbox" gezet indien de gebruiker dit wil. De titel wordt ook aangevuld. Indien de gebruiker geen gebruik wenst te maken van Lightbox komt er gewoon rel="".

2.2. In het linkmenu

Het zou natuurlijk ook kunnen dat er tekst staat in plaats als een afbeelding als link. Ook hier is het mogelijk om Lightbox te gebruiken voor de afbeelding waartoe je linkt.
Hiervoor verander je het volgende:
- Open het bestand fckeditor/editor/dialog/fck_link.html
- Zoek het volgende (regel 63-65):
CODE
  1.  
  2. <div id="divBrowseServer">
  3. <input type="button" value="Browse Server" fckLang="DlgBtnBrowseServer" onclick="BrowseServer();" />
  4. </div>
  5.  


Voeg toe daaronder:
CODE
  1.  
  2. <div>
  3.         <span fcklang="DlgLnkRel">Afbeelding</span><br />
  4.         <select id="txtRel" />
  5.                 <option value="">Nee</option>
  6.                 <option value="lightbox">Ja</option>
  7.         </select><br />
  8. </div>
  9. <div>
  10.         <span fcklang="DlgLnkTitle">Afbeelding titel:</span><br />
  11.         <input id="txtTitle" style="width: 100%" type="text" /><br />
  12. </div>
  13.  


We hebben nu weer 2 velden gemaakt. Het eerste is een selectbox waar de gebruiker kan opgeven of hij naar een afbeelding linkt of niet, het 2de is de optionele titel.

Voor de verwerking veranderen we in het bestand fckeditor/editor/dialog/fck_link/fck_link.js het volgende:

Zoek volgende code (regel 477-478):
CODE
  1.  
  2. GetE('txtAttContentType').value = oLink.type ;
  3. GetE('txtAttCharSet').value          = oLink.charset ;
  4.  


Voeg toe daaronder:
CODE
  1.  
  2. GetE('txtTitle').value = oLink.title;
  3. GetE('txtRel').value = oLink.rel;
  4.  


Zoek volgende code (regel 771-772):
CODE
  1.  
  2. SetAttribute( oLink, 'type'          , GetE('txtAttContentType').value ) ;
  3. SetAttribute( oLink, 'charset'  , GetE('txtAttCharSet').value ) ;
  4.  


Voeg toe daaronder:
CODE
  1.  
  2. SetAttribute( oLink, 'rel', GetE('txtRel').value);
  3. SetAttribute( oLink, 'title', GetE('txtTitle').value );
  4.  


Ziezo, nu is het ook mogelijk om op een tekstje te klikken en Lightbox te activeren. Hoewel...

3. Lightbox installeren


Om Lightbox te kunnen gebruiken moeten we het natuurlijk eerst installeren.
Neem nu het volgende voorbeeld:

Ons bestand waar de tekst, van FCKeditor afkomstig, staat is pagina.html.
In diezelfde map staat ook een mapje "js", waar al onze javascript (dus ook Lightbox) in staat. We voegen in de head van onze pagina.html het volgende toe:
CODE
  1.  
  2. <script type="text/javascript" src="js/prototype.js"></script>
  3. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  4. <script type="text/javascript" src="js/lightbox.js"></script>
  5.  


Nu werkt onze Lightbox echter nog steeds niet. We moeten nog de CSS openen.
Stel dat al onze CSS (dus ook die van Lightbox) in een mapje "css" staat. Dan voegen we in onze head het volgende toe:
CODE
  1.  
  2. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  3.  


Ziezo, nu zou je als je op je afbeelding klikt een mooie Lightbox moeten zien

4. Problemen


4.1. Ik zie de extra velden niet in mijn FCKeditor!

Ikzelf had dit probleem ook. Dit komt omdat de FCKeditor venstertjes niet herladen werden. Het is echter zeer simpel op te lossen:
- Firefox: klik rechts in een veldje (zoals URL). Ga vervolgens naar dit deelvenster en klip op deelvenster vernieuwen
- Internet Explorer: Klik recht in het venstertje (niet in een veld!) en klik op vernieuwen

4.2. Andere problemen

Voor andere problemen kan je best in het forum terecht, daar deze problemen dikwijls hetzelfde effect hebben, maar een andere oorzaak. We zullen je echter steeds proberen te helpen!

5. Lui of weinig tijd? Kijk hier!


Moest je lui zijn, en bovenstaande stappen niet willen uitvoeren (of gewoon geen tijd hebben) dan bied ik hieronder de aangepaste bestanden aan. Je hoeft ze gewoon te overschrijven.

Bestandjes: f16d376ac3c4ea075816e2c9efca91bf.zip Dit artikel werd geschreven door Kilian op woensdag 12 augustus 2009 om 17:48 en werd sindsdien 12594 keer gelezen.
  • Pagina
  • 1 van 1

Geen reacties gevonden
Er werden nog geen reacties bij dit artikel geplaatst.
  • Indien je denkt iets te kunnen toevoegen aan het artikel, kan je zelf een reactie schrijven via de koppeling Plaats een reactie bij dit artikel hieronder.
  • Indien je andere commentaar (iets wat niet meteen functioneel bijdraagt aan het artikel zelf) hebt, kan je een bedankje formuleren via de koppeling Plaats een bedankje bij dit artikel hieronder.