Связь и интернет Архив Программирование
   
Сделать стартовойСделать закладку            
   ПОИСК  
   
Главная / PHP /
8  Perl
8  PHP
8  JavaScript
8  HTML
8  DHTML
8  XML
8  CSS
8  C / C++
8  Pascal и Delphi
8  Турбо Ассемблер
8  MySQL
8  CASE-технологии
8  Алгоритмы
8  Python
8  Обратная связь
8  Гостевая книга
Новости о мире


Создание галереи с помощью php. - Программирование от RIN.RU
Создание галереи с помощью php.

Предлагаю вашему вниманию пример программирования на языке php с использованием баз данных mysql (в одном из вариантов программы) на примере создания галереи фотографий, картинок и т.п. Картинки в предпросмотре должны быть определенной ширины (чтобы не расползалась страница). Подобный вариант используется мной здесь (2 вариант) и здесь (1 вариант).


Галерея имеет следующие свойства:


  • предпросмотр;

  • навигация "вперед-назад";

  • навигация по номерам страниц галереи;

  • наличие описаний к картинкам;

  • администрирование описаний к картинкам;

  • варианты 2 и 3 имеют возможность изменять порядок вывода картинок;

  • вариант 3 сделан с использованием базы mysql

  • варианты 1 и 3 легко преобразуемы в галерею с возможностью дополнения галереи посетителями;




Вариант 1


Программа ищет файлы картинок в указанном ей каталоге с маленькими картинками (предпросмотр). Затем она ищет описания для выводимых картинок в текстовом файле. Определяет кол-во картинок и создает навигацию по галерее. Определяет размеры картинок и выводит их с описаниями и с яваскриптом на каждой картинке, который открывает большой вариант картинки в новом окне с размерами на 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'; // стили текста на странице
$style_osn='osn-main'; // стили текста на странице
$style_link='link'; // стили текста на странице
//
//
//сама программа
$text=file($ini); // читаем файл с подписями к картинкам в массив $text
$dir=$small; // указываем путь к каталогу малых фотографий
$handle=opendir($dir); // читаем заголовок каталога
$si=0; // счетчик файлов в папке
while ($file = readdir($handle)) { // читаем файл, пока не закончатся
if ($file!="..") { // исключаем из списка файлов "." и ".." (корень и верхний каталог).
$pic[$si]=$file; // присваиваем текущему элементу массива с именами файлов имя текущего файла
$si++; // плюсуем к счетчику файлов в папке 1
}
} // следующий файл
$maxpic=count($pic)-1; // сколько файлов в папке с малыми картинками


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++) { // начиная с первой картинки на странице,
// перебираем картинки вплоть до последней на странице
for ($j=0; $j<sizeof($text); $j++) { // читаем файл ини и собираем описания
$name_file=explode(".",$pic[$i]); //выделяем в названии файла его имя (без расширения)
if (trim($text[$j])==$name_file[0]) { // ищем название картинки,
// предварительно обрезав пробелы вокруг названия картинки в файле
// (если текущее название картинки $pic[$i] совпадает с проверяемым $text[$j])
$descript=trim($text[$j+1]);
// если картинка найдена, то в $descript пишем описание к картинке
}
else { // если название картинки не совпадает с искомым, то плюем на него
}
}
$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><p>
</td></tr></table>
</body>
</html>





Программа администрирования текстов описаний:


Конечно, можно делать более серьезные интерфейсы, но в этом варианте, который конечно не рассчитан на ламера, можно быстро править сразу все позиции.


Вот собственно код:




<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  2  3 


 8  Комментарии к статье  8  Обсудить в форуме  8  Обсудить в чате

 
  
  
    Copyright ©  RIN 2003 - 2004      * Обратная связь