PHP

Фотоальбом

Речь идет о коде, который позволяет выводить фотографии сначала в уменьшенном виде, и, если посетитель наведет на мелкую картинку указатель мыши, показывать фотографию целиком. Файлы изображений хранятся в папках по темам, уменьшенные копии показываются в левой части страницы (в этом примере, на самом деле - как угодно). Предусмотена возможность выбора раздела и перелистывание списка фотографий в разделе. Теперь код примера:

Теперь детали: сначала получаем код раздела и определяем список разделов в виде массива, например "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>";
}

Формируем кнопки прокрутки (они выполнены в виде ссылок) назад:

и вперед и добавляем из к выводу.

Пишем функции 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-блок, сначала - ссылки выбора разделов:

Затем - блок вывода мелких картинок, запертых в просто div, чтобы не разбежались по странице:

<div>
<?echo $out?>
</div>

И, наконец область вывода увеличенной картинки:

<div id='out'></div>

Скачиваем, для проверки работы нужно иметь в одной директории с этим файлом папки "view","nature" и "animal".с картинками, названия могут быть любыми, картинки - тоже. Главное - не забыть поставить новые названия в определение массива. Оформить подобный фотоальбом можно как угодно, например так. Дальше - немного о графике.

Рейтинг@Mail.ru