Пример работы:

Назад / Вперед

Многим сайтам требуется размещение своих лучших работ (портфолио) в видимой области, на всех страницах сайта.
Этой теме будет посвящена сегодняшняя статья..

При создании интернет сайтов галерею лучших работ обычно размещают в левой или правой частях сайта.

Создание галереи php для сайта - очень эффектный и удобный элемент.

Ниже приведен код php галереи, с подробным описанием:

<?php
/**
 * Класс фото-галереи на сайт
 * @author дизайн студия ox2.ru
 */
class Gallery {

    public function getGallery() {
        //Выбираем все содержимое папки images, и записываем из в массив $files
        $files = scandir("images/"); 
        $gallery_files = array();
        foreach ($files as $key => $value) { //Проходим по массиму
            //Проверяем файл или нет, если файл, то:
            if (filetype("images/" . $value) == "file") { 
                $gallery_files[] = $value;  //Записываем в массив
            }
        }
        return $gallery_files; //Возвращаем массив
    }

}

$obj = new Gallery();
$gallery = $obj->getGallery();
?>

<img src="" alt="" id="gallery" />
<div id="number_img"></div>
<a href="javascript:void(0)" onclick="backImg(); this.blur();">Назад</a> /
<a href="javascript:void(0)" onclick="nextImg(); this.blur();">Вперед</a>

<script type="text/javascript">
var images = new Array();
var current_image_key = 0; //Переменная содержит номер текущей фотографии

     $file) { //Проходим по всем фотографиям
        echo "images[$key] = new Image();nr"; //Создаем новый объект Images
        echo "images[$key].src = './images/$file';nr"; //Записываем путь к фотографии
    }
    ?> 

/**
 * Функция обновляет текущее изображение, и его номер
 */
function refreshImage() {
    //Изменяем изображение на текущее
    document.getElementById("gallery").src = images[current_image_key].src;
   //Изменяем надпись под изображением
    document.getElementById("number_img").innerHTML =
        (current_image_key+1) + " из " + images.length
}

/**
 * Следующая фотография
 */
function nextImg() {
    current_image_key++; //Увеличиваем текущую фотографию на 1
   //Если достигнут конец, то делаем первую фотографию текущей
    if (current_image_key >= images . length) current_image_key = 0; 
    refreshImage(); //Обновляем фотографию
}
/**
 * Предыдущая фотография
 */
function backImg() {
    current_image_key--; //Уменьшаем текущую фотографию на 1
   //Если достигнуто начало, то делаем последнюю фотографию текущей
    if (current_image_key < 0) current_image_key = images . length - 1; 
    refreshImage(); //Обновляем фотографию
}
refreshImage(); //Обновляем фотографию
</script>

Это упращенная версия галереи, можете дописать ее, сделать систему управления, файлы брать из базы данных, и использовать в своих проектах.

Скачать исходник

Заполните все поля

Написать комментарий