Напомню как выглядит Виджет Simple photo manager:

Ссылка для скачивания: imagesman.tar.bz2

Попробовать плагин в действии поссылке: Пример Simple photo manager

Прошу учесть на момент написания этой статьи виджет находится в стадии альфа, так как протестирован только мною.
Из всех недочетов мною обнаруженных и на момент написания статьи не исправленных можно отметить:

1. 
   Нет возможности пересортировывать картинки мышкой.
2. Нет проверки параметра "ALT" на безопасность.

В свободное время постараюсь исправить эти недочёты.

Далее мои пояснения по тому что я сделал и для чего, и какие трудности пришлось решать по ходу. Первое что хочу отменить я программировал в свободное от работы время и поэтому часто приходилось делать перерывы. И когда я возвращался к программированию после длительного перерыва я уже сам успевал подзабыть что я тут и зачем делал. А комментарии писать поленился, это большой минус! Так делать нельзя! Комментарии помогают не только другим, но самому себе. Постараюсь этой статьей исправить ситуацию.

1. Практически весь код я поместил в один файл imagesman.php. На сколько это рационально и разумно я не знаю. Просто для скорости программирования мне показалось так удобней, потому что в это раз за основу я взял стандартный виджет showimagetvs.

// Insert some JS
$output .= includeJs($modx->config['base_url'] .'assets/plugins/managermanager/widgets/imagesman/jquery-ui-1.8.5.custom.min.js');
// Insert some CSS
$output .= includeCss($modx->config['base_url'] .'assets/plugins/managermanager/widgets/imagesman/imagesman.css');
$output .= includeCss($modx->config['base_url'] .'assets/plugins/managermanager/widgets/imagesman/smoothness/jquery-ui-1.8.5.custom.css');
Эти строчки прокомментированы и понятны: подключаем jquery UI и стили.

var lastImageCtrl;
var lastFileCtrl;
var bImg = false;
Объявляем переменные. Из всех нам нужна только lastImageCtrl, которая используется в менеджере закачки фотографий. lastFileCtrl используется в менеджере закачки файлов и перекочевала в мой скрипт ошибочно. bImg я планировал использовать для предупреждения возможности закачки одинаковых картинок, но потом отказался от этой идее, так как клиент всегда прав и если он хочет закачивать одинаковые картинки я не должен лишать его этой возможности. Но правда в том что если еще и проверять на уникальность картинки код стал бы несколько сложнее.

$j("#'.$tv_id.'").css("display","none"); Прячем с экрана поле ввода tv-параметра так как все действия производятся мышкой. Тут не обходимо отметить что "ТИП ВВОДА" у  tv-параметра надо ставить "Textarea", так как картинок может быть много, да и "ALT" может быть длинным и в стандартное "ПОЛЕ ВВОДА" - "text" не войдет.

$j("#'.$tv_id.'").after(\'<div id="imagesman'.$tv_id.'">\
<div class="imagesman">\
<div class="imginput">\
<input type="text" id="imginputtext'.$tv_id.'" name="imginputtext'.$tv_id.'" value="" />\
<input id="buttonAdd'.$tv_id.'" type="button" value="Add" onclick="BrowseServer(imginputtext'.$tv_id.')" />\
</div>\
<div id="imgpole'.$tv_id.'" class="imgpole ui-widget ui-helper-clearfix">\
<ul id="gallery'.$tv_id.'" class="gallery ui-helper-reset ui-helper-clearfix"></ul>\
<div id="trash'.$tv_id.'" class="trash ui-widget-content ui-state-default">\
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>\
</div>\
</div>\
</div>\
</div>\');
Подготавливаем структуру. Тут мы и вставили поле ввода нового файла и кнопку открытия менеджера картинок. И вставили поле куда будут помещаться сами картинки и корзина для картинок. Так как скрипт получился длинноватый описание некоторых частей буду выносить в отдельную статью. буду стараться делать это по функциональности. Вот и первый пример: Обработка поля ввода имени файла и кнопки открытия менеджера картинок.

if ($j("#'.$tv_id.'").val() == "") {
$j("#'.$tv_id.'").val("'.$default.'");
}
На тот случай если tv-параметр только что создали и он соответственно пустой. $default = {}.

var lis = ""; var maxI = 0;
maxI будет использоваться для подсчета картинок и добавления картинкам уникально ID. lis заполнится буквально через пару строчек.

var globhash = $j("#'.$tv_id.'").val();
globhash = eval("(" + globhash + ")");

Этими двумя строчками мы берем строку хранящуюся в tv-параметре и превращаем в объект javascript, очень пригодный для JSON. Возможно кто то будет его использовать именно как JSON, но в скрипте используется просто как объект javascript. В дальнейшем идут манипуляции именно как с объектом. и только в конце сохраняется обратно в строку.

for (var key in globhash) {
lis +=\'<li class="ui-widget-content ui-corner-tr">\';
lis +=\'<img src="'.$site_url.'\'+globhash[key].src+\'" alt="\'+globhash[key].alt+\'" width="96" height="72" id="num_\'+key+\'"/>\';
lis +=\'<a href="'.$site_url.'\'+globhash[key].src+\'" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>\';
lis +=\'<a href="'.$site_url.'\'+globhash[key].src+\'" title="Edit alt" class="ui-icon ui-icon-pencil">Edit alt</a>\';
lis +=\'<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>\';
lis +=\'</li>\';
if (key>maxI) maxI = key;
}

$j("#gallery'.$tv_id.'").html(lis);
А вот идет обещанное заполнение переменной lis. Возможно для наглядности переменную lis надо было объявить перед этим кодом а не двумя строчками выше. Ну так сложилось, в следующей версии надо будет причесать код. После заполнения переменной lis, всталяем ее с помощью jquery функции html() в заранее подготовленную структуру и получаем то что видим на картинке.

Далее идут функции манипулирования картинками, которые опишу в следующих статьях.