Объединение CKEditor 3.6.3, prettyPhoto и AjexFileManager

#1 25 июня 2012 в 16:44
Вот наткнулса на статью Объединение CKEditor 3.6.3, prettyPhoto и AjexFileManager помоему для инстанта пригодилось бы, а так как я во всем етом мало розбираюсь то выкладываю ссылку на статью
Ссылка

P.P.S.
Посмотреть и поиграться можно тут http://arfiles.ru/habrahabr/
#2 25 июня 2012 в 16:49
CKEditor 3.6.3 — С помощью визуального редактора встроенного в сайт очень легко и удобно добавлять и редактировать различную информацию. Например его можно использовать в форме добавления комментариев или новостном блоке, не говоря уже о применении его в администраторском разделе.

prettyPhoto — Красивая фото галерея.

AjexFileManager — Файловый менеджер. В Нашем случае он будет грузить картинки.

При создании одного из сайтов я столкнулся со следующей проблемой: мне нужно было установить редактор текста, в панель администратора, с возможностью создания фото галереи. Поискав такое сочетание в интернете, я нашел «CKEditor 3.0.1 + lightbox». Посчитав версию CKEditor старой, а lightbox не таким красивым как prettyPhoto. Я решил сделать свою сборку.

Объединение CKEditor 3.6.3 и prettyPhoto

Для начала почитав статьи и разобравшись в каком месте нужно редактировать CKEditor, для добавления кода «спайки» галереи, я начал редактировать файл «image.js» располагающийся по пути: "\ckeditor\plugins\image\dialogs\image.js".
Но этот файл является сжатым, поэтому нам необходимо заменить его на не сжатый файл располагающийся в папке "\ckeditor\_source\plugins\image\dialogs".
Имея знания о соединении CKEditor 3.0.1 и lightbox, я недолго искал место редактирования скрипта.
В строке #1171 после "}" нужно дописать код:
,{
id:'cmbARFGallery',
type:'select',
label:editor.lang.ARFgallery.title,'default':'',
items:[
[editor.lang.common.notSet,''],
[editor.lang.ARFgallery.prettyPhoto1,'prettyPhoto[gallery1]'],
[editor.lang.ARFgallery.prettyPhoto2,'prettyPhoto[gallery2]'],
[editor.lang.ARFgallery.prettyPhoto3,'prettyPhoto[gallery3]'],
[editor.lang.ARFgallery.prettyPhotoOne,'prettyPhoto'],
],
setup:function(type,element) {
if(type==LINK) this.setValue(element.getAttribute('rel')||'')
},
commit:function(type,element) {
if(type==LINK){
if(this.getValue()||this.isChanged()) {
element.setAttribute('rel',this.getValue());
element.setAttribute('class','imgPrettyPhoto');
}
}
}
}


Дописав код, нам нужно дать каждому тегу своё имя для этого редактируем фил «ru» (\func\ckeditor\lang\).
Меняем самые последние символы
'}};

на

'},ARFgallery:{title:'Вид галереи',prettyPhoto1:'prettyPhoto 1',prettyPhoto2:'prettyPhoto 2',prettyPhoto3:'prettyPhoto 3',prettyPhotoOne:'prettyPhoto One'}};


Это самая простая часть, которая выполняется по простому плану.
1. Подгрузка скриптов. Нужно подгрузить:
<скрипт type="text/javascript" src="/ckeditor/ckeditor.js"></скрипт>
<скрипт type="text/javascript" src="/AjexFileManager/ajex.js"></скрипт>

2. После textarea дописываем:
<скрипт type="text/javascript">
var editor = CKEDITOR.replace('ID textarea');
AjexFileManager.init({returnTo: 'ckeditor', editor: editor});
</скрипт>

@ скрипт=script

3. Сохраняем и пользуемся.
Советы и пояснения

