Отправляет email-рассылки с помощью сервиса Sendsay

Сайтостроительство. Раскрутка. Практические решения

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Декабрь 2002   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Александр Левитас

Статистика

10.020 подписчиков
-11 за неделю
←   Все выпуски   →

Сайтостроительство. Практические решения.


Информационный Канал Subscribe.Ru

Здравствуй дорогой читатель!
Ты наверное когда-нибудь делал свой фотоальбом и знаешь сколько времени уходит на его создание. Есть программы генераторы фотоальбома, но есть существенный недостаток у этих программ. При добавлении новой фотографии приходится переделывать весь код заново. По этому предлагаю Вам воспользоваться динамическим фотоальбомом.

Динамический фотоальбом.

Для начала Вам понадобится создать на своем компьютере виртуальный сервер. Предлагаю такую конфигурацию Apache+PHP (документацию и настройку легко найдете в Internet, в конце статьи приведены ссылки). Если у вас все работает, это просто отлично.
Работу описанного фотоальбома можно посмотреть по адресу: http://meshera.h1.ru/photos/index.php
Будем делать фотоальбом без использования баз данных и всяких дополнительных и вспомогательных файлов, будем брать за основу файл просмотра превью, который и будет генерировать фотоальбом.
И так. Для начала создаем в корневой директории нашего сайта каталоги с названиями: \lo и \hi, и два файла: index.php и show.php. Как видите для динамического фотоальбома не очень то много файлов нужно. Но про них позже.
У вас есть фотки, скажем в формате .jpg, их нужно оптимизировать (чтобы поменьше места занимали, но и качеством не пострадали, например возьмите за основу формат 640х480 JPEG с качеством сжатия 85%) и положить в каталог \hi, при этом лучше файлы назвать так, например k00.jpg; k01.jpg …, или еще лучше по дате фотографии (позже я опишу зачем это нужно). После делаем превьюшки размером скажем максимально 120х120 JPEG (что бы они загружались быстренько, и их средний размер составлял в среднем 3-4 Kbyte), и положим их с соответствующею директорию \lo. Имена превьюшек и фоток должны полностью быть идентичными.
Структура директории, где располагается фотоальбом (пример)
/www/hi
/www/hi/20020613.jpg
/www/lo
/www/lo/20020613.txt
/www/lo/20020613.jpg
/www/index.php
/www/show.php

И так, все подготовили для написания основного скрипта альбома.
Для начала напишем файл для просмотра фоток, находящиеся в каталоге \hi, итак пишем:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<img src="<? echo $name; ?>"><!-- выводим фото, имя файла лежит в переменной $name -->
</body>
</html>
 Как это все работает. Запускаем серевер Apache и открываем наш локальный хост, на котором расположен фотоальбом и запускаем файл show.php с именем какой-нибудь картинки, например: http://meshera.h1.ru/show.php?name=./hi/k00.jpg . Скрипт нам выдаст нашу фотографию.
Не очень то и красиво. Дополним скрипт подписью к фотографии и сделаем ее посередине окна браузера.
<html>
<head>
<title>Фото: <? echo $title; ?></title> <!-- заголовок к нашему окну вывода картинки -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFFFFF" text="#000000" marginwidth="5" marginheight="5" leftmargin="1" topmargin="1">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td align="center"><? echo "Фото: $title"; ?></td></tr><!-- подписываем картинку с верху посередине -->
<tr><td align="center"><img src="<? echo $name; ?>"></td></tr><!-- выводим картинку -->
</table>
</body>
</html>
 Как видим, в файле вывода мы используем две переменные $name - имя файла фотографии с относительным путем к ней и переменная $title - название фото. Сразу возникает вопрос: откуда мы будем брать описание или название фотки? Отвечаю: делаем текстовые файлики с аналогичными названиями самих фоток, т.е. есть например файл k00.jpg , делаем для него текстовый файл k00.txt, в котором пишем одной строчкой подпись к фотографии и ложим эти файлы в директорию \lo.
