Question

PowerQA core supported automatic lightbox (Magnific Popup) in default. There are many similar (beautiful) lightbox plugin. However, since this plugin is the most stable, I was adopted this. Please check after clearing cache of your browser.

And, 2 options added in CKEditor4.

• Default image class (default): "responsive lightbox_inner"
• Display max width of uploaded images (default): "200" pix

Example:

  

Point:

• You will get light box effect by only uploading image with CKEditor.
• You can display high resolution images by changing "Maximum width of uploaded images (default:1000px, e.g. ==> 2000px, 3000px)".
• you can use light box in your custom page, too.

Comments

cool feature!

Answer 1

I found some bugs of CKEditor related my hack.

1. Aspect ratio button on image dialog become from "true" to "false"
2. We can not change size later

These seems to be the cause "Onchange" event process of image height ...

CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if(dialogName == 'image') {
var advancedTab = dialogDefinition.getContents('advanced');
var cssField = advancedTab.get('txtGenClass');
cssField['default'] = 'responsive lightbox_inner';
var infoTab = dialogDefinition.getContents('info');
var height = infoTab.get('txtHeight');
height['onChange'] = function(evt){
var dialog = CKEDITOR.dialog.getCurrent();
dialog.getContentElement('Link', 'txtUrl').setValue(dialog.getContentElement('info', 'txtUrl').getValue());
var imgWidth = dialog.getContentElement('info', 'txtWidth').getValue();
if(imgWidth > 200) {
dialog.getContentElement('info', 'txtWidth').setValue(200);
var ratio = 200 / imgWidth;
dialog.getContentElement('info', 'txtHeight').setValue(parseInt(dialog.getContentElement('info', 'txtHeight').getValue()*ratio));
}
}
}
});

Umm... this is difficult ...

Comments

1. Aspect ratio button on image dialog become from "true" to "false"
 This is a specification of CKEditor

2. We can not change size later
 This bug fixed.