Скрипты

ovoo-v2-5-4-cms-онлайн-кинотеатра-и-тв OVOO-это мощная, гибкая и удобная для пользователя CMS с передовой системой управления видеоконтентом. Она была создана, чтобы обеспечить уникальный...
stackposts-v1-5-–-social-marketing-tool Stackposts-это инструмент маркетинга в социальных сетях, который позволяет и помогает вам легко публиковать автоматические сообщения, планировать...
grameasy-2-0-nul-автоматическая-публикация-в-instagram Grameasy - это мощный программный инструмент, который помогает настроить вашу учетную запись Instagram на автопилот, круглосуточно заниматься лайками и...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

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

566998_copy

 

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

k_prim2

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

demo.php

<div id="container">
<div id="heading"> <!-- заголовок -->
<h1> Красивая Фото галерея </h1>
</div>
<div id="gallery"> <!—Div блок для изоброжений-->
<?php
// Наш PHP код здесь
?>
<div class="clear"></div> 
</div>
<div id="footer"> 
</div>
</div> 
 

 

 

 

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 '  <div class="pic '.$nomargin.'" style="background:url('.$directory.'/'.$file.') no-repeat 50% 50%;">  <a href="'.$directory.'/'.$file.'" title="'.$title.'" target="_blank">'.$title.'</a>  </div>';
 $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, используется следующий код в тегах <head> в файл demo.php

<link rel="stylesheet" type="text/css" href="lightbox/css/jquery.lightbox-0.5.css">
<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="lightbox/js/jquery.lightbox-0.5.pack.js"></script>
<script type="text/javascript" src="script.js"></script>
  

 

 

 

Первая стока подключает 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

 

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

Шаг-2

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

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


  1. Комментарии (0)

  2. Добавить свои

Комментарии (0)

There are no comments posted here yet

Оставьте свой комментарий

Posting comment as a guest. Sign up or login to your account.
Вложения (0 / 3)
Share Your Location

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...