Разработка сайтов на UMI.CMS
Знать UMI.CMS в совершенстве невозможно.
Даже сами разработчики знают о ней не все...

UMi

Ursa Minor

Лайтбокс в UMI.CMS

Периодически возникает желание иметь возможность делать из картинок, добавляемых в визуальный редактор, галереи типа лайтбокса.

В движке, который я использую на своем сайте, такая возможность есть, и на картинке ниже можно посмотреть как это работает. Попробовал перенести код на umi.cms. Сразу предупреждаю: код сырой. При переносе все стало работать совсем не так гладко. Почему так получилось - не понял, возможно, из-за различия в версиях редактора или используемых темах. Просто доводить его сейчас до ума времени нет, и потребности нет, но если кто-то, на основе, сделает его полностью рабочим, будет здорово.

Архив с  лайтбоксом

Архив содержит папку images. Ее следует поместить в /js/tinymce/jscripts/tiny_mce/plugins

Файл image.php содержит форму с полями, js/image.js - скрипт-обработчик

В файле конфигурации редактора /js/tinymce/jscripts/tiny_mce/tinymce_defs.js подключить плагин:

...
plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink, emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print, contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking, xhtmlxtras,template,imagemanager,images",

.........

toolbar_standart : "imagemanager,fontsettings,tablesettings,|,"
+"cut,copy,paste,|,pastetext,pasteword,|,selectall,cleanup,|,"
+ "undo,redo,|,"
+ "link,unlink,anchor,image,media,|,"
+ "charmap,code,|,images",

 

В верхнем ряду справа панели инструментов появится новая иконка, сходная с кнопкой "изображение".

По клинку не нее откроется окно, содержаещее поле для выбора изображения, всякая мура с выравниванием, и, самое главное, чекбокс "создать миниатюру" с двумя полями для указания ширины и высоты, и чекбокс "создать галерею"

 

 

Изображение с лайтбоксом

Изображение выбирается встроенным файл-менеджером umi.cms. Здесь первый косяк - файл-менеджер почему-то не закрывается автоматически

 

Чтобы создать превью, установить соответствующий чекбокс и указать желаемые размеры. Достаточно задать один размер, второй в этом случае примет значение 'auto'. В строке пути можно наблюдать изменение пути к файлу. Для автогенерации превью нужно указать путь как картинке в виде /autothumbs.php?img=исходный_путь_к_картинке. Все, превью готово.

Чекбокс  "создать галерею" оборачивает картинку в ссылку с атриботом rel="имя_галереи'. Изменить имя по-умолчанию можно в image.php. К сожалению, здесь второй косяк - ссылка добавляется только если изображения редактируется. Т.е., надо сперва добавить картинку, создать миниатюру, вставить в редактор, закрыв окно плагина. Затем снова открыть окно и включить галерею.

 

Кратко пробежимся по файлам.

В image.php описывать нечего, там просто форма.

В image.js интерес представляют след. методы: ImageProp,  autothumb, updateA

ImageProp - вспомогательный метод, который распарсивает путь к файлу с изображением

    ImageProp: function(src){
        var ImageProp = new Object();
        //проверяем, есть ли уже ссылка на автоэскиз
        var re = new RegExp('^(/autothumbs.php)(.*)','i');
        var result = re.exec(src);

        if(RegExp.$1){//эскиз уже есть
            var src = this.getParam('img', RegExp.$2);//получаем значение параметра img
            
            var ext_pos = src.lastIndexOf('.');//получаем расширение картинки
            var ext = src.slice(ext_pos);            
            
            var path_pos = src.lastIndexOf('/');//выбираем весь путь до последнего слеша
            var filename = src.slice(path_pos,ext_pos).substring(1);//выбираем имя файла
            
            var path = src.slice(0,path_pos+1);//путь к файлу
            
            re = new RegExp('^(.+)_([^_]+)_([^_]+)','i');//разобрать имя на составляющие: исходное имя и размеры
            result = re.exec(filename);
            if(!result)alert("Непредвиденная ошибка " + filename + ' ' + ext);
            ImageProp.auto = true;
            ImageProp.width = RegExp.$2;
            ImageProp.height = RegExp.$3;
            ImageProp.ext = ext;
            ImageProp.img_name = RegExp.$1;
            ImageProp.path = path;
            ImageProp.path2 = src;    
            
        }
        else{
            ImageProp.auto = false;
            
            var ext_pos = src.lastIndexOf('.');
            var ext = src.slice(ext_pos);
            
            var path_pos = src.lastIndexOf('/');
            var filename = src.slice(path_pos,ext_pos).substring(1);
            var path = src.slice(0,path_pos+1);
            ImageProp.width = '';
            ImageProp.height = '';
            ImageProp.ext = ext;
            ImageProp.img_name = filename;
            ImageProp.path = path;
            ImageProp.path2 = src;
            
        }

        ImageProp.src = src;
    
        return ImageProp;
        
    },

