Красивая Фото галерея

18.11.2019
CSS, jQuery

Категория: jQuery.

566998_copy-3745460

В этом примере будем создавать фото галерею которая будит выводить на показ все изображения из определённой папки, и осуществляться это будит с помощью  PHP, CSS, JQuery и jQuery Lightbox плагин .

k_prim2-4912419

Шаг-1 Начнём мы с XHTML.

demo.php

Красивая Фото галерея

Normal 0 false false false RU X-NONE X-NONE

Шаг-2

Теперь пришло время PHP

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

 
$directory = 'gallery'; //название папки где изображений находятся
$allowed_types=array('jpg','jpeg','gif','png'); //Типы изоброжений 
 
$file_parts=array();
$ext='';
$title='';
$i=0;
//Открываем каталог 
$dir_handle = @opendir($directory) or die("Ошибка при открытии каталога с изображениями !");
while ($file = readdir($dir_handle)) //сканируем файлы
{
 if($file=='.' || $file == '..') continue; // получаем ссылки на файлы и родительские каталоги
 $file_parts = explode('.',$file); // разбиваем каждое имя файла и помещаем каждую часть в массив
 $ext = strtolower(array_pop($file_parts)); // Последним элементом является расширение
 $title = implode('.',$file_parts); 
 $title = htmlspecialchars($title); //обрабатываем функцией для предотвращения потенциальных проблем безопасности
 $nomargin='';
 if(in_array($ext,$allowed_types)) // если расширение допустимого типа
 {
 if(($i+1)%4==0) $nomargin='nomargin'; //Каждому изображению присваивается CSS 
class "nomargin"
 echo '    '.$title.'  ';
 $i++; 
 }
}
closedir($dir_handle); // закрыть каталог

Normal 0 false false false RU X-NONE X-NONE

Шаг-3

Файл CSS

/* Значения некоторых элементов для совместимости браузеров */
body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
 margin:0px;
 padding:0px;
 font-family:Arial, Helvetica, sans-serif;
}
 
body{ /* Общий стиль страницы */
 margin-top:20px;
 color:white;
 font-size:13px;
 background-color:#222222;
}
 
.clear{ 
 clear:both;
}
 
a, a:visited { /* a:visited необходимо для нормальной работы в IE6 */
 color:#00BBFF;
 text-decoration:none;
 outline:none;
}
 
a:hover{ /* Эффект при наведении */
 text-decoration:underline;
}
 
#container{ /* Основной Div контейнер */
 width:890px;
 margin:20px auto;
}
 
#heading,#footer{ /* верхний и нижний колонтитул */
 background-color:#2A2A2A;
 border:1px solid #444444;
 height:20px;
 padding:6px 0 25px 15px;
 margin-bottom:30px;
 overflow:hidden;
}
 
#footer{ 
 height:10px;
 margin:20px 0 20px 0;
 padding:6px 0 11px 15px;
}
 
div.nomargin{ /* наш специальный класс nomargin */
 margin-right:0px;
}
 
.pic{ /* Это класс div контейнера в котором выводиться изоброжения */
 float:left;
 margin:0 15px 15px 0;
 border:5px solid white;
 width:200px;
 height:250px;
}
 
.pic a{ /* */
 width:200px;
 height:250px;
 text-indent:-99999px;
 display:block; /* Не забывайте, что ширина и высота гиперссылок бесполезны без display:block */
}
 
h1{ /* Стиль заголовка */
 font-size:28px;
 font-weight:bold;
 font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
}
 
h2{ /*стиль текста в footer */
 font-weight:normal;
 font-size:14px;
 color:white;
}

Normal 0 false false false RU X-NONE X-NONE

Шаг-5 JQuery

Для подключения JQuery библиотеки и плагина Lightbox, используется следующий код в тегах в файл demo.php

Первая стока подключает CSS файл плагина Lightbox. В второй строке подключаем  наш собственный css. Далее подключается библиотека  JQuery CDN Google, сам плагин Lightbox и наш собственный script.js файл.

Щаг-6

script.js

// Начать работу только после полной загрузки 
$(document).ready(function(){
 $('.pic a').lightBox({
 
 imageLoading: 'lightbox/images/loading.gif',
 imageBtnClose: 'lightbox/images/close.gif',
 imageBtnPrev: 'lightbox/images/prev.gif',
 imageBtnNext: 'lightbox/images/next.gif'
 });
});

Вот и весь пример

k_sishod-4324768

Normal 0 false false false RU X-NONE X-NONE

Шаг-2

Теперь пришло время PHP

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

Метки: , ,