Автоувеличение для FCKEditor + IMCE + Lightbox2

Главные вкладки

Аватар пользователя Sinn Sinn 16 марта 2009 в 16:38

Решил облегчить жизнь модераторам сайта и сделал увеличение картинок для Lightbox2 с помощью 1 клика в FCKEditor.
В оригинале, чтобы поставить увеличение картинок в Lightbox2, нужно вставить картинку, а затем поставить на неё ссылку на нужную нам картинку, это мне показалось доволно неудобным.

Одно из решений есть здесь - http://drupal.org/node/314566, но меня оно не устроило, т.к. хочется все-таки выбирать какие картинки надо увеличивать, а какие не надо.

Что есть:

Drupal 6.10
IMCE 6.x-1.1
Lightbox2 6.x-1.9
FCKEditor 2.6.3 (работает и в FCKEditor 2.6.4)

Что будет делать скрипт: при установке чекбокса "Автоувеличение" на картинку будет ставиться ссылка, которая ведет на файл без суффикса, т.е. на оригинальный файл. Картинки с предпросмотром создаются через IMCE. Необходимо оставлять исходный файл. Также ставится свойство класса на картинку, по которому Lightbox2 знает, что эту картинку надо открывать ему. В тэг a автоматом ставится rel, что нужно для показа всех картинок на странице по порядку в Lightbox2.

Что сделал:

1. Настроил IMCE - проставил настройки для Thumbnail с суффиксами "_small" и "_medium".
2. Настроил Lightbox2 - в качестве "Custom Class Images" прописал "lb2".
3. Настройка FCKEditor:
в /fckeditor/editor/dialog/fck_image.html добавил чекбокс для управления:

<tr>
<td nowrap="nowrap">
<span fcklang="DlgImgAlign">Align</span>&nbsp;</td>
<td>
<select id="cmbAlign" onchange="UpdatePreview();">
<option value="" selected="selected"></option>
<option fcklang="DlgImgAlignLeft" value="left">Left</option>
<option fcklang="DlgImgAlignAbsBottom" value="absBottom">Abs Bottom</option>
<option fcklang="DlgImgAlignAbsMiddle" value="absMiddle">Abs Middle</option>
<option fcklang="DlgImgAlignBaseline" value="baseline">Baseline</option>
<option fcklang="DlgImgAlignBottom" value="bottom">Bottom</option>
<option fcklang="DlgImgAlignMiddle" value="middle">Middle</option>
<option fcklang="DlgImgAlignRight" value="right">Right</option>
<option fcklang="DlgImgAlignTextTop" value="textTop">Text Top</option>
<option fcklang="DlgImgAlignTop" value="top">Top</option>
</select>
</td>
</tr>
<!-- Добавление вот здесь -->
<tr>
 <td>
        Автоувеличение
 </td>
 <td>
  <input type="checkbox" id="checkFullSize" name="fullsize">
 </td>
</tr>
<!-- Закончилось добавление -->

в /fckeditor/editor/dialog/fck_image/fck_image.js в начало добавил

var ImageClassBig = 'lb2'; //определили какой у нас стиль настроен в Lightbox2
var arrThumb = Array ('_0','_thumb','_small','_medium'); //суффиксы, настроенные в IMCE

//вырезаем подстроку - не нашел функцию в FCKEditor для вырезания строки, поэтому добавил свою.
function str_replace(search, replace, subject) {
    return subject.split(search).join(replace);
}

изменил функции