autothumb - формирует путь к файлу автоэскиза

    autothumb: function(){

            var f = document.forms[0];
            v = f.autothumb.value;
            if(v){//если установлен флаг создать автопревью
                
                var src = f.src.value;//получаем начальные параметры, первый раз  их заносит сам tinyMCE при открытии окна
                var w = f.at_width.value;
                var h = f.at_height.value;
                w = parseInt(w);
                h = parseInt(h);
                if(!w && !h) return;
                if(!w) w = 'auto';
                if(!h) h = 'auto';
                
                if(typeof this.myImage == 'undefined'){//разбираем имя файла на составляющие. Это делается только один раз, потом работаем с уже созданным объектом, потому что имя файла будет меняться при вводе размеров превью.
                    this.myImage = this.ImageProp(src);
                }
                var myImage = this.myImage;
                var new_src = myImage.path + myImage.img_name + '_' + w + '_' + h + myImage.ext;
                
                if(!myImage.auto){//еще нет эскиза
                    var new_src = '/autothumbs.php?img='+new_src;
                }
                else{
                    var new_src = '/autothumbs.php?img='+new_src;
                }
                f.src.value = new_src;
                this.getImageData();
                f.width.value = '';
                f.height.value = '';
            }
    }

updateA - создает ссылку

        updateA : function() {

        var f = document.forms[0], ed = tinyMCEPopup.editor, e, b;
        tinyMCEPopup.restoreSelection();
        e = ed.dom.getParent(ed.selection.getNode(), 'A');//смотрим, есть ли уже ссылка вокруг изображения

        var src = f.src.value;
        if(!src || src == 'undefined') return;
        tinyMCEPopup.execCommand("mceBeginUndoLevel");
        
        if(typeof(this.myImage) == "undefined"){
            var myImage = this.ImageProp(src);
        }
        else var myImage = this.myImage;
        var href = myImage.path + myImage.img_name + myImage.ext;//путь к полноразмерному изображению
        // Create new anchor elements
        if (e == null) {
            ed.getDoc().execCommand("unlink", false, null);
            tinyMCEPopup.execCommand("CreateLink", false, "#mce_temp_url#", {skip_undo : 1});
            tinymce.each(ed.dom.select("a"), function(n) {
                if (ed.dom.getAttrib(n, 'href') == '#mce_temp_url#') {
                    e = n;
                    ed.dom.setAttribs(e, {
                        href : href,
                        'class' : 'lightbox-enabled',
                        rel : f.at_milkbox.value
                    });
                }
            });
        } else {
            ed.dom.setAttribs(e, {
                href : href,
                'class' : 'lightbox-enabled',
                rel : f.at_milkbox.value
            });
        }

        // Don't move caret if selection was image
        if(e){
            if (e.childNodes.length != 1 || e.firstChild.nodeName != 'IMG') {
                ed.focus();
                ed.selection.select(e);
                ed.selection.collapse(0);
                tinyMCEPopup.storeSelection();
            }
        }

        tinyMCEPopup.execCommand("mceEndUndoLevel");
        tinyMCEPopup.close();

    }

Пока все, желаю удачи в доработке!

Новости

30.10.2016

Обновлено описание макроса для вывода всех элементов справочника UMI.CMS с учетом версии 14.

 

21.07.2015

Памятка по обновлению до debian 8.1. Приятно вкусить все плюшки PHP 5.6

11.11.2014

Как выполнить SQL-запрос из bash-скрипта. Памятка

11.11.2014

Как отследить нагрузку сайта на сервер.

06.11.2014

Заготовка для галереи изображений с прокруткой. Не знаю, когда дойдут руки довести ее до вида плагина, поэтому открываю как есть. Можно доработать.

05.11.2014

Выкладываю как заготовку свой слайдер изображений на mootools

Все обновления