how i can integrate lightbox2 in the fckeditor

http://www.huddletogether.com/projects/lightbox2/

Mon, 03/24/2008 - 15:51

demphest

Joined: 24/03/2008

Posts: 3

Re: how i can integrate lightbox2 in the fckeditor

http://asten.ru/blog/programming/fckeditor-lightbox

Mon, 03/24/2008 - 17:23

war-dog

Joined: 23/03/2008

Posts: 11

Re: how i can integrate lightbox2 in the fckeditor

I managed to integrade the lightbox into FCK with this russian page.

So here is the translation:

1. Open with an editor the file: /fckeditor/dialog/fck_image.html
Insert following code into it, after the line 190:

<div> 
   <br /> 
   <label for="isLightBox" ><input type="checkbox" value="lightbox[]" id="isLightBox" />Lightbox gallery</label>
</div>

2. Open with an editor the file: /fckeditor/dialog/fck_image/fck_image.js
Replace following code into it, after the line 193:

   if ( oLink )
   {
      var sLinkUrl = oLink.getAttribute( '_fcksavedurl' ) ;
      if ( sLinkUrl == null )
         sLinkUrl = oLink.getAttribute('href',2) ;

      GetE('txtLnkUrl').value      = sLinkUrl ;
      GetE('cmbLnkTarget').value   = oLink.target ;
      // lightbox
      if (!oLink.rel || -1 == oLink.rel.indexOf('lightbox')) {
         GetE('isLightBox').checked = false;
      } else {
         GetE('isLightBox').checked = true;
      }
   }

3. Replace the code with this one:

   if ( sLnkUrl.length == 0 )
   {
      if ( oLink ) {
         FCK.ExecuteNamedCommand( 'Unlink' ) ;
         // lightbox
         if (-1 != oLink.rel.indexOf('lightbox')) {
            oLink.removeAttribute('rel');
         }
      }
   }
   else
   {
      if ( oLink )   // Modifying an existent link.
         oLink.href = sLnkUrl ;
      else         // Creating a new link.
      {
         dialog.Selection.EnsureSelection() ;
         
         if ( !bHasImage ) {
            oEditor.FCKSelection.SelectNode( oImage ) ;
         }
         oLink = oEditor.FCK.CreateLink( sLnkUrl )[0] ;
         if ( !bHasImage )
         {
            oEditor.FCKSelection.SelectNode( oLink ) ;
            oEditor.FCKSelection.Collapse( false ) ;
         }
      }

      SetAttribute( oLink, '_fcksavedurl', sLnkUrl ) ;
      SetAttribute( oLink, 'target', GetE('cmbLnkTarget').value ) ;
      // lightbox
      if (GetE('isLightBox').checked) {
         SetAttribute( oLink, 'rel', GetE('isLightBox').value ) ;
      } else {
         if (-1 != oLink.rel.indexOf('lightbox')) {
            oLink.removeAttribute('rel');
         }
      }
   }

That's it for the script part.

4. add into <head> of html :

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

That's it!

Tue, 03/25/2008 - 13:27

demphest

Joined: 24/03/2008

Posts: 3