Делаем галерею работ для сайта на PHP + JavaScript
Многим сайтам требуется размещение своих лучших работ (портфолио) в видимой области, на всех страницах сайта.
Этой теме будет посвещена сегодняшняя статья..
При создании интернет сайтов галерею лучших работ обычно размещают в левой или правой частях сайта.
Создание галереи 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; //Переменная содержит номер текущей фотографии
<?php
foreach ($gallery as $key => $file) { //Проходим по всем фотографиям
echo "images[$key] = new Image();\n\r"; //Создаем новый объект Images
echo "images[$key].src = './images/$file';\n\r"; //Записываем путь к фотографии
}
?>
/**
* Функция обновляет текущее изображение, и его номер
*/
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>
Это упращенная версия галереи, можете дописать ее, сделать систему управления, файлы брать из базы данных, и использовать в своих проектах.