function LoadSelection()
{
        if ( ! oImage ) return ;

        var sUrl = oImage.getAttribute( '_fcksavedurl' ) ;
        if ( sUrl == null )
                sUrl = GetAttribute( oImage, 'src', '' ) ;

        GetE('txtUrl').value    = sUrl ;
        GetE('txtAlt').value    = GetAttribute( oImage, 'alt', '' ) ;
        GetE('txtVSpace').value = GetAttribute( oImage, 'vspace', '' ) ;
        GetE('txtHSpace').value = GetAttribute( oImage, 'hspace', '' ) ;
        GetE('txtBorder').value = GetAttribute( oImage, 'border', '' ) ;
        GetE('cmbAlign').value  = GetAttribute( oImage, 'align', '' ) ;

        var iWidth, iHeight ;

        var regexSize = /^\s*(\d+)px\s*$/i ;

        if ( oImage.style.width )
        {
                var aMatchW  = oImage.style.width.match( regexSize ) ;
                if ( aMatchW )
                {
                        iWidth = aMatchW[1] ;
                        oImage.style.width = '' ;
                        SetAttribute( oImage, 'width' , iWidth ) ;
                }
        }

        if ( oImage.style.height )
        {
                var aMatchH  = oImage.style.height.match( regexSize ) ;
                if ( aMatchH )
                {
                        iHeight = aMatchH[1] ;
                        oImage.style.height = '' ;
                        SetAttribute( oImage, 'height', iHeight ) ;
                }
        }

        GetE('txtWidth').value  = iWidth ? iWidth : GetAttribute( oImage, "width", '' ) ;
        GetE('txtHeight').value = iHeight ? iHeight : GetAttribute( oImage, "height", '' ) ;

        // Get Advances Attributes
        GetE('txtAttId').value                  = oImage.id ;
        GetE('cmbAttLangDir').value             = oImage.dir ;
        GetE('txtAttLangCode').value    = oImage.lang ;
        GetE('txtAttTitle').value               = oImage.title ;
        GetE('txtLongDesc').value               = oImage.longDesc ;

        if ( oEditor.FCKBrowserInfo.IsIE )
        {
                GetE('txtAttClasses').value = oImage.className || '' ;
                GetE('txtAttStyle').value = oImage.style.cssText ;
        } else
        {
                GetE('txtAttClasses').value = oImage.getAttribute('class',2) || '' ;
                GetE('txtAttStyle').value = oImage.getAttribute('style',2) ;
        }
        //определяем стоит ли автоувеличение, если да, то переключаем чекбокс
        if (GetE('txtAttClasses').value.search(ImageClassBig) != -1)
        {
                GetE('checkFullSize').checked = true; //if ImageClassBig have been found

        }
        if ( oLink )
        {
                var sLinkUrl = oLink.getAttribute( '_fcksavedurl' ) ;
                if ( sLinkUrl == null )
                        sLinkUrl = oLink.getAttribute('href',2) ;

                GetE('txtLnkUrl').value         = sLinkUrl ;
                GetE('cmbLnkTarget').value      = oLink.target ;
        }

        UpdatePreview() ;
}

function Ok()
{
        if ( GetE('txtUrl').value.length == 0 )
        {
                dialog.SetSelectedTab( 'Info' ) ;
                GetE('txtUrl').focus() ;

                alert( FCKLang.DlgImgAlertUrl ) ;

                return false ;
        }

        var bHasImage = ( oImage != null ) ;

        if ( bHasImage && bImageButton && oImage.tagName == 'IMG' )
        {
                if ( confirm( 'Do you want to transform the selected image on a image button?' ) )
                        oImage = null ;
        }
        else if ( bHasImage && !bImageButton && oImage.tagName == 'INPUT' )
        {
                if ( confirm( 'Do you want to transform the selected image button on a simple image?' ) )
                        oImage = null ;
        }

        oEditor.FCKUndo.SaveUndoStep() ;
        if ( !bHasImage )
        {
                if ( bImageButton )
                {
                        oImage = FCK.EditorDocument.createElement( 'input' ) ;
                        oImage.type = 'image' ;
                        oImage = FCK.InsertElement( oImage ) ;
                }
                else
                        oImage = FCK.InsertElement( 'img' ) ;
        }

        UpdateImage( oImage ) ;

//вот здесь автоматически устанавливается ссылка
        var sLnkUrl = '';
        if (GetE('checkFullSize').checked==true)
        {
                sLnkUrl = GetE('txtUrl').value;
                for (var i=0; i < arrThumb.length; i++ )
                {
                        sLnkUrl = str_replace(arrThumb[i],'',sLnkUrl);
                }
        } else
        {
                sLnkUrl = '';
        }

        if ( sLnkUrl.length == 0 )
        {
                if ( oLink )
                        FCK.ExecuteNamedCommand( 'Unlink' ) ;
        }
        else
        {
                if ( oLink )    // Modifying an existent link.
                        oLink.href = sLnkUrl ;
                else                    // Creating a new link.
                {
                        if ( !bHasImage )
                                oEditor.FCKSelection.SelectNode( oImage ) ;

                        oLink = oEditor.FCK.CreateLink( sLnkUrl )[0] ;

                        if ( !bHasImage )
                        {
                                oEditor.FCKSelection.SelectNode( oLink ) ;
                                oEditor.FCKSelection.Collapse( false ) ;
                        }
                }

                SetAttribute( oLink, 'rel', ImageClassBig + '[node]' ) ;
                SetAttribute( oLink, '_fcksavedurl', sLnkUrl ) ;
                SetAttribute( oLink, 'target', GetE('cmbLnkTarget').value ) ;
        }
       
        return true ;
}

