Главная arrow Программирование arrow HTML arrow Просмотр картинки для фотогалереи в отдельном окне Thursday, July 27 2017  
ГлавнаяКонтактыАдминистрированиеПрограммированиеСсылки
UK-flag-ico.png English Version
GERMAN-flag-ico.png Die deutsche Version
map.gif карта сайта
нашли опечатку?

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

Поделиться:

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

Последнее обновление ( 19.01.2008 )
 

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

:D:lol::-);-)8):-|:-*:oops::sad::cry::o:-?:-x:eek::zzz:P:roll::sigh:

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

< Пред.   След. >

Top of Page
 
microsin © 2017