Forums » Russian »

Получить путь к миниатюре

Added by Евгений Градус about 1 year ago

Привет.

Я хочу сделать что-то такое.
Есть панель для выбора картинки пользователем. В ней есть кнопка "Выбрать картинку", скрытый input для url'а к картинке и тег img для отображения миниатюры выбранной картинки. Ну, чтобы пользователь видел, какую картинку он уже выбрал, по её миниатюре.

1 <div class="picPanel">
2 <img class="thumbnail" src="" id="tn_b1"/>
3 <input type="button" value="Выбрать картинку" id="b1" class="pic_select" />
4 <input type="hidden" id="pic_b1" name="pic_path" value="" />
5 </div>

elFinder я прикрутил, url картинки он мне успешно возвращает и я его вставляю, куда мне нужно. А как получить путь к миниатюре выбранной картинки, чтобы можно было отобразить эту миниатюру? Ведь для внутреннего пользования эта миниатюра у elFinder'а уже есть.


Replies (3)

RE: Получить путь к миниатюре - Added by Dmitry Levashov about 1 year ago

Неожидано! 0_о
Пока могу только предложить найти в файндере в элементе с классом elfinder-cwd тег label который содержит имя файла картинки и у предыдущего p получить css background-image

С jquery и firebug - написать запрос - дело пары минут

Посмотрю, можно ли будет учесть вашу хотелку в будущей версии

RE: Получить путь к миниатюре - Added by Евгений Градус about 1 year ago

Спасибо, Дмитрий. Да, так получилось. Правда, были проблемы с текстом label.

В общем, привожу код, который делает то, что нужно. Ещё его причешу потом. Ну и ваши замечения.

 1 $( '<div class="my-elfinder" id="' + id + '"/>' ).elfinder( 
 2   $.extend( {}, opts, 
 3   { 
 4     editorCallback : function( url ) 
 5     { 
 6       var fname = trim( url.substring( url.lastIndexOf( '/' ) + 1, url.length )); //trim() режет пробелы по краям (если вдруг).
 7       var css   = '';
 8 
 9       if( fname.length > 23 ) // может, это число где-то в настройках? я не искал толком
10         fname = fname.substring( 0, 14 ) + '-­' + fname.substring( 14, 23 ) + '…' + fname.substring( fname.lastIndexOf( '.' ) + 1, fname.length ); 
11                                          //^^^ вот с этим тире были проблемы, window.log его не показывает и я долго втыкал, почему нет совпадения.
12                                          // ну и конечно, такая строка кода пойти в итоговый код не может, это ещё в доработке нуждается.
13       $( '.el-finder-cwd label' ).each( function() 
14       {
15         if( trim( $( this ).text()) == fname ) css = $( this ).prev().css( 'background' );
16       });
17 
18       var tnpath = css.substring( css.indexOf( '(' ) + 1, css.indexOf( ')' ));
19 
20       $( tni ).attr( 'src', tnpath );    // tni - ссылка на img, куда и вставляется путь до нужной миниатюры
21       $( target ).attr( 'value', url );  // target - ссылка на скрытый input, куда вставляется путь до выбранного файла
22 
23     } 
24   } 
25 ));

А вообще хотелось бы, чтобы в editorCallback возвращалась не строка с url, а массив вида:

 1 { name : 'myfile.ext', 
 2   url : 'http://example.com/images/full/myfile.ext',
 3   type : 'mime/img', // или просто img
 4   // а дальше доп. параметры, в зависимости от типа файла. для картинки например:
 5   width : 800,
 6   height : 600,
 7   filesize : 127 877, // в байтах
 8   tn_name : 'thumbnail.ext',
 9   tn_url : 'http://example.com/images/.tmb/thumbnail.ext',
10   tn_width : 48,
11   tn_height : 48
12  }

RE: Получить путь к миниатюре - Added by Dmitry Levashov about 1 year ago

вот с этим тире были проблемы, window.log его не показывает

Да - это html entity &shy - если имя файла длинее чем задано где-то в опциях - файндер его сокращает при показе и делает один перенос на нов строку.
Следовательно, 100% способа сделать это в текущей версии нет(
Насчет возвращаемых данных - я планирую так сделать в новой версии и/или добавить в api команду tmb()

(1-3/3)