+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Постраничный вывод фотографий, изображений, картинок на PHP

Итак, что мы попробуем реализовать в данной статье.

Допустим у нас есть папка на сервере photo/
В ней находятся нужные нам картинки реального размера и их уменьшенные копии. Чтобы не было путаницы уменьшенные копии носят такое же имя что и оригинал, только в начале добавлена еще буква m
photo/1.jpg | photo/m1.jpg
photo/2.jpg | photo/m2.jpg
photo/3.jpg | photo/m3.jpg
И так далее
Здесь же мы разрешим пользователю выбрать количество изображений на странице

Создаем файл index.php, пишем в него вот такой код:
<?php
$url="photo";

// Количество на странице
$link1="<a href='index.php?n=1'>1</a>";
$link="<a href='index.php?n=15'>15</a>";
$link2="<a href='index.php?n=20'>20</a>";
$link3="<a href='index.php?n=25'>25</a>";

// получаем кол-во изображений
if(isset($_GET["n"])):
$n=$_GET["n"];
else: $n="15"; // по умолчанию
endif;

// защита от ввода вручную кол-ва изображений
$temp_array=array("1","15","20","25");
if(!ctype_digit($n) or !in_array($n,$temp_array)):
$n="15";
endif;

switch($n):
case 1:
$max="1"; $link1="<b>1</b>";
break;

case 15:
$max="15"; $link="<b>15</b>";
break;

case 20:
$max="20"; $link2="<b>20</b>";
break;

case 25:
$max="25"; $link3="<b>25</b>";
break;
endswitch;

$dir=opendir($url);
while(($file=readdir($dir))!==false):
// здесь мы выбираем только наши оригинальные фотографии
// условие $file{0}!="m" обозначает
//не брать файлы у которых первый символ буква m
if($file!="." && $file!=".." && $file{0}!="m"):
$images[]=$file;
endif;
endwhile;
closedir($dir);

// количество изображений
$count=count(@$images);
/* делим общее кол-во изображений на максимальное
округляем в большую сторону и тем самым получаем
общее число страниц */
$pages=ceil($count/$max);

// вводим переменную, указывающую номер страницы
if(empty($_GET["p"])){$_GET["p"]="1";}
$p=$_GET["p"];

// защита от ввода вместо номера страницы какой-нибудь ерунды
// или если кто-то вводит номер страницы больше, чем всего у нас страниц
if(!ctype_digit($p) or $p>$pages):
$p="1";
endif;
$first=($p*$max)-$max;
$last=($p*$max)-1;
?>

Далее html код
<!DOCTYPE html>
<html><head>
<title>Постраничный вывод фотографий, изображений, картинок. PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body link="#0000ff" vlink="#0000C3">
<h1>Постраничный вывод фотографий, изображений, картинок. PHP</h1>
<br>
И вновь php код. Вывод фотографий и постраничная навигация
<?php
print "Фотографий на страницу: $link1 | $link | $link2 | $link3 :: Всего <b>$count</b><br><br>";
print "<div id='pic_here'>";
for($i=$first;$i<=$last;$i++):
if(@$images[$i]):
print "<a href='$url/$images[$i]' target='_blank'><img src='$url/m$images[$i]' class='img'></a>\r\n";
endif;
endfor;

// если страниц больше одной
if($pages>1):
print "<br><br>Страницы:<br>";
#две назад
if(($p-2)>0):
$ptwoleft=" <a class='first_page_link' href='index.php?n=$n&p=".($p-2)."'>".($p-2)."</a> ";
else:
$ptwoleft=null;
endif;

#одна назад
if(($p-1)>0):
$poneleft=" <a class='first_page_link' href='index.php?n=$n&p=".($p-1)."'>".($p-1)."</a> ";
$ptemp=($p-1);
else:
$poneleft=null;
$ptemp=null;
endif;

#две вперед
if(($p+2)<=$pages):
$ptworight=" <a class='first_page_link' href='index.php?n=$n&p=".($p+2)."'>".($p+2)."</a> ";
else:
$ptworight=null;
endif;

#одна вперед
if(($p+1)<=$pages):
$poneright=" <a class='first_page_link' href='index.php?n=$n&p=".($p+1)."'>".($p+1)."</a>";
$ptemp2=($p+1);
else:
$poneright=null;
$ptemp2=null;
endif;

# в начало
if($p!=1 && $ptemp!=1 && $ptemp!=2):
$prevp="<a href='index.php' class='first_page_link' title='В начало'><<</a> ";
else:
$prevp=null;
endif;

#в конец
if($p!=$pages && $ptemp2!=($pages-1) && $ptemp2!=$pages):
$nextp=" ... <a href='index.php?n=$n&p=".$pages."' class='first_page_link'>$pages</a>";
else:
$nextp=null;
endif;

print "<br>".$prevp.$ptwoleft.$poneleft.'<span class="num_page_not_link"><b>'.$p.'</b></span>'.$poneright.$ptworight.$nextp;
endif;
print "</div>";
?>
И завершаем нашу страницу
<br><br>
</body></html>
Добавим стилей
#pic_here{
width:930px;
border:2px solid gray;
background:silver;
margin:0 auto;
box-shadow:0 0 10pt #727272;
padding:10pt;
border-radius:4pt;}
.img{
border-radius:4pt;
border:3px solid #A7A7A7;
display:inline-block;
margin:4pt;}
a.first_page_link:link,a.first_page_link:visited{
border:1px solid #808080;
text-align:center;
height:20px;
padding:4px 9px 4px 9px;
font:14px Arial,Helvetica,sans-serif;
border-radius:3pt;
text-decoration: none;
color:#000;
font-weight:bold;
text-decoration:none;}
.num_page_not_link{
font:14px Arial,Helvetica,sans-serif;
color:#0000ff;
border-bottom:2px solid #0000ff;
text-align:center;
height:18px;
padding:4px 10px 4px 10px;}

Для любимого IE в класс img добавляем строку *display:inline;

Демонстрация


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 5943