As the title suggests that is what I am attempting to do.

I have found this (see below):

Go to admin/settings/lightbox2/automatic
Click "custom class images"
With "Source" enabled in CKEditor, add for example the classname "lightbox" in the textbox (or whatever name you prefer).
Click "Save configuration"
When adding an image to a page make sure to add an URL to the image both under the "Image info" tab BUT ALSO under the "Link" tab!
Go to the "Advanced" tab and write "lightbox" (or whatever you called the classname above) in the "Stylesheet classes" box.
Done. When clicking on the image it should now show up in a lightbox!

http://www.rightinfonow.com/drupal-lightbox-ckeditior

------------------------------------------------------------------------------------
The above would work if I could automate / pre-fill the two items:

1) Same URL to the image under the "Image info" tab AND ALSO under the "Link" tab!
2) In "Advanced" tab "lightbox" in the "Stylesheet classes" box.

Any help with this would be appreciated !

Comments

dczepierga’s picture

dczepierga commented
Status: Active » Postponed (maintainer needs more info)

Hi,
U can write simple plugin to CKEditor which will only set this needed fields...
Tutorials to write sth like this u can found here: http://docs.cksource.com/CKEditor_3.x/Tutorials

If u have more questions pls write, i will try to help u :)

Greetings

rnexussix’s picture

rnexussix commented

dczepierga, thank you for your reply and the resource link. Unfortunately I am not a programmer, so I would not know where to begin with creating my own plug-in.

mkesicki’s picture

mkesicki commented

Here is explained, how to change default value for dialog field: http://docs.cksource.com/CKEditor_3.x/Howto/Default_Field_Values
Here is tutorial to writing basic plugin for CKEditor: http://docs.cksource.com/CKEditor_3.x/Tutorials/Timestamp_Plugin

rnexussix’s picture

rnexussix commented

Still trying to figure out which files to edit and which variables to change. Can some one help ?

PS
Come to think of it. This would of been a great feature to be included in the CKEditor Module i.e. "Enable Lightbox for CKFinder".

mkesicki’s picture

mkesicki commented

@rnexussix added new feature request ticket about this: #1698122: CKEditor and CKFinder Lightbox integration

mkesicki’s picture

mkesicki commented
Status: Postponed (maintainer needs more info) » Fixed

Please add:

CKEDITOR.on( 'dialogDefinition', function( ev )
	{
		// Take the dialog name and its definition from the event data.
		var dialogName = ev.data.name;
		var dialogDefinition = ev.data.definition;
 
		// Check if the definition is from the dialog window you are interested in (the "Image" dialog window).
		if ( dialogName == 'image' )
		{
			// Get a reference to the "Image Advanced" tab.
			var infoTab = dialogDefinition.getContents( 'advanced' );
 
		// Set the default value for the Css field.
			var cssField = infoTab.get( 'txtGenClass' );
			cssField['default'] = 'lightbox';
		}
	});

to ckeditor.config.js file. After saving lightbox class should be added to all images added by CKEditor + CKFinder.
If you have more problems with these , please reopen this ticket.

rnexussix’s picture

rnexussix commented
Status: Active » Fixed

Thank you michal_cksource,. We are almost there .
"lightbox" auto class addition works, but the URL field in the "Link" Tab doesn't get's auto-populated with the same URL as as the one in "Image Info" tab URL filed. Once I manually populate the "Link" tab's URL field (cut and paste same URL as in "ImageInfo", the Lightbox works. If this could be done automatically, we'd have a perfect solution.

rnexussix’s picture

rnexussix commented
Status: Fixed » Active
mkesicki’s picture

mkesicki commented

@mexussix,
please try this code:

CKEDITOR.on( 'dialogDefinition', function( ev )
{
		// Take the dialog name and its definition from the event data.
		var dialogName = ev.data.name;
		var dialogDefinition = ev.data.definition;
 
		// Check if the definition is from the dialog window you are interested in (the "Image" dialog window).
		if ( dialogName == 'image' )
		{
			// Get a reference to the "Image Advanced" tab.
			var infoTab = dialogDefinition.getContents( 'advanced' );
 
 			var cssField = infoTab.get( 'txtGenClass' );
			cssField['default'] = 'myLigthboxClass';
		
		
			var linkTab = dialogDefinition.getContents( 'info' );
		  var link = linkTab.get( 'txtUrl' );
		
			link['onChange'] = function(evt){
				var dialog = CKEDITOR.dialog.getCurrent();
				dialog.getContentElement('Link', 'txtUrl').setValue(dialog.getContentElement('info', 'txtUrl').getValue());
      } 
		}
});

If this doesn't help you , please reopen this ticket.

rnexussix’s picture

rnexussix commented

This worked ! Thank you !

mkesicki’s picture