Теперь определимся, как вы будем выводить превью, и создадим файл index.php - основной скрипт фотоальбома.
Зададим следующие переменные:
$row - количество превьюшек по вертикали
$col - количество превьюшек по горизонтали
$page - текущая станица фотоальбома (разбиваем фотоальбом на страницы, т.к. общее количество фотографий может не уместиться на одной станице фотоальбома)
$cell - общее количество превьюшек на одной странице.
$hidir - директория, где хранятся фотографии
$lodir - директория с превью
$counting - количество всех фотографий
Теперь все это оформим в index.php:
<html>
<head>
<title>Фотоальбом</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFFFFF" text="#000000" marginwidth="5" marginheight="5" leftmargin="1" topmargin="1">
<?
if (!isset($page)) $page=0;
$row=3;
$col=4;
$cell=$row*$col;
$hidir="./hi/";
$lodir="./lo/";
 Здесь, все понятно кроме одной строчки if (!isset($page)) $page=0; Эта строка проверяет, когда мы зашли только, на страничку фотоальбома, переменная $page не имеет никакого значения, поэтому нужно ее проинициализировать. Мы выбрали кол-во строк 3 и колонок 4, почему? Подсчитаем 4 умножаем на замер превью 120, плюс к превью 10 пикселей оставляем расстояние между ними. Получаем 4*(120+10)=520 писелей, это для того чтобы умещалось у всех на мониторах, некоторые ведь работают с разрешением экрана 640х480 :( А теперь подсчитаем сколько страничка будет грузится 4*3 =12 количество картинок, при этом картинка в среднем занимает 4 кило, получаем 48 килобайт. Довольно небольшой размер, правда. Загрузится быстро за секунды 3-4.
Теперь возвратимся к написанию скрипта.
Что, будем делать дальше? А вот что. Прочитаем весь каталог, где находятся маленькие картинки - превью, и сопоставим их с фотографиями, если такой фотографии нет, то ее не будем выводить. Для этого имена имеющихся фотографий занесем в массив $nfile. Допишем следующие строки и проследим за комментариями:
$i=0; // обнуляем счетчик фотографий
$handle = opendir ('./lo'); //открываем директорию
while ($filename = readdir($handle)) // считываем из директории последовательно все файлы
if ($filename != '.' && $filename != '..') // нам это совсем не нужно, т.к. это не файлы
{
list($name,$ext)=explode(".",$filename); // выделяем из считанного файла его имя: $name
// и расширение: $ext
if ($ext=="jpg") // проверяем, является ли файл картинкой формата JPEG, если да, то
if (file_exists($hidir.$name.".jpg")) // проверяем, есть ли фотография к превьюшке
{
$nfile[$i]=$name; // если да, то заносим имя фотографии в массив имен фотографий и
$i++; // увеличиваем счетчик фотографий на 1
}
}
closedir($handle); // закрываем открытую директорию
$counting=$i; // по окончании сканирования каталога, заносим количество
// фотографий в соответствующую переменную
 Теперь, вернемся к тому как мы называли фотографии, правильно номерами с префиксом. Можно было их назвать датами, когда фотографировали, например:20021204.jpg , т.е. 4 декабря 2002 года. Все это нужно для того чтобы правильно расположить фотографии в фотоальбоме. Для этого отсортируем массив с фотографиями, добавив строчку:
sort($nfile);
Разобьем все фотографии на страницы, в которых они будут выводится. Для этого мы подсчитали количество выводимых фотографий на одну страницу $cell=$row*$col, и будем формировать массив превьюшек для текущей страницы, и также сформируем массив подписей к фотографиям.
$j=0; // обнуляем счетчик превьюшек, для текущей страницы
for ($i=$page*$cell;$i<($page+1)*$cell;$i++) // организуем цикл в котором:
// $i=$page*$cell - с какой фотографии начинать. Умножаем номер текущей страницы на количество
// отображаемых ячеек на этой странице, получаем номер фотографии,
// с которого будем выводить превью;
// $i<($page+1)*$cell - до какой фотографии перебирать
{
$lfile[$j]=$nfile[$i].".jpg"; // заполняем массив имен фотографий
if (file_exists($lodir.$nfile[$i].".txt")) // проверяем, есть ли подпись к фотографии
{
$file=file($lodir.$nfile[$i].".txt"); // если есть подпись, считываем файл
$titles[$lfile[$j]]=$file[0]; // и заполняем массив с подписями к фотографии
} else $titles[$lfile[$j]]=""; // если нет подписи, очищаем подпись, которая была
$j++; // увеличиваем счетчик превьюшек
}
 Здесь, разберем такую строчку как $titles[$lfile[$j]]. В языке PHP это называется хеш-массив. Это тот же массив, только индексом обращения к элементу служит строка, а не число или символ. В данном случае будет удобно обращаться к массиву именно по имени файла фотографии.
Вот, вроде и все. Мы сформировали фотографии, которые нужно вывести на текущей странице, остается сделать сам вывод и навигацию.
О навигации. Сделаем ее такой, расположим две кнопки: вперед и назад, что значит перейти на следующую страницу и соответственно на предыдущую. Так же расположим номера страниц. И сразу красиво все оформим.
И так пишем дальше:
?>
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center"><?
if ($page>0) echo "<a href=index.php?page=".($page-1).">назад&nbsp;</a>";
else echo "назад&nbsp;";
// проверяем не первая ли это страница, если нет то ссылку делаем на предыдущую,
// иначе не делаем ссылку вообще
?></td>
<td align="center"><?
if ($page<$counting/$cell-1) echo "&nbsp;<a href='index.php?page=".($page+1)."'>вперед</a>";
else echo &nbsp;вперед";
// тоже самое с кнопкой ВПЕРЕД, полько проверяем не последняя ли это страница
?></td>
</tr>
<tr><td colspan="2" align="center"><?
for ($i=1;$i<$counting/$cell+1;$i++)
// рассчитываем сколько страниц будет в альбоме и создаем ссылки на них
if ($page==$i-1) echo "<b>$i</b>&nbsp;";
// при условии, текущая страница будет выводится жирным шрифтом
// и не будет на нее ссылка, т.к. мы уже на ней находимся
else echo "<a href='index.php?page=".($i-1)."'>$i</a>&nbsp;";
?></td></tr>
</table>
 Вот и оформили навигацию по фотоальбому, ее еще раз сделаем в низу страницы. А сейчас напишем вывод превьюшек:
<table width="530" bgcolor=#FFFFFF border="0" cellspacing="2" cellpadding="0" align="center"><?
for ($j=0;$j<$row;$j++) // создаем сначала цикл по строкам
{
?><tr>
<?
for ($i=0;$i<$col;$i++) // затем делаем цикл по столбцам
{
$index=$i+$j*$col; // вычисляем номер картинки, которую будем выводить
?><td width="130" height="124" align="center" bgcolor="#EEEEEE"><?
if ($index<count($lfile)&&$index>=0)
// проверяем есть ли картинка с таким индексом в массиве $lfile
{
$n=$lfile[$index]; // в переменную $n заносим название картинки
if (file_exists($hidir.$n))
// проверяем, есть ли такая фотография, если есть то выводим ее и ставим ссылку для
// вывода ее через файл просмотра фотографий show.php,
// в который и передаем имя файла фотографии и подпись к фотографии
// Если не находим фотографии в каталоге фотографий, то ничего не выводим
echo "<a href='show.php?name=$hidir$n&title=$titles[$n]' target='_blank' title='$titles[$n]'><img border=0 src='$lodir$n'></a>"; } else echo "&nbsp;";
?></td><? } ?></tr>
<tr>
<?
for ($i=0;$i<$col;$i++)
// аналогичным образом формируем подпись под фотографией, как и вывод ее превью
{
$index=$i+$j*$col;
?><td width="130" align="center" bgcolor="#EEEEFF"><?
if ($index<count($lfile)&&$index>=0) { $n=$lfile[$index]; if (file_exists($hidir.$n))
echo "<a href='show.php?name=$hidir$n&title=$titles[$n]' target='_blank' class='small'>$titles[$n]</a>";} else echo "&nbsp;";
?></td><? }
?></tr>
<? } ?></table>
Как видите, все очень просто. Осталось лишь дальше написать еще раз навигационную панель и закрыть все незакрытые теги:
</td>
</tr>
</table>
</body>
</html>
Осталось наложить на скрипт свой дизайн и наслаждаться фотоальбомом.
Теперь для наглядности приведу код всех файлов.

show.php - скрипт для просмотра фотографий.
<html>
<head>
<title>Фото: <? echo $title; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFFFFF" text="#000000" marginwidth="5" marginheight="5" leftmargin="1" topmargin="1">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td align="center"><? echo "Фото: $title"; ?></td></tr><tr><td align="center"><img src="<? echo $name; ?>"></td></tr>
</table>
</body>
</html>

index.php - скрипт фотоальбома.
<html>
<head>
<title>Фотоальбом</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFFFFF" text="#000000" marginwidth="5" marginheight="5" leftmargin="1" topmargin="1">
<?
if (!isset($page)) $page=0;
$i=0;
$j=0;
$row=3;
$col=4;
$cell=$row*$col;
$hidir="./hi/";
$lodir="./lo/";
$handle = opendir ('./lo');
while ($filename = readdir($handle))
if ($filename != '.' && $filename != '..')
{
list($name,$ext)=explode(".",$filename);
if ($ext=="jpg")
if (file_exists($hidir.$name.".jpg")) { $nfile[$i]=$name; $i++;}
}
$counting=$i;
sort($nfile);
for ($i=$page*$cell;$i<($page+1)*$cell;$i++)
{
$lfile[$j]=$nfile[$i].".jpg";
if (file_exists($lodir.$nfile[$i].".txt"))
{
$file=file($lodir.$nfile[$i].".txt");
$titles[$lfile[$j]]=$file[0];
} else $titles[$lfile[$j]]="";
$j++;
}
closedir($handle);
clearstatcache();
?><table border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td align="center"><?
if ($page>0) echo "<a href=index.php?page=".($page-1).">назад&nbsp;</a>"; else echo "назад&nbsp;"; ?></td>
<td align="center"><? if ($page<$counting/$cell-1) echo "&nbsp;<a href='index.php?page=".($page+1)."'>вперед</a>"; else echo "&nbsp;вперед"; ?></td>
</tr>
<tr><td colspan="2" align="center"><? for ($i=1;$i<$counting/$cell+1;$i++)
if ($page==$i-1) echo "<b>$i</b>&nbsp;"; else echo "<a href='index.php?page=".($i-1)."'>$i</a>&nbsp;";
?></td></tr>
</table>
<table width="530" bgcolor=#FFFFFF border="0" cellspacing="2" cellpadding="0" align="center"><?
for ($j=0;$j<$row;$j++)
{
?><tr>
<?
for ($i=0;$i<$col;$i++)
{
$index=$i+$j*$col;
?><td width="130" height="124" align="center" bgcolor="#EEEEEE"><?
if ($index<count($lfile)&&$index>=0) { $n=$lfile[$index]; if (file_exists($hidir.$n))
echo "<a href='show.php?name=$hidir$n&title=$titles[$n]' target='_blank' title='$titles[$n]'><img border=0 src='$lodir$n'></a>"; } else echo "&nbsp;";
?></td><? } ?></tr>
<tr>
<? clearstatcache();
for ($i=0;$i<$col;$i++)
{
$index=$i+$j*$col;
?><td width="130" align="center" bgcolor="#EEEEFF"><?
if ($index<count($lfile)&&$index>=0) { $n=$lfile[$index]; if (file_exists($hidir.$n))
echo "<a href='show.php?name=$hidir$n&title=$titles[$n]' target='_blank' class='small'>$titles[$n]</a>";} else echo "&nbsp;";
?></td><? }
?></tr>
<? } clearstatcache();
?></table>
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td colspan="2" align="center"><? for ($i=1;$i<$counting/$cell+1;$i++)
if ($page==$i-1) echo "<b>$i</b>&nbsp;"; else echo "<a href='index.php?page=".($i-1)."'>$i</a>&nbsp;";
?></td></tr>
<tr><td align="center"><?
if ($page>0) echo "<a href=index.php?page=".($page-1).">назад&nbsp;</a>"; else echo "назад&nbsp;"; ?></td>
<td align="center"><? if ($page<$counting/$cell-1) echo "&nbsp;<a href='index.php?page=".($page+1)."'>вперед</a>"; else echo "&nbsp;вперед"; ?></td>
</tr></table>
</td>
</tr>
</table>
</body>
</html>

ВНИМАНИЕ!!! Все файлы лучше всего задавать в нижнем регистре, т.к. имена файлов чуствительны к регистру в Unix подобных операционных системах!

Посмотреть работу скрипта можно по адресу: http://meshera.h1.ru/photos/index.php

Теперь обещанные ссылки:
www.php.net - здесь все найдете о PHP, сможете скачать новую версию, все это бесплатно.
www.apache.org - здесь вы найдете сервер Apache На этом пока все.
Продолжайте нас читать и вы найдете для себя много нового!

Свои отзывы вы можете направлять по адресу: subscribe@st5.hut.ru
Материалы сайта: Пятая студия
http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное