Panel
Fighter
webmaster
+2 votes
Notice 92 views

Lightbox (Magnific Popup) supported

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.

image

related to an answer for: Degradation of resized image
by webmaster asked Oct 23, 2015 in Core

1 Comment

cool feature!

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Fighter
webmaster
0 votes

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 ...

image

by webmaster answered Oct 23, 2015
by webmaster edited Oct 23, 2015

1 Comment

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.

Please log in or register to add a comment.

Welcome to PowerQA. PowerQA is a new discussion software (not OSS). Here is a community for PowerQA developers. Current stable version is V1.8.6. It is enhanced day by day.

User ranking (month)

More ...

Statistics

  • 332 questions
  • 270 answers
  • 462 comments
  • 85 users

Post types

...