Фотоальбом
Речь идет о коде, который позволяет выводить фотографии сначала в уменьшенном виде, и, если посетитель наведет на мелкую картинку указатель мыши, показывать фотографию целиком. Файлы изображений хранятся в папках по темам, уменьшенные копии показываются в левой части страницы (в этом примере, на самом деле - как угодно). Предусмотена возможность выбора раздела и перелистывание списка фотографий в разделе. Теперь код примера:
<?php
$mode=$_GET['mode'];
$tpl=array("view","nature","animal");
if($mode=="")$mode=0;
$dir = dir("img/".$tpl[$mode]);
$i = 0;
while($file= $dir->read())
{
if(stristr($file,".jpg")){
$img[$i]=$file;
$i++;} }
$dir->close();
@sort($img);
$num_pic = $i;
$num_pic1 = $num_pic;
$s_pos=$_GET['s_pos'];
if (empty($s_pos)){$s_pos = 0;}
$s_pos = intval($s_pos);
if ($s_pos < 0) {$s_pos = 0;}
$lim=$num_pic-$s_pos;
if (5<=$lim){$lim=5;}
for ($i = $s_pos; $i < $s_pos+$lim; $i++){
$out=$out."<img src=img/".$tpl[$mode]."/".$img[$i]." id=".$i." height=60 onmouseOver='incp(this.id)' onmouseOut='decp(this.id)'><br><br>";
}
if ($s_pos != 0){$prev= "<A href=photo.php?s_pos=".($s_pos - 5)."&mode=".$mode.">Вверх</A><BR>";}
if ($num_pic1 > $s_pos + 5)
{$next= "<A href=photo.php?s_pos=".($s_pos + 5)."&mode=".$mode.">Вниз</A>";}
$out=$prev.$out.$next;
?>
<HTML>
<head>
<script language=JavaScript>
function incp(n){
var out=document.getElementById('out');
var img=document.getElementById(n);
out.innerHTML='<img src='+img.src+' width='+(document.body.clientWidth-200)+'>';
}
function decp(n){
var out=document.getElementById('out');
out.innerHTML="";
}
</script>
<style>
#out{position:fixed;top:20px;left:140px;z-index=3;}
</style>
</head>
<body >
<a href=photo.php?mode=0>Пейзажи</a> <a href=photo.php?mode=1>Природа</a> <a href=photo.php?mode=2>Животные</a>
<div>
<?echo $out?>
</div>
<div id='out'></div>
</body>
</html>
Теперь детали: сначала получаем код раздела и определяем список разделов в виде массива, например "view","nature","animal". Если код раздела пустой, пусть будет ноль:
$mode=$_GET['mode'];
$tpl=array("view","nature","animal");
if($mode=="")$mode=0;
Читаем папку выбранного раздела, ее название берем как элемент массива разделов с соответствующим номером, отсеиваем от мусора и сортируем картинки по номерам:
$dir = dir("img/".$tpl[$mode]);
$i = 0;
while($file= $dir->read())
{
if(stristr($file,".jpg")){
$img[$i]=$file;
$i++;} }
$dir->close();
@sort($img);
Дважды записываем число картинок в разделе (это нужно для вывода), получаем от пользователя начальную позицию в списке в переменной $s_pos и устанавливаем число мелких картинок при выводе:
$num_pic = $i;
$num_pic1 = $num_pic;
$s_pos=$_GET['s_pos'];
if (empty($s_pos)){$s_pos = 0;}
$s_pos = intval($s_pos);
if ($s_pos < 0) {$s_pos = 0;}
$lim=$num_pic-$s_pos;
if (5<=$lim){$lim=5;}
В цикле формируем вывод в переменной $out, каждая мелкая картинка оформляется как ссылка при наведении на которую указателя мыши (условие onmouseOver) будет вызвана функция увеличения incp(this.id), а при уводе мыши (onmouseOut) - функция возврата в исходное сотояние decp(this.id). Выражение this.id - это идентификатор конкретной картинки. Программа с ним разберется сама.
for ($i = $s_pos; $i < $s_pos+$lim; $i++){
$out=$out."<img src=img/".$tpl[$mode]."/".$img[$i]." id=".$i." height=60 onmouseOver='incp(this.id)' onmouseOut='decp(this.id)'><br><br>";
}
Формируем кнопки прокрутки (они выполнены в виде ссылок) назад:
if ($s_pos != 0){$prev= "<A href=photo.php?s_pos=".($s_pos - 5)."&mode=".$mode.">Вверх</A><BR>";}
и вперед и добавляем из к выводу.
if ($num_pic1 > $s_pos + 5)
{$next= "<A href=photo.php?s_pos=".($s_pos + 5)."&mode=".$mode.">Вниз</A>";}
$out=$prev.$out.$next;
Пишем функции JavaScript. Функция incp увеличивает картинку и выводит ее в соответствующем месте окна обозревателя. Для этого сначала функция определяет область вывода и помещает ее в переменную var out = document.getElementById('out'), затем в переменную var img = document.getElementById(n) помещается выбранный рисунок. Теперь в выбранную область вписывается нужный рисунок, с шириной, равной ширине окна обозревателя, уменьшенной на 200 пикселей, ширина экрана берется как document.body.clientWidth. Функция decp просто записывает в область вывода пустоту:
<script language=JavaScript>
function incp(n){
var out=document.getElementById('out');
var img=document.getElementById(n);
out.innerHTML='<img src='+img.src+' width='+(document.body.clientWidth-200)+'>';
}
function decp(n){
var out=document.getElementById('out');
out.innerHTML="";
}
</script>
Добавляем стиль области вывода, z-index=3 означает, что эта область будет выводиться поверх всего, что есть в окне (по умолчанию у окна z-index=0, правило такое - у кого больше, тот сверху):
<style>
#out{position:fixed;top:20px;left:140px;z-index=3;}
</style>
Далее - обычный HTML-блок, сначала - ссылки выбора разделов:
<a href=photo.php?mode=0>Пейзажи</a> <a href=photo.php?mode=1>Природа</a> <a href=photo.php?mode=2>Животные</a>
Затем - блок вывода мелких картинок, запертых в просто div, чтобы не разбежались по странице:
<div>
<?echo $out?>
</div>
И, наконец область вывода увеличенной картинки:
<div id='out'></div>
Скачиваем, для проверки работы нужно иметь в одной директории с этим файлом папки "view","nature" и "animal".с картинками, названия могут быть любыми, картинки - тоже. Главное - не забыть поставить новые названия в определение массива. Оформить подобный фотоальбом можно как угодно, например так. Дальше - немного о графике.