Предлагаю вашему вниманию пример программирования на языке 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
| |