Программирование HTML Просмотр картинки для фотогалереи в отдельном окне Mon, May 01 2017  

Поделиться

нашли опечатку?

Пожалуйста, сообщите об этом - просто выделите ошибочное слово или фразу и нажмите Shift Enter.


Просмотр картинки для фотогалереи в отдельном окне Печать
Добавил(а) 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-файла). По такому принципу работает моя фотогалерея.

 

Добавить комментарий


Защитный код
Обновить

Top of Page