function UpdateImage( e, skipId )
{
        e.src = GetE('txtUrl').value ;
        SetAttribute( e, "_fcksavedurl", GetE('txtUrl').value ) ;
        SetAttribute( e, "alt"   , GetE('txtAlt').value ) ;
        SetAttribute( e, "width" , GetE('txtWidth').value ) ;
        SetAttribute( e, "height", GetE('txtHeight').value ) ;
        SetAttribute( e, "vspace", GetE('txtVSpace').value ) ;
        SetAttribute( e, "hspace", GetE('txtHSpace').value ) ;
        SetAttribute( e, "border", GetE('txtBorder').value ) ;
        SetAttribute( e, "align" , GetE('cmbAlign').value ) ;

        ///////////////////////////////////////////////////////////////////////
        // Advances Attributes

        if ( ! skipId )
                SetAttribute( e, 'id', GetE('txtAttId').value ) ;

        SetAttribute( e, 'dir'          , GetE('cmbAttLangDir').value ) ;
        SetAttribute( e, 'lang'         , GetE('txtAttLangCode').value ) ;
        SetAttribute( e, 'title'        , GetE('txtAttTitle').value ) ;
        SetAttribute( e, 'longDesc'     , GetE('txtLongDesc').value ) ;

        //Get class name for image
//здесь автоматически проставляем класс в изображение
        var ImageClassName='';
        if (GetE('checkFullSize').checked==true)
        {
                if (GetE('txtAttClasses').value.length)
                {
                        if (GetE('txtAttClasses').value.search(ImageClassBig) == -1)
                        {
                                ImageClassName = ImageClassBig + ' ' + GetE('txtAttClasses').value;
                        } else
                        {
                                ImageClassName = GetE('txtAttClasses').value;
                        }
                } else
                {
                        ImageClassName = ImageClassBig;
                }
        } else
        {
                ImageClassName = str_replace(ImageClassBig,'',GetE('txtAttClasses').value);
        }
       
        if ( oEditor.FCKBrowserInfo.IsIE )
        {
                e.className = ImageClassName ;
                e.style.cssText = GetE('txtAttStyle').value ;
        }
        else
        {
                SetAttribute( e, 'class', ImageClassName ) ;
                SetAttribute( e, 'style', GetE('txtAttStyle').value ) ;
        }
}

В прикрепленном файле все исходники.

ВложениеРазмер
Файл fck_image.rar6.5 КБ

Комментарии

Аватар пользователя ND ND 17 марта 2009 в 13:17

Quote:
в /fckeditor/editor/dialog/fck_link.html добавил чекбокс для управления:

ошибочка /fckeditor/editor/dialog/fck_image.html

Чёта не пашет. Делал в FCKEditor 2.6.4. Чекбокс есть, ссылка добавляется, rel="lightbox" не добавляется, лайтбокс не работает. Правил файлы как написано, пробовал прикреплённые заливать, не помогает. Видимо в настройках лайтбокса чего то не то.
Делал так:

//--open--
 /fckeditor/editor/dialog/fck_image/fck_image.js
//--find--
var bImageButton = ( document.location.search.length > 0 && document.location.search.substr(1) == 'ImageButton' ) ;
//--after add--
//добавлено для автоувеличения картинки
var ImageClassBig = 'lb2'; //определили какой у нас стиль настроен в Lightbox2
var arrThumb = Array ('_0','_thumb','_small','_medium'); //суффиксы, настроенные в IMCE

