it-ep logo
На главную страницуmail to site administrationДобавить страницу в Избранное
Вход | Регистрация
Вход
 
 
Напомнить логин / пароль Отмена
 Главнaя»База знаний»javascript jquery

Последние статьи

../../../knowledge_base/javascript_jquery_ajax/ckeditor_jquery_lightbox_gallary/Загрузка...

Популярные статьи

Фотогалерея CKEditor + jquery lightbox

Данная статья посвящена использованию редактора CKEditor и созданию галереи изображений (картинок, фото) с применением плагина jquery lightbox. На момент написания статьи актуальная версия CKEditor 3.6.3

Принцип работы плагина lightbox состоит в том, что на большое изображение должна быть ссылка, а в ссылке должен присудствовать тег rel. Например:

<a class="gallerys" rel="gallerys" href="http://yourdomain.ru/big-image.jpg">
      <img src="http://yourdomain.ru/small-image.jpg">
</a>

В fancybox нет жёсткой привязки к тегам, поэтому можно указывать на своё усмотрение.

Проблема заключается в том, что в CKEditor нет возможности добавлять тег rel к ссылке на изображение. Поэтому внесём в редактор необходимые изменения.

Задача: добавить в CKEditor 3 варианта настройки ссылки на изображение, а именно:

  1. Не использовать плагин lightbox.
  2. Использовать lightbox для одиночных изображений (без галереи). Будем добавлять в class="" значение "gallery".
  3. Использовать lightbox для группы изображений (картиной, фото), т.е.создать галерею. Для этого в class="" добавим значение "gallerys", а также аттрибут rel="gallerys".

Для решения данной задачи необходимо внести изменения в файл [ckeditor/plugins/image/dialogs/image.js]. Открываем указанный файл, ищем код селектора cmbTarget, и после описания этого селектора добавляем код селектора типа галереи для изображения. В версии CKEditor 3.6.3 это строка нормер 1172, перед закрывающей скобкой ] вставляем свой код:

  1. ,
  2. {
  3.   id : 'toGallery',
  4.   type : 'select',
  5.   'default' : '';,
  6.   style: 'margin-top: 15px';,
  7.   items:
  8.   [
  9.       [ editor.lang.gallery.notSet, ''],
  10.       [ editor.lang.gallery.single, 'gallery'],
  11.       [ editor.lang.gallery.many, 'gallerys'],
  12.   ],
  13.   setup : function( type, element ) {
  14.   if ( type == LINK ) {
  15.       var a = element.getAttribute('rel');
  16.       if (null == a) {
  17.           this.setValue(element.getAttribute('class'));
  18.           } else {
  19.               this.setValue(element.getAttribute('rel'));
  20.           }
  21.       }
  22.   },
  23.   commit : function(type, element) {
  24.   if (type == LINK) {
  25.       if ( this.getValue() || this.isChanged()) {
  26.           if ('gallery' == this.getValue()) {
  27.               element.setAttribute('class', this.getValue());
  28.               element.removeAttribute('rel');
  29.           } else {
  30.               if ('' == this.getValue()) {
  31.                   element.removeAttribute('class', this.getValue());
  32.                   element.removeAttribute('rel', this.getValue());
  33.               } else {
  34.                   element.setAttribute('class', this.getValue());
  35.                   element.setAttribute('rel', this.getValue());
  36.                   }
  37.               }
  38.           }
  39.       }
  40.   }
  41. }

Теперь необходимо внести изменения в языковой файл в соотвествии я языком. Например еслы вы используете CKEditor на русском,то в конец файла необходимо добавить строку:

  1. KEDITOR.lang.ru.gallery = {notSet: 'Не использовать галерею', single: 'Сделать одиночное открытие', many: 'Сделать список галлерей'};

Сохраняем файлы. Готово! Теперрь можно проверять, запустим CKEditor и добавим в текст картинку:

CKEditor image add

В head страницы не забудем подключить скрипт lightbox и CSS:

  1. <script type="text/javascript" src="js/jquery.lightbox.js"></script>
  2. <link rel="stylesheet"         type="text/css" href="css/jquery.lightbox.css" />

И в завершении для корректной связи CKEditor и lightbox необходимо либо внести изменения в приведённый выше код для добавления rel="lightox", либо изменить файл самого lightbox.

2й вариант проще. Откроем файл lightbox.js и вносим изменения. Для версии 2.04 это строка 191:

  1. var target = event.findElement('a[class^=gallery]') || event.findElement('a[class^=gallery]');

Далее по тексту видим строку 216 в которую тоже надо внести изменения:

  1. if ((imageLink.rel != 'gallerys')){

Настройка редактора и плагина закончена! Теперь можно очень просто создавать галереи через CKEditor.

Вариант фотогалереи, приведённый в сатье проверен на браузерах Firefox, Chrome, IE.

Сам редактор с изменённымы файлами, а также lightbox можно скачать ниже

Облако тегов CKEditor jQuery Lightbox галерея


Комментарии



Печать страницы: Фотогалерея CKEditor + jquery lightbox Добавить +1 и поделиться в Google+: Фотогалерея CKEditor + jquery lightbox Добавить в Яндекс.Закладки: Фотогалерея CKEditor + jquery lightbox Поделиться в Facebook: Фотогалерея CKEditor + jquery lightbox Поделиться В Контакте: Фотогалерея CKEditor + jquery lightbox Поделиться в Одноклассниках: Фотогалерея CKEditor + jquery lightbox Поделиться в Твиттере: Фотогалерея CKEditor + jquery lightbox