1. «prettyPhoto[gallery1]», «prettyPhoto[gallery2]», «prettyPhoto[gallery3]» — Три серии слайдов
2. Если нужно большее количество, то дописываем этот список по аналогии.
[editor.lang.ARFgallery.prettyPhoto1,'prettyPhoto[gallery1]'],
[editor.lang.ARFgallery.prettyPhoto2,'prettyPhoto[gallery2]'],
[editor.lang.ARFgallery.prettyPhoto3,'prettyPhoto[gallery3]'],
3. Советую не менять переменные, потому что могут перестать работать какие-либо другие функции. Из-за переменных у меня не работали «Таблицы» и «iFrame»

P.S.
CKEditor 3.6.3 и AjexFileManager Скачать можно тут http://narod.ru/disk/51807053001.a4afef46f820a00413d95807fa399293/func.rar.html
prettyPhoto — Любой из последних
#3 25 июня 2012 в 17:14
А можно уже готовые, отредактированные файлы получить!?
#4 25 июня 2012 в 17:56


А можно уже готовые, отредактированные файлы получить!?

Алфей
Если кто из мастеров возмеца тогда и получим файлы под инстант
#5 26 июня 2012 в 17:02
Кстати сейчас на многих сайтах подключают галерею prettyPhoto к авторизации и регистрации очень красиво смотрица, нажал на регистрацию или авторизацию и страничка выплывает в prettyPhoto
#6 27 июня 2012 в 09:22
а что не устраивает TinyMce + LightBox + Image Manager 1.1?
#7 27 июня 2012 в 11:46

LightAlloy

CozaNostra
крутая связка))) наверно Лайтбокс все таки?))
#8 27 июня 2012 в 11:47
prettyPhoto намного функциональнее
#9 27 июня 2012 в 12:50

prettyPhoto намного функциональнее

st.Puh
Например?
#10 27 июня 2012 в 14:33
Во-первых, этот плагин позволяет работать не только с фото. В области просмотра можно выводить видео с YouTube, ролики в формате .mov (Apple QuickTime), содержимое во flash-формате и наконец вообще любой контент через iframe. Во-вторых, этот плагин имеет свой API.
Демо
#11 27 июня 2012 в 14:39
Сначала необходимо подключить к веб-страницы файл библиотеки jquery-1.3.2.js, файл плагина jquery.prettyPhoto.js и файл стилевого оформления плагина prettyPhoto.css.
  1.  
  2. <link type="text/css" href="css/prettyPhoto.css" rel="stylesheet" />
  3. <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
  4. <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
Организация галереи (или галерей) почти не отличается от того, как это делается в LightBox.
  1.  
  2. <a rel="prettyPhoto[gallery_1]" href="max/1.jpg" title="Фото номер 1">
  3. <img src="min/1.jpg" alt="Фото номер 1" />
  4. </a>
Картинка-миниатюра заключена в тэг а, атрибут href которого указывает на соответствующее полноразмерное изображение. В атрибуте rel содержится ключевое слово – prettyPhoto. Чтобы создать несколько различных галерей на обной веб-странице, в атрибуте rel следует указать например – prettyPhoto[gallery_easy] для условной первой галереи, prettyPhoto[other_gallery] – для другой и так далее…

С помощью jQuery-кода создаем галерею. Используем настройки, установленные по умолчанию.
  1. $(function(){
  2. $("a[rel^='prettyPhoto']").prettyPhoto();
  3. });