mkesicki commented
Status: Fixed » Closed (fixed)
rnexussix’s picture

rnexussix commented
Status: Closed (fixed) » Active

michal,
Is it possible to set default "thumbnail" image dimensions (height and width) for the image that is being inserted (within the same script as above) ?

mkesicki’s picture

mkesicki commented

You can set default values as in (#9) for others fields. This should help you find id of tabs and fields in image dialog: http://nightly.ckeditor.com/7590/_samples/devtools.html.
You should use code similar to:

var infoTab = dialogDefinition.getContents( 'advanced' );
var cssField = infoTab.get( 'txtGenClass' );
cssField['default'] = 'myLigthboxClass';
rnexussix’s picture

rnexussix commented

I have inserted the following to test setting default image width, but the image width field still shows up empty.
What am I doing wrong ?

 // Set default values for Image attributes
 var infoTab = dialogDefinition.getContents( 'info' );
 var imgWidth = infoTab.get( 'txtWidth' );
 imgWidth['default'] = '250';
mkesicki’s picture

mkesicki commented
Status: Active » Fixed

Please try this:

 // Set default values for Image attributes
var infoTab = dialogDefinition.getContents( 'info' );
var imgWidth = infoTab.get('txtWidth');
imgWidth['default'] = '250';
rnexussix’s picture

rnexussix commented

That did not work (lightox code still works fine). Below is the code I inserted at the bottom of the ckeditor.config.js.
Any other ideas ?

CKEDITOR.on( 'dialogDefinition', function( ev )
{
                // Take the dialog name and its definition from the event data.
                var dialogName = ev.data.name;
                var dialogDefinition = ev.data.definition;

                // Check if the definition is from the dialog window you are interested in (the "Image" dialog window).
                if ( dialogName == 'image' )
                {
                        // Get a reference to the "Image Advanced" tab.
                        var infoTab = dialogDefinition.getContents( 'advanced' );

                        var cssField = infoTab.get( 'txtGenClass' );
                        cssField['default'] = 'lightbox';


                        var linkTab = dialogDefinition.getContents( 'info' );
                        var link = linkTab.get( 'txtUrl' );

                        link['onChange'] = function(evt){
                        var dialog = CKEDITOR.dialog.getCurrent();
                        dialog.getContentElement('Link', 'txtUrl').setValue(dialog.getContentElement('info', 'txtUrl').getValue());

                        // Set default values for Image attributes
                        var infoTab = dialogDefinition.getContents( 'info' );

                        var imgWidth = infoTab.get('txtWidth');
                        imgWidth['default'] = '250';
      }
                }
});
mkesicki’s picture

mkesicki commented

Please try this:

CKEDITOR.on( 'dialogDefinition', function( ev )
{
                // Take the dialog name and its definition from the event data.
                var dialogName = ev.data.name;
                var dialogDefinition = ev.data.definition;

                // Check if the definition is from the dialog window you are interested in (the "Image" dialog window).
                if ( dialogName == 'image' )
                {
                        // Get a reference to the "Image Advanced" tab.
                        var infoTab = dialogDefinition.getContents( 'advanced' );

                        var cssField = infoTab.get( 'txtGenClass' );
                        cssField['default'] = 'lightbox';


                        var linkTab = dialogDefinition.getContents( 'info' );
                        var link = linkTab.get( 'txtUrl' );

                        link['onChange'] = function(evt){
                        var dialog = CKEDITOR.dialog.getCurrent();
                        dialog.getContentElement('Link', 'txtUrl').setValue(dialog.getContentElement('info', 'txtUrl').getValue());

                        // Set default values for Image attributes
                        var infoTab = dialogDefinition.getContents( 'info' );

                        var imgWidth = infoTab.get('txtWidth');
                        dialog.getContentElement('info', 'txtWidth').setValue(250);
                        //imgWidth['default'] = '250';
      }
                }
});

now width is set after set/change image.

rnexussix’s picture

rnexussix commented

Thank you Michal. This worked !
Should I use the same syntax to set defaults for the rest of the image attribute fields (height, border, hspace vspace alignment) ?

mkesicki’s picture

mkesicki commented

You should use something like this:

var cssField = infoTab.get( 'txtGenClass' );
cssField['default'] = 'lightbox';

in code that is not in onChange event (or other events.)
Please use something similar to:

var imgWidth = infoTab.get('txtWidth');
dialog.getContentElement('info', 'txtWidth').setValue(250)

in event(s).
Hope this resolve rest of your problems (doubts).

dczepierga’s picture

dczepierga commented
Status: Fixed » Closed (works as designed)

I think @michal_cksource, write everything about it, so i closed this issue.
If u have more problem pls reopen this issue.

Greetings

dczepierga’s picture

dczepierga commented
Issue summary: View changes

Grammar and spelling