|
Здесь описывается простой пример, как сделать в фотогалерее предпросмотр картинки в открывающемся отдельном окне Internet Explorer, причем размер окна будет соответствовать размеру картинки.
Текст кода, который выполняет эту функцию, такой:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html>
< head>
< META http-equiv=Content-Type content="text/html;charset=windows-1251">
< title>Пример предпросмотра картинки< /title>
< /head>
< body>
< script language="JavaScript">
function ImgShw(ID, width, height, alt)
{
var scroll = "no";
var top=0, left=0;
if(width > screen.width-10 || height > screen.height-28) scroll = "yes";
if(height < screen.height-28) top = Math.floor((screen.height - height)/2-14);
if(width < screen.width-10) left = Math.floor((screen.width - width)/2-5);
width = Math.min(width, screen.width-10);
height = Math.min(height, screen.height-28);
var wnd = window.open("","","scrollbars="+scroll+",resizable=yes,width="+width+",
height="+height+",left="+left+",top="+top);
wnd.document.write("< html>< head>\n");
wnd.document.write("< "+"script language='JavaScript'>\n");
wnd.document.write("< !--\n");
wnd.document.write("function KeyPress()\n");
wnd.document.write("{\n");
wnd.document.write(" if(window.event.keyCode == 27)\n");
wnd.document.write(" window.close();\n");
wnd.document.write("}\n");
wnd.document.write("//-->\n");
wnd.document.write("< /"+"script>\n");
wnd.document.write("< title>"+(alt == ""? "Картинка":alt)+"< /title>< /head>\n");
wnd.document.write("< body topmargin=\"0\" leftmargin=\"0\" marginwidth=\"0\"
marginheight=\"0\" onKeyPress=\"KeyPress()\">\n");
wnd.document.write("< img src=\""+ID+"\" border=\"0\" alt=\""+alt+"\">");
wnd.document.write("< /body>");
wnd.document.write("< /html>");
wnd.document.close();
}< /script>
< a title="Картинка такая-то" onClick="ImgShw('celebrities_476.jpg','600','450', '');
return false;" href="" target=_blank>< img src="icon_celebrities_476.jpg"
hspace='0' vspace='0' border='0'>< /a>
< /body>
< /html>
Иконку для картинки отображает тег < a> ... < /a>, а предпросмотр выполняет функция ImgShw, написанная на JavaScript. В качестве параметров ей передаются месторасположение картинки (в этом примере иконка и сама картинка лежат в текущем каталоге, поэтому полный путь опущен), ширина и высота картинки, а также параметр alt. В фотогалерее, написанной на PHP, нужно сгенерировать данный код, а параметры картинки (ширина и высота) целесообразно получать с помощью вызова функции getimagesize(). И конечно, необходим код, который читает директорию с файлами фотографий, генерирует иконки для них, правильно заполняет тег title (это информацию неплохо было бы читать из jpeg-файла). По такому принципу работает моя фотогалерея. |
