Просмотр картинки для фотогалереи в отдельном окне |
![]() |
Добавил(а) microsin |
Здесь описывается простой пример, как сделать в фотогалерее предпросмотр картинки в открывающемся отдельном окне 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-файла). По такому принципу работает моя фотогалерея. |