CKEditor + jquery.fancybox / prototype.lightbox or a simple photo gallery option
The release of CKEditor 3.0.1 was released, so something needs to be added :)
I have already done a similar combination (if you can call it that) for the previous version, for the current one this is not at all difficult.
More precisely, directly when editing text, to make a link -> an image to open without reloading a large image, and for content placeholders it was easy and intuitive.
The essence of the method is quite simple, those who connected a fancybox or lightbox know that it is necessary to add to the link leading to a large image:
- for lightbox rel = "lightbox"
- for fancybox it doesn’t matter what it is, it doesn’t have a hard binding, therefore, at its discretion
Therefore, you need to add the ability to add the necessary attributes to ckeditor.
I decided to do the following because I wanted to control the situation more therefore:
- for single images in the class = "" added "gallery"
- for an array of isobarges, "gallerys" is added to the class = "" and + is complemented by the rel = "gallerys" attribute
Adding functionality is quite simple, take an unpacked file from [ckeditor / _source / plugins / image / dialogs / image.js] and replace it with the corresponding one in [ckeditor / plugins / ..]
We open and add the following code on stock 990 (at the time of writing) before the closing square bracket "]":
Now you need to add the appropriate translation according to the language, open for example [ckeditor / lang / ru.js] and simply add to the end of the file
Save and voila - done :)
')
As a result, when you insert an image in the Link tab (Link), a drop-down list will appear:
And of course to connect, do not forget to add the appropriate css / script to the head.
As for the work of the lightbox, then there are two options, either to change the work to add rel = "lightox" in the above code, or to tweak the original code a bit, which I chose, I don’t want to be dependent on the lightbox, so open lightbox.js ( 2.04) and change the line 191 to
(I see that the same thing :) so it was in the original, I don’t know what it is connected with, line 216 is changed to
That's all, fucked up here :)
Download modified js:
ckeditor / plugins / image / dialogs / image.js
lightbox.js
You can see here:
fancybox
lightbox
Click the [get html to look] button to display from the editor.
I have already done a similar combination (if you can call it that) for the previous version, for the current one this is not at all difficult.
More precisely, directly when editing text, to make a link -> an image to open without reloading a large image, and for content placeholders it was easy and intuitive.
The essence of the method is quite simple, those who connected a fancybox or lightbox know that it is necessary to add to the link leading to a large image:
- for lightbox rel = "lightbox"
- for fancybox it doesn’t matter what it is, it doesn’t have a hard binding, therefore, at its discretion
Therefore, you need to add the ability to add the necessary attributes to ckeditor.
I decided to do the following because I wanted to control the situation more therefore:
- for single images in the class = "" added "gallery"
- for an array of isobarges, "gallerys" is added to the class = "" and + is complemented by the rel = "gallerys" attribute
Adding functionality is quite simple, take an unpacked file from [ckeditor / _source / plugins / image / dialogs / image.js] and replace it with the corresponding one in [ckeditor / plugins / ..]
We open and add the following code on stock 990 (at the time of writing) before the closing square bracket "]":
,{<br/> id : 'toGallery' ,<br/> type : 'select' ,<br/> 'default' : '' ,<br/> style: 'margin-top: 15px' ,<br/> items :<br/> [<br/> [ editor.lang.gallery.notSet , '' ],<br/> [ editor.lang.gallery.single , 'gallery' ],<br/> [ editor.lang.gallery.many , 'gallerys' ],<br/> ],<br/> setup : function ( type, element ) {<br/> if ( type == LINK ) {<br/> var a = element.getAttribute( 'rel' );<br/> if ( null == a) {<br/> this .setValue(element.getAttribute( 'class' ));<br/> } else {<br/> this .setValue(element.getAttribute( 'rel' ));<br/> }<br/> }<br/> },<br/> commit : function (type, element) {<br/> if (type == LINK) {<br/> if ( this .getValue() || this .isChanged()) {<br/> if ( 'gallery' == this .getValue()) {<br/> element.setAttribute( 'class' , this .getValue());<br/> element.removeAttribute( 'rel' );<br/> } else {<br/> if ( '' == this .getValue()) {<br/> element.removeAttribute( 'class' , this .getValue());<br/> element.removeAttribute( 'rel' , this .getValue());<br/> } else {<br/> element.setAttribute( 'class' , this .getValue());<br/> element.setAttribute( 'rel' , this .getValue());<br/> }<br/> }<br/> }<br/> }<br/> }<br/>} <br/>Now you need to add the appropriate translation according to the language, open for example [ckeditor / lang / ru.js] and simply add to the end of the file
<br/>CKEDITOR.lang.ru.gallery = {notSet: ' ' , single: ' ' , many: ' ' };Save and voila - done :)
')
As a result, when you insert an image in the Link tab (Link), a drop-down list will appear:
And of course to connect, do not forget to add the appropriate css / script to the head.
As for the work of the lightbox, then there are two options, either to change the work to add rel = "lightox" in the above code, or to tweak the original code a bit, which I chose, I don’t want to be dependent on the lightbox, so open lightbox.js ( 2.04) and change the line 191 to
<br/> var target = event .findElement( 'a[class^=gallery]' ) || event .findElement( 'a[class^=gallery]' ); <br/>(I see that the same thing :) so it was in the original, I don’t know what it is connected with, line 216 is changed to
if ((imageLink.rel != 'gallerys' )){That's all, fucked up here :)
Download modified js:
ckeditor / plugins / image / dialogs / image.js
lightbox.js
You can see here:
fancybox
lightbox
Click the [get html to look] button to display from the editor.
Source: https://habr.com/ru/post/73172/
All Articles