- Подробности
-
Категория: PHP. Графика
В этом уроке мы создадим классную галерею изображений, которая будет использовать новейшие техники CSS3 и jQuery.
Скрипт будет способен сканировать папку изображений на Вашем сервере и создавать "drag and drop" галерею с ипользованием лайтбоксов.
Также галерея будет оптимизирована для поисковиков и кроссбраузерна.
Мы будем использовать jQuery, jQuery UI (для "drag and drop"), плагин fancybox, а также PHP и CSS для интерактивности и стилизации.
demosourse
Шаг №1 — XHTML
Главная идея заключается в том, что PHP будет генерировать необходимый код XHTML для каждого изображения. Сгенерированный код позднее вставляется в demo.php.
demo.php
<!-- Контейнер: -->
<div id="gallery">
<!-- Ячейка для распространения фото -->
<div class="drop-box">
</div>
</div>
<div class="clear"></div>
<!-- Это конвертируется в модальном окно с УРЛом изображения: -->
<div id="modal" title="Share this picture">
<form>
<fieldset>
<label for="name">URL of the image</label>
<input type="text" name="url" id="url" class="text ui-widget-content ui-corner-all"
onfocus="this.select()" />
</fieldset>
</form>
</div>
Тут ничего особенного. Обратите внимание на div "modal" — он используется для генерация модального окна, которое показывается когда пользователь перетаскивает фото в ячейку для того, чтобы поделиться с другими. Об этом позже подробнее.
Шаг №2 — CSS
Настало время CSS. Для начала необходимо подключить внешнюю таблицу стилей в шапку.
demo.php
>https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css"
demo.css
body{
/* body */
color:white;
font-size:13px;
background: #222222;
font-family:Arial, Helvetica, sans-serif;
}
#gallery{
/* Контейнер для фото */
width:100%;
height:580px;
position:relative;
}
.pic, .pic a{
/* каждая картинка с ссылкой */
width:100px;
height:100px;
overflow:hidden;
}
.pic{
position:absolute;
border:5px solid #EEEEEE;
border-bottom:18px solid #eeeeee;
/* CSS3 тень */
-moz-box-shadow:2px 2px 3px #333333;
-webkit-box-shadow:2px 2px 3px #333333;
box-shadow:2px 2px 3px #333333;
}
.pic a{
/* Стили для ссылок */
text-indent:-999px;
display:block;
/* Setting display to block enables advanced styling for links */
}
.drop-box{
/* Ячейка распространения */
width:240px;
height:130px;
position:absolute;
bottom:0;
right:0;
z-index:-1;
background:url(/img/drop_box.png) no-repeat;
}
.drop-box.active{
/* стиль active вступает в силу при наведении мышки */
background-position:bottom left;
}
label, input{
/* Поля для УРЛ в модальном окне */
display:block;
padding:3px;
}
label{
font-size:10px;
}
fieldset{
border:0;
margin-top:10px;
}
#url{
/* Поле УРЛ */
width:240px;
}
Более подробно хотелось бы поговорить о классе pic. Он используется для стилизации фотографий в виде фото от полароида. Для достижения этого — мы просто добавляем белую границу вокруг фото.
Если Вы смотрели демо, Вы могли заметить, что изображения разбросаны по странице и повернуты в разные стороны. Это сделано с помощью CSS и PHP. Далее об этом пойдет речь.
Шаг №3 — PHP
demo.php
/* Начало конфигурации */
$thumb_directory = 'img/thumbs';
$orig_directory = 'img/original';
$stage_width=600;
$stage_height=400;
/* Конец конфигурации */
$allowed_types=array('jpg','jpeg','gif','png');
$file_parts=array();
$ext='';
$title='';
$i=0;
/* Открываем папку с миниатюрами и пролистываем каждую из них */
$dir_handle = @opendir($thumb_directory) or die("There is an error with your
image directory!");
$i=1;
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);
/* Если расширение разрешено: */
if(in_array($ext,$allowed_types))
{
/* Генерируем случайные значения для позиционирования и поворота фото: */
$left=rand(0,$stage_width);
$top=rand(0,400);
$rot = rand(-40,40);
if($top>$stage_height-130 && $left > $stage_width-230)
{
/* Prevent the images from hiding the drop box */
$top-=120+130;
$left-=230;
}
/* Выдаем каждое фото: */
echo '
<div id="pic-'.($i++).'" class="pic" style="top:'.$top.'px;left:'.$left.'px;background:url('.$thumb_directory.'/'.$file.')
no-repeat 50% 50%; -moz-transform:rotate('.$rot.'deg); -webkit-transform:rotate('.$rot.'deg);">
<a class="fancybox" rel="fncbx" href="'.$orig_directory.'/'.$file.'"
target="_blank">'.$title.'</a>
</div>';
}
}
/* Закрываем папку */
closedir($dir_handle);
Прежде всего мы открываем папку с миниатюрами с помощью opendir и проходим по всем фото.
В процесе перехода от фото к фото пропускаем все файлы "не изображения". Далее генерируем XHTML код для каждого изображения.
PHP также придает позиционирования и поворот каждому изображению. Каждое фото размещается в случайном порядке согласно координат X и Y. Кроме этого фото также вращается между углами -40 и 40 градусов. Эти случайные значения генерируются с помощью функции PHP rand().
Всего у нас две папки с изображениями, которые используются галереей — thumbs (миниатюры 100 на 100) и original (оригиналы фото). Важно, чтобы миниютюры и оригиналы имели одинаковые названия, иначе галерея не будет работать.
Шаг №4 — jQuery
script.js
$(document).ready(function(){
// Выполняется при загрузке страницы
var preventClick=false;
$(".pic a").bind("click",function(e){
if(preventClick)
{
e.stopImmediatePropagation();
e.preventDefault();
}
});
$(".pic").draggable({
/* Преобразовуем изображения в объекты, которые можно переносить */
containment: 'parent',
start: function(e,ui){
/* Во время переноса будут отключены клики */
preventClick=true;
},
stop: function(e, ui) {
/* Подождать 250 милисекунд перед включением возможности кликать вновь */
setTimeout(function(){ preventClick=false; }, 250);
}
});
$('.pic').mousedown(function(e){
/* Executed on image click */
var maxZ = 0;
/* Найти максимальное свойство z-index: */
$('.pic').each(function(){
var thisZ = parseInt($(this).css('zIndex'))
if(thisZ>maxZ) maxZ=thisZ;
});
if($(e.target).hasClass("pic"))
{
/* Показать кликнутое изображение поверх всех остальных : */
$(e.target).css({zIndex:maxZ+1});
}
else $(e.target).closest('.pic').css({zIndex:maxZ+1});
});
/* Преобразуем все ссылки для ссылок лайтбокса */
$("a.fancybox").fancybox({
zoomSpeedIn: 300,
zoomSpeedOut: 300,
overlayShow:false
});
$('.drop-box').droppable({
hoverClass: 'active',
drop:function(event,ui){
$('#url').val(location.href.replace(location.hash,'')+'#' + ui.draggable.attr('id'));
$('#modal').dialog('open');
}
});
/* Преобразовует div с id="modal" в модальное окно */
$("#modal").dialog({
bgiframe: true,
modal: true,
autoOpen:false,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
if(location.hash.indexOf('#pic-')!=-1)
{
$(location.hash+' a.fancybox').click();
}
});
Прежде всего мы "цепляем" функцию клика к изображениям. Во время переноса изображений у нас не будет открываться лайтбокс.
После этого мы делаем все наши изображения "переносными", и далее настраиваем лайтбокс.
Еще несколько функций и у нас полноценная красивая галерея для Ваших фото.
Заключение
Сегодня мы создали классную галерею, которая поднимает планку для всех остальных галерей.
Наш скрипт очень легко добавить на любой сайт — достаточно лишь залить файлы на хостинг и все работает.
Всего наилучшего!
