|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Всего статей: 793
| » Главная » PHP » Создание галереи с помощью PHP |
 |
Создание галереи с помощью PHPАлександр Тотоев totoeval@mtu-net.ru |
Галерея имеет следующие свойства:
Программа ищет файлы картинок в указанном ей каталоге с маленькими картинками (предпросмотр). Затем она ищет описания для выводимых картинок в текстовом файле. Определяет кол-во картинок и создает навигацию по галерее. Определяет размеры картинок и выводит их с описаниями и с яваскриптом на каждой картинке, который открывает большой вариант картинки в новом окне с размерами на 40 пикселей больше размера картинки с возможностью скроллинга, если таковой окажется необходим для просмотра картинки полностью (при малом размере экрана). Вот собственно и код варианта:
<html>
<head>
<TITLE>Photo-galery</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">
<LINK REL=STYLESHEET TYPE="text/css" href="../../style.css">
</head>
<body leftmargin=0 topmargin=0 marginwidth="0" marginheight="0">
<table width=650 cellspacing=0 cellpadding=5 border=0 cols=2><tr><td>
<div align="center">
<br>
<p align="center" class="zag-main">Картинная галерея.</p>
<?
// Пишем переменные, которые зависят от Вас
// максимальное кол-во фоток на странице
$scrpic=10;
// путь к большим картинкам
$big='../pic/big_regats/';
// путь к малым картинкам
$small='../pic/small_regats/';
// путь к файлу с текстами к картинкам
$ini=$DOCUMENT_ROOT.'/avrora/pic/read/read_regats.ini';
// В данном случае, файл строится так:
// строка с названием картинки (без расширения файла)
// затем строка с подписью к картинке
// затем название следующей картинки и так далее.
// Например:
// 1
// Моя первая фотография rt
// моя фотография rt.jpg
// ... и так до последней картинки. Если подписи к картинке нет,
// то надо оставлять пустую строку.
$kav="'"; // одинарные кавычки пригодятся нам потом в таком виде
// для отображения в браузере в яваскрипте. Там необходимо
// иметь оба вида кавычек, а для php надо еще поставить
// выводимое выражение в кавычки.
$podp='увеличить'; // надпись под картинкой,
// побуждающая клиента нажать на картинку для
// увеличения
$style_zag2='zag2-main'; // стили текста на странице
Программа администрирования текстов описаний: Была применена в моей статье "Импортирование информации с чужого сайта на свой сайт в свой дизайн". Я считаю этот способ самым проостым для начинающего программиста. Более сложный способ обновления я собираюсь сделать в будущих статьях. Конечно, можно делать более серьезные интерфейсы, но в этом варианте, который конечно не рассчитан на ламера, можно быстро править сразу все позиции. Вот собственно код:
<html>
<head>
<title>admin weather</title>
</head>
<body>
<?php
// адрес файла, в котором и будут записываться названия файлов с описаниями
$adr=$DOCUMENT_ROOT."/avrora/pic/read/read_regats.ini";
$password='pass'; // простенькая система авторизации
$eror='Password eror!';
$old=file($adr); // читаем то, что сейчас есть в файле
if($submit)
{ // проверяем на нажатость кнопки
if($pass==$password)
{
$fp=fopen($adr,"w");
fwrite ($fp, $ini); // записываем в файл измененные данные
fclose($fp);
$old=file($adr);
}else{ echo $eror; }
}
?>
// информация, введенная в форму, обрабатывается этим же файлом
<form method=post action="<?php echo $PHP_SELF?>">
password:<input type=text name=pass><br>
inicialisation:<textarea name="ini" rows=15 cols=60>
<?
for($i=0; $i<sizeof($old); $i++)
{
// выводим на экран текущий вариант файла
echo $old[$i], "";
}
?>
</textarea>
<br>
<input type=submit name="submit" value="Enter">
</form>
</body>
</html>
В этом варианте, файл создаем так, как написано в комментарии к программе: 1 Моя первая фотография rt моя фотография rt.jpg , где 1 и rt - имена файлов, а строки под ними соответственно описания к ним. Отличие этого варианта отпредыдущего в том, что: Программа читает файл инициализации галереи. В каждой строке такая конструкция (так надо заполнять файл для этого варианта!): 1.jpg|Моя первая фотография rt.jpg|моя фотография rt.jpg где символ "|" - это разделитель между описанием и именем файла картинки. Как видно, в этом варианте надо писать в файле имя файла картинки с расширением. Если это вам это очень мешает, то можете переделать так, чтобы было в файле только имя, а расширение определялось бы автоматически, основываясь на первом примере. Алгоритм такого варианта будет: определитьимя картинки, считать имена файлов в папке с файлами, обрезая у имен файлов расширения, находим нужный, сравнивая каждый раз с тем, что взяли из файла. Именно совпавший и будет искомым. Далее программа, создав массив из имен и описаний картинок, определяет, на какой странице галереи клиент находится и выводит ему соответственно ту или иную страницу. Сам движок галереи остается тем же, как вы наверное заметили. Изменяются некоторые его части. Вот сам код:
<html>
<head>
<TITLE>Photo-galery</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">
<LINK REL=STYLESHEET TYPE="text/css" href="../../style.css">
</head>
<body leftmargin=0 topmargin=0 marginwidth="0" marginheight="0">
<table width=650 cellspacing=0 cellpadding=5 border=0 cols=2><tr><td>
<div align="center">
<br>
<p align="center" class="zag-main">Картинная галерея.</p>
<?
// Пишем переменные, которые зависят от Вас
$scrpic=10; // максимальное кол-во фоток на странице
$big='../pic/big_regats/'; // путь к большим картинкам
$small='../pic/small_regats/'; // путь к малым картинкам
// путь к файлу с текстами к картинкам
$ini=$DOCUMENT_ROOT.'/avrora/pic/read/read_regats1.ini';
// В данном случае, файл строится так: строка с названием картинки (без расширения файла)
// затем строка с подписью к картинке
// затем название следующей картинки и так далее.
//Например:
//1|Моя первая фотография
//rt|моя фотография rt.jpg
//.... и так до последней картинки. Если подписи к картинке нет, то надо оставлять
// пустую строку.
$kav="'"; // одинарные кавычки пригодятся нам потом в таком виде
// для отображения в браузере в яваскрипте. Там необходимо иметь
// оба вида кавычек, а для php надо еще поставить выводимое выражение
// в кавычки.
$podp='увеличить'; // надпись под картинкой,
// побуждающая клиента нажать на картинку для увеличения
$style_zag2='zag2-main'; // стили текста на странице
$style_osn='osn-main'; // стили текста на странице
$style_link='link'; // стили текста на странице
//сама программа
$text=file($ini); // читаем файл с подписями к картинкам в массив $text
for($i=0; $si<sizeof($text); $i++)
{ // читаем файл ини и сохраняем имена картинок.
$si=$i+1;
$string=explode("|",$text[$i]);
$pic[$si]=$string[0]; // присваиваем текущему элементу массива с именами
// файлов имя текущего файла
$description[$si]=$string[1];
}
$maxpic=count($pic); // сколько файлов в папке с малыми картинками
if($begin=="")
{ // если на страницу зашли впервые, то $begin присваеваем 1
$begin=1;
}
$end=$begin+$scrpic-1; // $end - номер последней картинки на странице
if($end>$maxpic)
{ // если последний номер на странице больше кол-во картинок в папке,
// то он равен последнему
$end=$maxpic;
}
$beginrew=$begin-$scrpic; // при переходе назад, начинаем показывать
// картинки с номера, равному "первый номер
// текущей страницы минус кол-во картинок на странице"
$beginfw=$begin+$scrpic; // при переходе вперед, начинаем показывать картинки с
// номера, равному "первый номер текущей страницы плюс
// кол-во картинок на странице"
// создаем ссылку "назад"
$hrefrew='<a href='.$PHP_SELF.'?begin='.$beginrew.
' class='.$style_zag2.'>назад</a>';
// создаем ссылку "вперед"
$hreffw='<a href='.$PHP_SELF.'?begin='.$beginfw.
' class='.$style_zag2.'>вперед</a>';
// ставим между ссылками "назад-вперед" символ "||"
$navig=$hrefrew.' || '.$hreffw;
if($beginrew<=0)
{ // если мы на первой странице, то ссылка назад не нужна
$hrefrew='<a href='.$PHP_SELF.'?begin='.$beginrew.
' class='.$style_zag2.'>назад</a>';
$navig=$hreffw;
}
if($beginfw>$maxpic)
{
// если мы на последней странице, то ссылка вперед не нужна
$hreffw='<a href='.$PHP_SELF.'?begin='.$beginfw.
' class='.$style_zag2.'>вперед</a>';
$navig=$hrefrew;
}
// вывод на экран номеров страниц галереи
// вычисляем, сколько страниц с картинками
$scrmax=ceil($maxpic/$scrpic);
for($scr=1; $scr<=$scrmax; $scr++)
{ // начиная с первого номера до кол-ва страниц галереи
$beginsrc=($scr-1)*$scrpic+1; // вычисляем номер картинки,
// с которого будут выводиться картинки
// на странице
if($beginsrc==$begin)
{ // если страница текущая,
// то ее номер выводим в виде простого текста, а не ссылки
echo ' <span class='.$style_zag2.'>'.$scr.
'</span> ';
}else
{ // если страница не текущая, то выводим ссылку на нее
// и передаем параметры:
// номер картинки, с которой начать выводить на этой странице
echo ' <a href='.$PHP_SELF.'?begin='.$beginsrc.
' class='.$style_zag2.'> '.$scr.' </a> ';
}
}
echo '<p align=center class='.$style_zag2.'>'.$navig.
'</p>';
// вывод на экран навигации "вперед-назад"
for($i=$begin; $i<=$end; $i++)
{// начиная с первой картинки на странице,
// перебираем картинки вплоть до последней на странице
$descript=$description[$i];
$photo=$big.$pic[$i];
// присваиваем $photo имя малого файла+путь к папке с большими картинками
$size=getimagesize($photo); // читаем информацию о картинке
$width=$size[0]+40; // получаем ширину картинки и + 40
// (свободное поле вокруг картинки)
$height=$size[1]+40; // получаем высоту картинки и + 40
// (свободное поле вокруг картинки)
$sxp=$size[2]; // получаем тип (расширение файла картинки)
$smphoto=$small.$pic[$i];
// присваиваем $smphoto имя малого файла+путь к папке с малыми картинками
$smsize=getimagesize($smphoto); // читаем информацию о картинке
$smwidth=$smsize[0]; // получаем ширину картинки
$smheight=$smsize[1]; // получаем высоту картинки
$smexp=$smsize[2]; // получаем тип (расширение файла картинки)
// статус открываемого окна с большой картинкой
$winstat='toolbar=0,location=0,directories=0,status=0,menubar=0,'.
'scrollbars=1,resizable=1,width='.$width.',height='.$height;
// выводим таблицу галереи.
// если номер картинки четный, то картинка слева, а описание справа и наоборот
// делаем это для неужасного внешнего вида галереи
// Вы можете разположить картинки как Вам заблагорассудится.
// итак:
?><table width=420 cellspacing=0 cellpadding=5 border=0 cols=2><tr><?
// выводим одинаковую часть кода таблицы дл ячейки картинки
// Далее выводим картинки в ячейках таблиц с описаниями. Делаем все с "предпросмотром"
// "предпросмотр предпочтителен, потому что не надо сразу грузить большие файлы,
// а клиент если захочет, сам загрузит то, что его заинтересовало в новых окнах.
//
if($i/2==ceil($i/2))
{ // если номер картинки на странице четный
echo '<td width=210 rowspan=2><p align=right CLASS='.
$style_osn.'>'.$descript.'</p
></td><td hight='.($smheight+2).
'><table width=202 cellspacing=1 cellpadding=0 border=0 '.
'bgcolor="#000000" border=0><tr><td><A HREF='.$photo.
' target="'.$i.'" onclick="window.open('.$kav.$photo.$kav.', '.$kav.$i.$kav.
', '.$kav.$winstat.$kav.');">
<IMG SRC='.$smphoto.' WIDTH='.$smwidth.' HEIGHT='.$smheight.
' BORDER=0 alt="увеличить"></A></td></tr></table
></td></tr><tr><td valign=top
><center><A HREF='.$photo.' target="'.$i.'" onclick="window.open('.$kav.$photo.$kav.
', '.$kav.$i.$kav.', '.$kav.$winstat.$kav.');" CLASS='.$style_link.'>'.$podp.
'</a></center></td></tr></table>';
}else
{ // если номер картинки нечетный
echo '<td align=left><table width=202 cellspacing=1 cellpadding=0 border=0 bgcolor="#000000">'.
'<tr><td hight='.($smheight+2).'><A HREF='.$photo.
' target="'.$i.'" onclick="window.open('.$kav.$photo.$kav.', '.$kav.$i.$kav.
', '.$kav.$winstat.$kav.');"><IMG SRC='.$smphoto.' WIDTH='.$smwidth.
' HEIGHT='.$smheight.' BORDER=0 alt="увеличить"></A></td>'.
'</tr></table></td>'.
'<td width=210 rowspan=2><p align=left CLASS='.$style_osn.'>'.
$descript.'</p
></td></tr><tr><td valign=top
><center><A HREF='.$photo.' target="'.$i.
'" onclick="window.open('.$kav.$photo.$kav.', '.$kav.$i.$kav.
', '.$kav.$winstat.$kav.');" CLASS='.$style_link.'>'.$podp.
'</a></center></td></tr></table>';
}
}
// вывод на экран "вперед-назад"
echo '<p align=center class='.$style_zag2.'>'.$navig.
'</p>';
// вывод на экран номеров страниц
echo '<div align=center>';
for($scr=1; $scr<=$scrmax; $scr++)
{
$beginsrc=($scr-1)*$scrpic+1;
if($beginsrc==$begin)
{
echo ' <span class='.$style_zag2.
'>'.$scr.'</span> ';
}else
{
echo ' <a href='.$PHP_SELF.'?begin='.$beginsrc.
' class='.$style_zag2.'> '.$scr.' </a> ';
}
}
?>
</div>
</td></tr></table>
</body>
</html>
Программа администрирования та же, что и в варианте 1.
<?
//инициализация mysql:
$mysql_login='login';
$mysql_host='host';
$mysql_pass='password';
$mysql_db='db';
mysql_connect($mysql_host,$mysql_login,$mysql_pass);
mysql_select_db($mysql_db);
mysql_query("set CHARACTER SET cp1251_koi8")
or die ("!--не могу записать");
// эта строка используется, если сайт в кодировке win, а база в
// кодировке кои-8.Если кодировки совпадают, строку надо закомментировать.
$query="CREATE TABLE galery_regats (numer tinyint(4) NOT NULL, name text
NOT NULL, description text NOT NULL)";
$res=mysql_query($query)
or die ("!--не могу создать таблицу");
// переход на страницу администрирования
header("location: admin.php");
?>
Программа администрирования:
<html>
<head>
<title>Admin galery</title>
<link rel=stylesheet type="text/css" href="../../style.css">
</head>
<body bgcolor=#eeeeee>
<br>
<?
// логин/пароль
$log='total';
$pas='total';
//инициализация
mysql:
$mysql_login='login';
$mysql_host='host';
$mysql_pass='password';
$mysql_db='db';
//
$style_zag2='zag2-main'; // стили текста на странице
$style_osn='osn-main'; // стили текста на
странице$style_link='link'; // стили текста на странице
$kon_str="\n"; // конец строки
$razdel="|"; // разделитель между именем картинки и описанием
?>
<p align="center" class="<? echo $style_zag2; ?>">Картинная галерея.</p>
<?
mysql_connect($mysql_host,$mysql_login,$mysql_pass);
mysql_select_db($mysql_db);
mysql_query("set CHARACTER SET cp1251_koi8")
or die ("!--не могу записать");
switch ($prov) { // проверяем состояние переменной $prov
case "edit":
// если пишем новый вариант базы:
if ($login!=$log || $pass!=$pas)
{
echo "Введите правильно логин/пароль";
} // если пароль неверен
else
{
// удаляем текущую базу картинок и создаем пустую таблицу
$query="DROP TABLE galery_regats"
$res=mysql_query($query)
or die ("!--не могу удалить таблицу");
$query="CREATE TABLE galery_regats (numer tinyint(4) NOT NULL, name text NOT NULL, description text NOT NULL)";
$res=mysql_query($query) or die ("!--не могу создать таблицу");
// бьем наш список по символу переноса строки
$pics=explode($kon_str,$block);
for($i=0; $i<sizeof($pics); $i++)
{ // пишем в базу данные
// бьем строки по символу разделителя
$string=explode($razdel,$pics[$i]);
$query="insert into galery_regats (number,name,description) values ('$i','$string[0]','$string[1]')";
mysql_query($query)
or die ("!--не могу записать"); // пишем в таблицу
}
}
break;
default:
// если мы зашли не по нажатию на ентер:
// читаем базу картинок и сохраняем в массивы
$zapros="select * from galery_regats order by numer";
$res=mysql_query($zapros);
$kol=mysql_num_rows($res);
if($kol==0)
{
echo "<span class=$style_osn>Нет картинок в галерее.</span>";
}
for($i=0;$i<$kol;$i++)
{ // читаем базу и сохраняем имена картинок.
// присваиваем текущему элементу массива
$pic[$i]=mysql_result($res,$i,"name");
$description[$i]=mysql_result($res,$i,"description");
}
break;
}
}
?>
<form method=post action="<? echo $PHP_SELF; ?>">
<textarea name="block" rows="40" cols="40">
<?
// выводим текущее состояние базы картинок
for ($i=0; $i<sizeof($pic); $i++) {
echo $pic[$i].$razdel.$description[$i].$kon_str;
}
?>
</textarea>
<input type="text" name="login" size="10">
<input type="text" name="pass" size="10">
<input type="hidden" name="prov"
value="edit"><input type="submit" name="enter" value="Enter">
</form>
</body>
</html>
Форма заполняется как и во втором варианте.
А для получения 3-го варианта в коде программы 2-го варианта строки от строки
//сама программа
до строки
$maxpic=count($pic); // сколько файлов в папке с малыми картинками
которые являются блоком считывания файла в массивы,
заменяются на блок:
// соединение с базой (коннект)
mysql_connect($mysql_host,$mysql_login,$mysql_pass);
mysql_select_db($mysql_db); // выбор базы
mysql_query("set CHARACTER SET cp1251_koi8")
or die ("-------------не могу записать");
// Если кодировки базы и сайта совпадают - закомментировать эту строку
$zapros="select * from galery_regats order by numer";
$res=mysql_query($zapros);
$kol=mysql_num_rows($res);
if ($kol==0) {
echo "Нет картинок в галерее.";
}
for ($i=0; $i<$kol; $i++) { // читаем файл ини и сохраняем имена картинок.
$si=$i+1;
// присваиваем текущему элементу массива с именами файлов имя текущего файла
$pic[$si]=mysql_result($res,$i,"name");
$description[$si]=mysql_result($res,$i,"description");
}
Результат работы блока точно такой же, что и во втором варианте - массивы $pic и $description, где храним имена файлов картинок и описания к ним. Но работает такая галерея быстрее. Однако, каждый раз, когда хотите залить новую картинку, надо администрить галерею, даже если не нужно описание. А в первом варианте стоит только лишь закинуть в папки файлы картинок. Таким образом, получаем 3 рабочих варианта программы галереи. |
| 11.02.2003 |
