Вот наткнулса на статью Объединение CKEditor 3.6.3, prettyPhoto и AjexFileManager помоему для инстанта пригодилось бы, а так как я во всем етом мало розбираюсь то выкладываю ссылку на статью
Ссылка
P.P.S.
Посмотреть и поиграться можно тут http://arfiles.ru/habrahabr/
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 — Любой из последних
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
А можно уже готовые, отредактированные файлы получить!?
Сегодня в 12:25
#4
25 июня 2012 в 17:56
Если кто из мастеров возмеца тогда и получим файлы под инстант
А можно уже готовые, отредактированные файлы получить!?
Кстати сейчас на многих сайтах подключают галерею prettyPhoto к авторизации и регистрации очень красиво смотрица, нажал на регистрацию или авторизацию и страничка выплывает в prettyPhoto
а что не устраивает TinyMce + LightBox + Image Manager 1.1?
#7
27 июня 2012 в 11:46
крутая связка))) наверно Лайтбокс все таки?))LightAlloy
prettyPhoto намного функциональнее
#9
27 июня 2012 в 12:50
Например?prettyPhoto намного функциональнее
Сначала необходимо подключить к веб-страницы файл библиотеки jquery-1.3.2.js, файл плагина jquery.prettyPhoto.js и файл стилевого оформления плагина prettyPhoto.css.
Организация галереи (или галерей) почти не отличается от того, как это делается в LightBox.
Картинка-миниатюра заключена в тэг а, атрибут href которого указывает на соответствующее полноразмерное изображение. В атрибуте rel содержится ключевое слово – prettyPhoto. Чтобы создать несколько различных галерей на обной веб-странице, в атрибуте rel следует указать например – prettyPhoto[gallery_easy] для условной первой галереи, prettyPhoto[other_gallery] – для другой и так далее…
С помощью jQuery-кода создаем галерею. Используем настройки, установленные по умолчанию.
Опции, которые можно использовать для настройки 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() – с помощью этого метода можно закрыть галерею.
С помощью jQuery-кода создаем галерею. Используем настройки, установленные по умолчанию.
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 секунд», поэтому кто имеет желание, может в комментариях предлагать свои идеи по этому поводу.
Все примеры, использованные в этой статье, лежат в этом Архиве.
В общем эта галерея может удовлетворить наверное все потребности веб-мастеров. Кроме одной – слайд-шоу. Чтобы не было обидно, давайте попробуем немного доработать предыдущий пример. Мы дополнительно подключим плагин 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.
А в третьих с выводом в нем, мы теряем просмотры сайта. Также, как и во всех видах лайтбоксов. И вся эта чепуха больше вредит, чем дает удобство, что особенно чувствительно для сайтов, которые не имеют стабильной аудитории, а таковых тут 98%.