//вырезаем подстроку - не нашел функцию в FCKEditor для вырезания строки, поэтому добавил свою.
function str_replace(search, replace, subject) {
    return subject.split(search).join(replace);
//end добавлено для автоувеличения картинки
//--find--
                GetE('txtAttStyle').value = oImage.getAttribute('style',2) ;
        }
//--after add--
//определяем стоит ли автоувеличение, если да, то переключаем чекбокс
        if (GetE('txtAttClasses').value.search(ImageClassBig) != -1)
        {
                GetE('checkFullSize').checked = true; //if ImageClassBig have been found

        }
//конец добавления
//--find--
        var sLnkUrl = GetE('txtLnkUrl').value.Trim() ;
//--after add--
//вот здесь автоматически устанавливается ссылка
        if (GetE('checkFullSize').checked==true)
        {
                sLnkUrl = GetE('txtUrl').value;
                for (var i=0; i < arrThumb.length; i++ )
                {
                        sLnkUrl = str_replace(arrThumb[i],'',sLnkUrl);
                }
        } else
        {
                sLnkUrl = '';
        }
//конец добавления
//--find--
        SetAttribute( e, 'longDesc'     , GetE('txtLongDesc').value ) ;
//--after add--
        //Get class name for image
//здесь автоматически проставляем класс в изображение
        var ImageClassName='';
        if (GetE('checkFullSize').checked==true)
        {
                if (GetE('txtAttClasses').value.length)
                {
                        if (GetE('txtAttClasses').value.search(ImageClassBig) == -1)
                        {
                                ImageClassName = ImageClassBig + ' ' + GetE('txtAttClasses').value;
                        } else
                        {
                                ImageClassName = GetE('txtAttClasses').value;
                        }
                } else
                {
                        ImageClassName = ImageClassBig;
                }
        } else
        {
                ImageClassName = str_replace(ImageClassBig,'',GetE('txtAttClasses').value);
        }
//конец

Хотя бы то что ссылка автоматом уже хорошо.

Аватар пользователя Sinn Sinn 17 марта 2009 в 15:05

