Вдохновил меня на написание этой заметки один знакомый дизайнер. Он спросил, как сделать так, чтобы картинка открывалась в отдельном окне по размеру картинки. Любят они, дизайнеры, понимаете ли, чтобы у них всё было чистенько так и аккуратненько. Да я и сам люблю, и посему использую эту подсмотренную здесь фичу во всех своих разработках. Недолго думая, я написал ему код, что-то вроде этого
window.open(’111704244301010470.jpg’, ”, ‘toolbar=no, location=no, directories=no,
status=yes, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=800, height=600′);
Всё в общем-то понятно. Но в моём случае генерация кода происходит на стороне сервера и до того, как код попадает на страницу, уже известны размеры картинки и, соответственно, открываемого окна. То есть написав одну функцию на php, об этих ужасных длииииииииинных строках JS можно забыть навсегда, что я в своё время и сделал. Другое дело, если хостинг не позволяет использовать серверные скрипты - тогда придётся всю обработку проводить на стороне клиента. Итак вводные данные
- сайт на народе
- сделать код как можно более простым
Таким образом, немного подумав, я решил помочь старому боевому товарищу - вот что у меня получилось
<a href=”#” onClick=”popupImage(’image.jpg’)”>
<img src=”imageTN.jpg” alt=”clickIt!” border=”0″>
</a>
Это тот самый краеугольный камень - ссылка, отрабатывающая выполнение функции popupImage() , параметром которой является абсолютный, относительный путь или URL открываемой картинки. Вставлять её можно где заблагорассудится, не забыв подключить JS-библиотеку
<SCRIPT LANGUAGE=”JavaScript” src=”lib.js”></SCRIPT>
Теперь поподробнее, как это работает.
Функция popupImage() открывает в отдельном окне страницу popup.html размером 100х100 и передаёт ей путь/к/картинке в виде GET-переменной. Т.о. адресная строка выглядит как popup.html?pic=/path/to/your/image.jpg
После того, как код страницы popup.html загружен в браузер, посредством обработчика onLoad вызывается функция loadImage() , которая простеньким регэкспом чикает адресную строку, вырезая из неё то, что нам нужно - собственно /path/to/your/image.jpg , обявляет переменную im , которая является ссылкой на дескриптор с ID=targetImage . Обратитевнимание, что переменная объявляется в глобальной области видимости, т. к. она понадобится в следующей функции. Следующей строкой загружается картинкаim.src = pic[1];
И, наконец, вуаля! Когда картинка загрузилась полностию, и размеры её уже известны браузеру, посредством обработчика onLoad, повешенного на дескриптор IMG, вызывается функция windowResize() , которая и ресайзит окно в соответствии с пиксельным размером картинки. Из-за использования разными браузерами разных объектных моделей пришлось немного усложнить код для использования его в разных типах браузеров
Ниже - содержание файла той самой библиотечки lib.js
// возвращает ID элемента
function getId(id) {
if (typeof(document.getElementById) != ‘undefined’) {
return document.getElementById(id);
} else {
return document.all[id];
}
}
// определение типа браузера
function getBrowser(){
var b = navigator.appName;
var name = null ;
if (b==’Netscape’){
name = ‘N’;
}else if(b==’Microsoft Internet Explorer’){
name = ‘IE’;
}else if (b==’Opera’){
name = ‘O’;
}
return name;
}
// самая главная функция)
// открывает окно размером 100х100
function popupImage(imagePath){
var w = ‘popup.html?pic=’+imagePath;
var arg = ‘toolbar=no,’;
arg+= ‘location=no,’;
arg+= ‘directories=no,’;
arg+= ’status=yes,’;
arg+= ‘menubar=no,’;
arg+= ’scrollbars=no,’;
arg+= ‘resizable=yes,’;
arg+= ‘copyhistory=no,’;
arg+= ‘width=100,’;
arg+= ‘height=100′;
window.open(w,”,arg);
}
// тоже интересно - разбирает адресную строку, выковыривая из неё путь к картинке
function loadImage(){
var addr = document.location.toString() ;
var reg = /\?pic=/;
var pic = addr.split(reg);
im = document.getElementById(’targetImage’);
im.src = pic[1];
}
// и наконец приводит окно в соответствии с размерами изображения
function windowResize(){
var n = getBrowser();
if (n==’N'){
window.innerWidth = im.width;
window.innerHeight = im.height;
}else if (n==’IE’){
window.resizeTo(im.width , im.height);
}else if (n==’O'){
window.resizeTo(im.width+10 , im.height+30);
}
}
А это содержание страницы popup.html, которая и открывается в отдельном окне
<HTML>
<SCRIPT LANGUAGE=”JavaScript” src=”lib.js”></SCRIPT>
<BODY topmargin=”0″ leftmargin=”0″ marginheight=”0″ marginwidth=”0″ onLoad=”loadImage()”>
<TABLE cellspacing=”0″ cellpadding=”0″ border=”0″ height=”100%” align=”center”>
<TR><TD>
<A href=”#” onClick=”window.close();”>
<img src=”" alt=”closeIt!” border=”0″ id=”targetImage” onLoad=”windowResize()”>
</A>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Написав это всё и потестив, выяснил некоторые плюсы этого подхода, против использовавшегося ранее (серверная обработка)
- новое окно открывается в минимальном размере и принимает свой нормальный размер, только когда картинка уже загружена полностью. То есть пока картинка грузится, ничего не мешает смотреть страницу
- Из-за отсутствия серверной обработки работает на всех хостингах, даже на народе
must have! Вольно, по распорядку
Примечание такое - файлу popup.html лучше дать какое-нибудь другое название, дабы его не резали рекламорезалки.
Продолжая тему о книгах. Просто не могу удержаться, чтобы не посоветовать книгу “Flash. Трюки”, написаную индусом с труднопроизносимым именем Шам Бхангал. Начинающим флешерам не рекомендуется, рекодендуется флешерам 
Есть у меня замечательный pdf, который достался мне на диске вместе с