По просьбе товарища inecs пишу, как я реализовал масштабирование изображения с использованием highslide на фотожабе.ру. Поехали!

Для начало кратко о том, что это такое.

Highslide JS — это ПО с открытым исходным кодом на JavaScript, которое предлагает web 2.0 решение для всплывающих окон.

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

Итак, начнем интеграцию в ЛС.

Для того, чтобы иметь возможность увеличивать изображение, для начала, его надо иметь! Сейчас загрузка картинок работает по следующей схеме: Файл закачивается, уменьшается (если картинка не влазит в установленные «рамки») и сохраняется на сервере. Так что для того, чтобы увеличивать изображение мы должны его сохранить в первоначальном, большом размере. И для сего напишем следующую функцию

/**
 * Сохраняет файл на диск
 * @param string $sFileTmp
 * @param string $dir
 * @param string $sFileImg
 */

function func_save_img($sFileTmp,$dir,$sFileImg) {
	if(!is_dir(DIR_SERVER_ROOT.$dir))
	@func_mkdir(DIR_SERVER_ROOT,$dir);
	
	if(copy($sFileTmp,DIR_SERVER_ROOT.$dir.$sFileImg)) return true;
	
	return false;
}

которую добавим в файл /include/function.php (прям в конец, перед

?>

)
Суть этой функции проста. Она получает в качестве параметра путь ко временному файлу $sFileTmp, создает директорию $dir и копирует туда исходное изображение под именем $sFileImg.

Теперь наша задача состоит в том, чтобы сохранить сам файл после загрузки на сервер. При этом нужно проверить — изображение уменьшалось или нет? Какой смысл хранить один и тот же файл дважды? Зачем его увеличивать, если он не увеличится? Для этого в файл /include/ajax/uploadImg.php после каждой строчки (их там две)

$sFile=$sDirSave.'/'.$sFileImg;

вставим следующий код:

if(md5_file(DIR_SERVER_ROOT.$sFile) != md5_file($sFileTmp)  && func_save_img($sFileTmp,$sDirSave.'/big/',$sFileImg) ) $sBigFile = $sDirSave.'/big/'.$sFileImg;

Ах да! Мы забыли определить переменную $sBigFile.
После строчки

$sFile=null;

вставим

$sBigFile=null;

Что мы сделали? Мы сверили md5 суммы загруженного файла во временную директорию и сохраненного в папке /uploads/ Если они различны(файл изменен — видимо его масштабировали), то скопируем исходный файл в папку с уменьшенным/big/. Путь к нему держим в переменной $sBigFile. Теперь добавим ссылку на «большой» файл в html код изображения:

Находим строку

$sText.='>';

И после нее добавляем следующий код:

if(!is_null($sBigFile)) $sText = '<a href="'.DIR_WEB_ROOT.$sBigFile.'" title="highslide">'.$sText.'</a> ';

Как я к этому пришел? Немного об установке Highslide JS.
Настраивается он следующий образом (как самый простой вариант, без наваротов). В хедер подключается сам скрипт, в нем же указываются некоторые параметры (о них позже) и задаются ссылки следующим образом

<a href="путь к большой картинки" onclick="return hs.expand(this)">
  <img src="путь к маленькой картинки" />
</a>

Значит при генерации кода изображения оставалось добавить только ссылочку с параметром onclick! Не долго думая, я прямо так и сделал! Но, к моему удивлению, когда я сохранил пост событие не работало! Смотря HTML исходник страницы я обнаружил, что моего «онклика» там просто нет.И правильно! Ведь тогда можно было бы впихнуть туда любой JavaScript код и подвергнуть сайт XSS атаке. Первой моей мыслью было добавить свой собственный параметр к ссылке аля

<a href="" highslide> </a> 

И при генерации поста заменить его на нужный onclick. Ввиду своей лени и желания спать мне не хотелось лезть в дебри php кода, разбираться что и как там работает. Поэтому я сделал следующий вариант. При добавлении ссылки можно пользоваться параметром «title». Для ссылки на масштабируемую картинку я указал параметр title=«highslide», а потом с помощь JS обошел все такие ссылки и прописал нужное событие!
Для этого в файл /templates/skin/new/header.tpl где-нибудь под

<script type="text/javascript" src="{$DIR_STATIC_SKIN}/js/panel.js"></script>

нужно добавить следующий код:

<script language="JavaScript" type="text/javascript">
{literal}
 window.addEvent('domready', function(){
      $$('a[title="highslide"]').addEvent('click', function(){return hs.expand(this)});
 });

{/literal}
</script>

Отлично! Теперь настроим собственно сам highslide.
Для начала его нужно скачать (нас интересует «Get the zip package»). Берем от туда packed версию (highslide\highslide.packed.js), чтобы имела меньший размер. Зачем юзеру качать лишние килобайты, правда?
Заливаем его в папку /templates/skin/new/js/.
Далее из скаченного архива содержимое папки highslide\graphics помещаем в /templates/skin/new/images/highslide/. Осталось только подключить и настроить!
Во все тот же header.tpl, над тем куском, что мы вставляли добавим код:

<script type="text/javascript" src="{$DIR_STATIC_SKIN}/js/highslide.packed.js"></script>
<script type="text/javascript">    

    hs.graphicsDir = '{$DIR_STATIC_SKIN}/images/highslide/';
    hs.outlineType = 'rounded-white';
    hs.numberOfImagesToPreload = 0;
    hs.showCredits = false;
{literal}
	hs.lang = {
		loadingText :     'Загрузка...',
		fullExpandTitle : 'Развернуть до полного размера',
		restoreTitle :    'Кликните для закрытия картинки, нажмите и удерживайте для перемещения',
		focusTitle :      'Сфокусировать',
		loadingTitle :    'Нажмите для отмены'
	};
{/literal}
</script>

Что это означает и полный список опций с пояснениями к ним смотрите на официальном сайте highslide.
Вуаля! Мы имеем масштабируемые картинки =) Посмотреть, как оно работает вы можете на проекте фотожаба.ру.

P.S. в предыдущем посте я кратко описывал данный способ. По вашим замечаниям код на jQuery был заменен на Mootools. При написании той статьи о Mootools я только слышал, при написании этой — я с ним уже общался, спасибо за опыт =) Критика приветствуется!