ошибочка /fckeditor/editor/dialog/fck_image.html[quote="ND" wrote:
ошибочка /fckeditor/editor/dialog/fck_image.html

да, ошибка. спасибо

в FCKEditor в "Источнике" после вставки картинки с автоувеличением должна быть примерно такая вещь:

<a rel="lb2[node]" href="image.jpg"><img class="lb2" height="150" width="200" align="right" src="image_medium.jpg" /></a>

при выводе ноды это автоматом переделывается примерно так:

<a class="lightbox-processed" rel="lightbox[][АЛЬ-ТЕКСТ]" href="image.jpg">
<img class="lb2" height="150" align="right" width="200" src="image_medium.jpg" alt="АЛЬТ-ТЕКСТ" title="АЛЬТ-ТЕКСТ"/>
</a>

В FCKEditor 2.6.3 и FCKEditor 2.6.4 исходники fck_image совпадют. Так что этот способ дожен в обоих работать

Аватар пользователя ND ND 17 марта 2009 в 15:16

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

Аватар пользователя agcom agcom 27 марта 2009 в 22:31

Подскажите, пожалуйста, у меня слово "Автоувеличение" отображается кракозябрами, как это можно поправить

Аватар пользователя Sinn Sinn 1 апреля 2009 в 15:10

Это из-за того, что кодировка файла UTF-8. Можно править через что-то, что поддерживает UTF-8, или написать в обычной кодировке, но тогда надо кодировку html файла поменять - . Лучше 1й вариант - в Drupal все в UTF-8

Аватар пользователя Dan Dan 2 апреля 2009 в 2:39

Никак не могу заставить Lightbox2 работать Sad
FCKEditor похоже правильно отрабатывает, но Lightbox ссылки не перехватывает.
Код в ноде такой:

  <a rel="lb2[node]" href="/sites/default/files/u3/image.jpg">
    <img class="lb2" height="180" width="180" src="/sites/default/files/u3/image_medium.jpg" alt=""/>
  </a>

Настройки LB - все по умолчанию, кроме раздела "Custom class images":
"Automatic handler for custom class images:" -- "Lightbox"
"Custom image trigger classes:" -- "lb2"

Аватар пользователя Sinn Sinn 2 апреля 2009 в 11:18

Такой код должен быть в FCKEditor'e (если смотреть "Источник") в ноде вывод ссылки будет другой - см. выше. Если это не так, то значит LB2 не обрабатывает вывод ноды. Попробуйте посмотреть настройки формата вывода "/admin/settings/filters".

Аватар пользователя Dan Dan 2 апреля 2009 в 13:09

Пора на пенсию - в textarea "Custom image trigger classes:" был включён FCKEditor, соответственно "lb2" он превращал в "<p>lb2<p>".

"Sinn" wrote:
Попробуйте посмотреть настройки формата вывода "/admin/settings/filters".

Там всё отключено - прописывание rel ручками не предполагалось Smile

Спасибо за поддержку и решение!

Аватар пользователя ND ND 4 апреля 2009 в 17:51

"agcom" wrote:
Подскажите, пожалуйста, у меня слово "Автоувеличение" отображается кракозябрами, как это можно поправить

Смотри выше
"Sinn" wrote:
в /fckeditor/editor/dialog/fck_image.html добавил чекбокс для управления:

вот здесь надо Автоувеличение заново написать и сохранить в UTF8
"Sinn" wrote:

Автоувеличение

Аватар пользователя patator patator 10 апреля 2009 в 8:53

Спасибо! Нужная вещь.
Вопрос такой. Может кто пробовал такую комбинацию. У меня эти модули используются вместе с jcarousel block. Если использовать данную модификацию не гигнутся все настройки?
Понимаю, что только опытным путем можно это проверить, поэтому и спрашиваю использовал ли кто данный мод в связке с jcarousel block.
...
Проверил. Работает. Пока проблем не возникло.

Аватар пользователя pr0fessor pr0fessor 28 апреля 2009 в 0:18

Ребята подскажите как грамотно настроить IMCE, чтоб работало в связке с FCKEditor + IMCE + Lightbox2. В целом все работает, картинки позволяет загружать на сервер и размещать их в тексте как мне угодно итп, НО при загрузке картинки предположим размера 1024х768 он не создает превьюшку автоматически...
Настройки IMCE в разделе Миниатюры такие:
Имя: Thumbnail
Размеры 90х90
Префикс (пусто)
Суфикс _small
Тоже самое для суфикса _medium только размеры другие... все верно?

Я настроил Lb2 как у вас тут расписано, все вроде работает, но как мне кажется из-за IMCE картинка вставляется большого размера... Получается вставил картинку, поставил галочку Автоувеличение, жму ОК, и получаю страницу с большой кликабельной картинкой при коике по которой открывается Лайтбокс с этой же картинкой и возможностью ресайза до оригинала...

p.s. не совсем понял те ли версии модулей у меня стоят, FCKEditor 6.x-1.3 от 19 марта 2009г., IMCE 6.x-1.2 и IMCE Mkdir 6.x-1.x-dev к нему, ну и сам Lightbox2? А то смотрю у вас версии стоят FCKEditor 2.6.3 а то и FCKEditor 2.6.4... это где такое можно взять?

Drupal 6.10

Аватар пользователя ND ND 1 мая 2009 в 12:49

У меня такой глюк получается, не могу понять из-за чего.
При вставке картинки с именем image_0_small.jpg при автоувеличении выводится image.jpg, хотя картинка с именем image_0.jpg существует. При ручной правке кода HTML естественно всё нормально выводит.
Но почему обрезает _0 не пойму.

var arrThumb = Array ('_thumb','_small','_medium'); //суффиксы, настроенные в IMCE
...
...
//вот здесь автоматически устанавливается ссылка
//      var sLnkUrl = '';
        if (GetE('checkFullSize').checked==true)
        {
                sLnkUrl = GetE('txtUrl').value;
                for (var i=0; i < arrThumb.length; i++ )
                {
                        sLnkUrl = str_replace(arrThumb[i],'',sLnkUrl);
                }
        } else
        {
                sLnkUrl = '';
        }
//конец

как видно суффикса _0 у меня нет

Аватар пользователя Kappitoshka Kappitoshka 10 ноября 2015 в 11:46

Хорошая статейка. Так можно заранее определенный preset прикрутить.

Preset - inline.
Нажимаете Автоувеличение - модифицируется основная ссылка.
Пару раз сбросить размер (автоматически не получилось сделать).
И ОК.

Вставляет preset картинку со сслылкой в lightbox.

Да, и работает в 5.х где не пройдет все выше описаное для imce.

Аватар пользователя gerboss gerboss 23 июня 2009 в 17:46

не понимаю: вношу изменения в /fckeditor/editor/dialog/fck_image/fck_image.js - ничего в процессе загрузки картинки не меняется и соответственно ссылки не добавляются. в чем туплю?
пробовал кеш очистить - не помогает. возможно ли, что fckeditor не обращается к fck_image.js?

Аватар пользователя gerboss gerboss 23 июня 2009 в 18:56

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

PS. проверил на другом сайте - все работает как часы. получается, что эт я что то намудрил, бум ковыряться...

Аватар пользователя gerboss gerboss 1 июля 2009 в 16:58

из двух методов, отсюда http://drupal.org/node/314566 и вышеизложенного дела решение - пользователь загружает файл, по первому методу автоматически уменьшается его размер и подставляется ссылка для полноразмерного просмотра.
все работает, если загружаю через IMCE.
нужно доделать, что бы работало и при быстрой загрузки картинок через закладку FCKEditor "Закачать" - ссылка для полноразмерного просмотра проставляется, а вот как прикрутить изменение выводимого размера? просто в http://drupal.org/node/314566 это делается через imce_set_app.js модуля IMCE, а при быстрой загрузки он не используется...

Аватар пользователя Sinn Sinn 1 июля 2009 в 18:48

правильно думаете. в своем самописном движке я делаю так - выбираю картинку, в свойствах изображения пишу размер картинки, ставлю галочку "Автоувеличение", и сохраняю. Затем у меня скрипт парсит html, смотрит размер изображения, ресемплирует картинку, заменяет имя файла на ресемплированный файл и вставляет обработчик javascript, чтобы открывать большую картинку. В Drupal чтобы это все реализовать надо написать отдельный модуль, тогда IMCE не нужен будет. А еще интересно попробовать сочетать все это с imagecache. Если будет интересно могу попробовать оформить, как освобожусь

Аватар пользователя gerboss gerboss 2 июля 2009 в 12:15

было б хорошо отдельным модулем.
но на текущий момент меня бы устроило изменение function Ok() в fck_image.js
сейчас в ней только происходит добавление ссылок на открытие в отдельном окне, а хотелось бы еще добавить изменение размера отображаемого рисунка, "механизм" которого находится в imce_set_app.js

Аватар пользователя pmserg2000 pmserg2000 21 июля 2009 в 15:56

Подскажите, плиз, как сделать так чтобы при нажатии на картинку открывалась картинка большего размера!У меня открывается в обоих случаях с преффиксом small_!В настройках IMCE указал как положено с суффиксами _small и _medium, остальные настройки вроде тоже верны, а картинка открывается размером такая какую загружаю.

Аватар пользователя pmserg2000 pmserg2000 21 июля 2009 в 23:41

gerboss wrote:
pmserg2000
какая строка получается после вставки картинки?

<div class="news01 content clear-block">
<p><a rel="lb2[node]" href="/system/files/small_NVE00007.jpg"><img class="lb2" height="90" width="90" alt="" src="/system/files/small_NVE00007.jpg" /></a> </p>
</div>

Аватар пользователя pmserg2000 pmserg2000 22 июля 2009 в 12:09

gerboss wrote:
ну так у тебя и открывается файл small_NVE00007.jpg
при вставки картинки выбираете small_NVE00007.jpg или NVE00007.jpg?

Выбираю small_NVE00007.jpg - он же и открывается при нажатии без всяких увеличений

Аватар пользователя Sinn Sinn 22 июля 2009 в 12:30

"pmserg2000" wrote:

<div class="news01 content clear-block"><p><a rel="lb2[node]" href="/system/files/small_NVE00007.jpg"><img class="lb2" height="90" width="90" alt="" src="/system/files/small_NVE00007.jpg" /></a> </p>
</div>


а должно быть <a rel="lb2[node]" href="/system/files/NVE00007.jpg">

"pmserg2000" wrote:
В настройках IMCE указал как положено с суффиксами _small и _medium

но у вас картинки почему-то с префиксом small_. Смотрите внимательно настройки

Аватар пользователя Sinn Sinn 22 июля 2009 в 14:03

откроется NVE00007.jpg.

var arrThumb = Array ('_0','_thumb','_small','_medium'); //суффиксы, настроенные в IMCE
Это настройки fck, а IMCE у вас создает 'small_'

Аватар пользователя Новичек123 Новичек123 29 июля 2009 в 21:04

Ребята, если пишу var ImageClassBig = 'lightbox'; и SetAttribute( oLink, 'rel', ImageClassBig ) ; все работает, а определение любого другого класса в var ImageClassBig и в настройках Lightbox2 ( Custom class images -> Automatic handler for custom class images: ) результата не дает, в чем может быть причина ?

Аватар пользователя gerboss gerboss 12 августа 2009 в 18:43

опять вернулся к загрузке картинок.
нужно сделать автоматическое создание превьюшки картинки, по типу как в IMCE.

т.е.:
- загружаем картинку
- автоматически создается превьюшка на нее с заданными параметрами
- в текст вставляется ссылка на превьюшку с открытием в Lightbox

вот нужно второй пункт реализовать.
может кто поможет?

Аватар пользователя Sinn Sinn 14 августа 2009 в 17:19

"gerboss" wrote:
- автоматически создается превьюшка на нее с заданными параметрами

в FCK указывается размер картинки, пишется модуль, в котором парсятся теги img, берем оттуда параметр width="". Пишем функцию ресемплирования файла из src="" с нужным размером width. В тексте меняем src="" на новое название файла.

Аватар пользователя gerboss gerboss 14 августа 2009 в 18:29

"Sinn" wrote:
Пишем функцию ресемплирования файла

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

Аватар пользователя gerboss gerboss 19 августа 2009 в 12:52

обнаружил тут небольшой баг.

если вставить картинку и сразу начать печатать - работает все путем.
но если вставить картинку, затем нажать стрелку на клаве в сторону картинки и начать печатать текс, то текст попадает в тег картинки и становится частью ссылки, получается примерно так:
<p><a href="/sites/default/files/test.jpg" rel="lb2[node]">тут_простой_текст<img height="120" width="120" src="/sites/default/files/test_medium.jpg" class="lb2" alt="" /></a></p>

эт только у меня такое, или это общий баг?

Аватар пользователя msidiagnos msidiagnos 30 ноября 2009 в 10:39

Новый трабл, но на другом сайте. Проделал все вышеописанное. Создаем материал, топаем в fckeditor, начинаем загружать изображение через IMCE. Пишется "Загрузка файла ****.jpg" и все. Файл не загружается, прогресбар висит. С чем может быть связано?

Аватар пользователя msidiagnos msidiagnos 30 ноября 2009 в 10:55

При выборе в качестве Тип файлового браузера - "Встроенный файловый браузер" картинки аплоадятся нормально.

Аватар пользователя riddler riddler 2 декабря 2009 в 16:01

Куда в настройках LightBox2 добавлять "lb2"? (Lightbox2 6.x-1.9)

Нашел только вкладку "Automatic image handling", раздел "Custom class images", там список "Automatic handler for custom class images:" и поле "Custom image trigger classes:"

Ссылка добавляется, rel="lb2[node]" добавляется, но при нажатии на маленькую картинку, открывается большая, а не всплывает lightbox.
Объяснил как смог...

ЗЫ: если заменить rel="lb2[node]" на rel="lightbox2", то работает как надо (т.е. lightbox разворачивается)

Аватар пользователя riddler riddler 3 декабря 2009 в 13:05

хм. заработало.
поставил "Automatic handler for custom class images:" = LiteBox
и "Custom image trigger classes:" = lb2
Вроде раньше так делал...

Аватар пользователя kissfm kissfm 22 июня 2010 в 16:19

При ручной работе не получалось почему-то.
Взял прикрепленные файлы и заменил ими свои и все завелось. Спасибки большое!!!
Аж камень с души упал)))

Аватар пользователя kissfm kissfm 23 сентября 2010 в 10:29

Я пробовал. Он лучше.
Но иногда приходится возвращаться на FCK. Причины в темах оформления зачастую, если что-то не работает.