Опции, которые можно использовать для настройки prettyPhoto:
animationSpeed – по умолчанию ‘normal’. Другие возможные значения – ‘fast’ и ’slow’. Скорость анимации изменения размеров окна просмотра при переходе от одного изображения к другому.
padding – по умолчанию 40. Число, опредяляющее отступы вокруг изображения.
opacity – по умолчанию 0.80, прозрачность промежуточного слоя. Изменяется от 0 до 1.
showTitle – по умолчанию true. Заголовок (содержимое атрибута title тэга а), который отображается в левом верхнем углу над областью просмотра. Чтобы отключить надо использовать значение false.
allowresize – по умолчанию true. По умолчанию полноразмерное изображение масштабируется, если ему не хватает места для отображения в полном размере. Можно отменить это поведение, передав false.
counter_separator_label – по умолчанию ‘/’. Разделитель в счетчика изображений галереи.
theme – по умолчанию ‘light_rounded’. Да! Плагин поддерживает несколько тем оформления. Кроме light_rounded возможны также dark_rounded, light_square, dark_square. Вот только для IE6 принудительно используется тема light_square (светлый фон и нескругленные углы).
hideflash – по умолчанию false. Скрывает все flash-объекты на странице при просмотре галереи, чтобы они не отображались поверх. Если этого не требуется, можно установить значение true.
modal – по умолчанию false. Если установить true, будет использоваться модальный режим, т.е. завершить просмотр галереи можно будет только нажатием на картинку ‘close’.

Еще две полезные опции, в которых можно определить callback-функции, вызываемые при наступлении определенного события.
changepicturecallback – функция, определенная в этой опции, будет вызываться каждый раз при смене изображения галереи.
callback – функция, определенная в этой опции, будет вызываться при завершении просмотра.

Плюс ко всем этим полезным опциям, плагин предоставляет четыре метода.

$.prettyPhoto.open(‘path/to/image’,'Title’,'Description’) – метод позволяет открыть нужную галерею. Пример будет чуть позже.
$.prettyPhoto.changePage(‘next’) – с помощью этого метода можно осуществить переход к следующему изображению галереи.
$.prettyPhoto.changePage(‘previous’) – с помощью этого метода можно осуществить переход к предыдущему изображению галереи.
$.prettyPhoto.close() – с помощью этого метода можно закрыть галерею.
#12 27 июня 2012 в 14:43
Самый большой интерес наверняка вызовет метод, с помощью которого можно открыть галерею практически как угодно и откуда угодно. Поэтому смотрим Демо. Код там настолько несложный и понятный даже интуитивно, что не стоит его и комментировать.
В общем эта галерея может удовлетворить наверное все потребности веб-мастеров. Кроме одной – слайд-шоу. Чтобы не было обидно, давайте попробуем немного доработать предыдущий пример. Мы дополнительно подключим плагин jquery.timers.js и воспользуемся тем фактом, что в опциях changepicturecallback и callback можно определить функции. В html-разметке добавим select, откуда можно будет выбирать значения задержки при смене изображений. Что из этого получилось, смотрите Демо, там же можно посмотреть и исходный код.
В опции changepicturecallback, пользуясь возможностями плагина jQuery Timers, при смене изображений каждый раз запускаем одноразовый таймер со значением, полученным из выбранной опции в селекте. По срабатыванию таймера вызываем метод $.prettyPhoto.changePage(‘next’) заставляя плагин показывать следующее изображение. В опции callback определяем функцию, которая останавливает таймер, если галерея была закрыта и заодно, с помощью alert благодарим за просмотр.

На самом деле такое решение небезгрешно, но зато сделано «на колене в 5 секунд», поэтому кто имеет желание, может в комментариях предлагать свои идеи по этому поводу.
Все примеры, использованные в этой статье, лежат в этом Архиве.
#13 27 июня 2012 в 15:56
Это все хорошо, но в системе есть NyroModal еще)))
#14 27 июня 2012 в 16:07

Во-первых, этот плагин позволяет работать не только с фото. В области просмотра можно выводить видео с YouTube, ролики в формате .mov (Apple QuickTime), содержимое во flash-формате и наконец вообще любой контент через iframe. Во-вторых, этот плагин имеет свой API.

st.Puh

А в третьих с выводом в нем, мы теряем просмотры сайта. Также, как и во всех видах лайтбоксов. И вся эта чепуха больше вредит, чем дает удобство, что особенно чувствительно для сайтов, которые не имеют стабильной аудитории, а таковых тут 98%.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.