С удовольствием принимаю эстафету по обзору полезных зарубежных ресурсов, предложенную блоггером cuprum, и сегодня, хочу представить вашему вниманию англоязычный блог – tutorialzine.com. Этот блог отличается от других, главным образом тем, что в нем регулярно публикуются очень красивые, а главное полезные, готовые решения для веб-разработчика. И сегодняшняя статья – не исключение.
В сегодняшней статье, мы создадим отличную фото-галерею, которая использует новейшие техники CSS3 и Jquery. Созданный нами скрипт, будет сканировать папку с картинками на вашем веб-сервере, и строить на основе полученных данных полноценную drag-and-drop галерею.
Это решение будет SEO-дружелюбным, кроме того оно будет работать даже с браузерами, выпущенными в одно время с IE6 (за исключением потери нескольких красивых эффектов).
Мы будем использовать jQuery, jQuery UI (для реализации drag-and-drop) и плагин jQuery fancybox в дополнение к PHP и CSS, для интерактивности и стилизации.
Прежде чем мы начнем, взгляните на конечный результат.
Итак, давайте перейдем к первому шагу.
Шаг 1 – XHTML
Основная идея в том, чтобы использовать PHP для генерации необходимой XHTML-разметки для каждого изображения. Сгенерированный код, в дальнейшем будет включен в файл demo.php.
demo.php
[html]
<!– The gallery container: –>
<div id="gallery">
<?php
/* PHP code, covered in detail in step 3 */
?>
<!– The droppable share box –>
<div class="drop-box">
</div>
</div>
<div class="clear"></div>
<!– This is later converted to the modal window with the url of the image: –>
<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>
[/html]
Здесь нет ничего сложного. Обратите внимание на блок с id =”modal” – он используется для создания модального окна, которое отображается, если пользователь перетаскивает изображение на блок “drop to share”. Но подробнее об этом, мы поговорим позже.
Шаг 2 – CSS
Теперь, когда у нас есть вся необходимая разметка, пришло время ее стилизовать. Сначала, нам нужно включить CSS-файлы в секции head нашей страницы.
demo.php
[html]
<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.css">
[/html]
После этого, можно перейти к написанию стилей.
demo.css
[css]
body{
/* Styling the body */
color:white;
font-size:13px;
background: #222222;
font-family:Arial, Helvetica, sans-serif;
}
#gallery{
/* The pics container */
width:100%;
height:580px;
position:relative;
}
.pic, .pic a{
/* Each picture and the hyperlink inside it */
width:100px;
height:100px;
overflow:hidden;
}
.pic{
/* Styles specific to the pic class */
position:absolute;
border:5px solid #EEEEEE;
border-bottom:18px solid #eeeeee;
/* CSS3 Box Shadow */
-moz-box-shadow:2px 2px 3px #333333;
-webkit-box-shadow:2px 2px 3px #333333;
box-shadow:2px 2px 3px #333333;
}
.pic a{
/* Specific styles for the hyperlinks */
text-indent:-999px;
display:block;
/* Setting display to block enables advanced styling for links */
}
.drop-box{
/* The share 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{
/* The active style is in effect when there is a pic hovering above the box */
background-position:bottom left;
}
label, input{
/* The modal dialog URL field */
display:block;
padding:3px;
}
label{
font-size:10px;
}
fieldset{
border:0;
margin-top:10px;
}
#url{
/* The URL field */
width:240px;
}
[/css]
Один из представленных выше классов нуждается в пояснении, это CSS-класс pic. Он используется для того картинки выглядели как полароидные снимки. Для достижения такого эффекта, каждому изображению добавляется белая рамка.
Кроме того, в этом классе используется CSS3-свойство box-shadow, благодаря которому, каждый снимок отбрасывает тень.
Если вы посмотрите на демо-страницу, то увидите, что фотографии разбросаны по страницы и развернуты в разные стороны. Такой эффект достигается с помощью CSS, на стороне PHP, как вы скоро увидите.
Остальные стили очень простые, и не нуждаются в детальном объяснении.
Шаг 3 – PHP
Как вы помните, на шаге 1, мы рассмотрели часть XHTML-разметки, и отметили, что PHP будет использоваться для создания специальной разметки, для каждого изображения. И вот как это делается:
demo.php
[php]
/* Configuration Start */
$thumb_directory = ‘img/thumbs’;
$orig_directory = ‘img/original’;
$stage_width=600;
$stage_height=400;
/* Configuration end */
$allowed_types=array(‘jpg’,’jpeg’,’gif’,’png’);
$file_parts=array();
$ext=”;
$title=”;
$i=0;
/* Opening the thumbnail directory and looping through all the thumbs: */
$dir_handle = @opendir($thumb_directory) or die("There is an error with your image directory!");
$i=1;
while ($file = readdir($dir_handle))
{
/* Skipping the system files: */
if($file==’.’ || $file == ‘..’) continue;
$file_parts = explode(‘.’,$file);
$ext = strtolower(array_pop($file_parts));
/* Using the file name (withouth the extension) as a image title: */
$title = implode(‘.’,$file_parts);
$title = htmlspecialchars($title);
/* If the file extension is allowed: */
if(in_array($ext,$allowed_types))
{
/* Generating random values for the position and rotation: */
$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;
}
/* Outputting each image: */
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>’;
}
}
/* Closing the directory */
closedir($dir_handle);
[/php]
Сначала, мы открываем папку миниатюр с помощью opendir (с помощью модификатора @, мы предотвращаем появление любых возможных проблем, отображаемых пользователю) и проходим циклом по всем картинкам.
В цикле, мы пропускаем файлы, не являющиеся изображениями, и генерируем некоторый XHTML-код для каждого изображения, который выводится непосредственно на экран.
Как уже упоминалось ранее, в части CSS, PHP отвечает за вращение и разброс картинок по странице. Каждое изображение позиционируется по случайным X и Y координатам, и поворачивается в диапазоне от -40 до 40 градусов (для предотвращения переворачивания снимков вверх ногами). Все это генерируется с помощью PHP-функции rand() и включается в качестве CSS-стиля картинки, с помощью атрибута style.
Существуют две папки с картинками, использующиеся галереей – thumbs, в которой содержатся миниатюры картинок, размером 100 х 100 пикселей, и original, которая содержит картинку реального размера. Обратите внимание на важную деталь, изображения в папке thumbnail и original, должны иметь одно и то же имя, иначе галерея будет работать не правильно.
Единственно, что осталось сделать – добавить немного интерактивности.
Шаг 4 – jQuery
Итак, у нас на руках отличная CSS-галерея. Но это ничего не значит, если мы не можем перетаскивать понравившиеся картинки по экрану и увеличивать их для более детального просмотра, не так ли?
Пришло время JQuery.
script.js
[javascript]
$(document).ready(function(){
// Executed once all the page elements are loaded
var preventClick=false;
$(".pic a").bind("click",function(e){
/* This function stops the drag from firing a click event and showing the lightbox */
if(preventClick)
{
e.stopImmediatePropagation();
e.preventDefault();
}
});
$(".pic").draggable({
/* Converting the images into draggable objects */
containment: ‘parent’,
start: function(e,ui){
/* This will stop clicks from occuring while dragging */
preventClick=true;
},
stop: function(e, ui) {
/* Wait for 250 milliseconds before re-enabling the clicks */
setTimeout(function(){ preventClick=false; }, 250);
}
});
$(‘.pic’).mousedown(function(e){
/* Executed on image click */
var maxZ = 0;
/* Find the max z-index property: */
$(‘.pic’).each(function(){
var thisZ = parseInt($(this).css(‘zIndex’))
if(thisZ>maxZ) maxZ=thisZ;
});
/* Clicks can occur in the picture container (with class pic) and in the link inside it */
if($(e.target).hasClass("pic"))
{
/* Show the clicked image on top of all the others: */
$(e.target).css({zIndex:maxZ+1});
}
else $(e.target).closest(‘.pic’).css({zIndex:maxZ+1});
});
/* Converting all the links to a fancybox gallery */
$("a.fancybox").fancybox({
zoomSpeedIn: 300,
zoomSpeedOut: 300,
overlayShow:false
});
/* Converting the share box into a droppable: */
$(‘.drop-box’).droppable({
hoverClass: ‘active’,
drop:function(event,ui){
/* Fill the URL text field with the URL of the image. */
/* The id of the image is appended as a hash #pic-123 */
$(‘#url’).val(location.href.replace(location.hash,”)+’#’ + ui.draggable.attr(‘id’));
$(‘#modal’).dialog(‘open’);
}
});
/* Converts the div with id="modal" into a modal window */
$("#modal").dialog({
bgiframe: true,
modal: true,
autoOpen:false,
buttons: {
Ok: function() {
$(this).dialog(‘close’);
}
}
});
if(location.hash.indexOf(‘#pic-‘)!=-1)
{
/* Checks whether a hash is present in the URL */
/* and shows the respective image */
$(location.hash+’ a.fancybox’).click();
}
});
[/javascript]
Сначала, мы вешаем, обработчик событий на клик по картинке, с тем, чтобы лайтбокс не срабатывал, когда мы просто перетаскиваем изображение.
После этого, мы делаем все картинки перетаскиваемыми, а затем настраиваем lightbox.
Теперь, нам нужно сделать блок «Drop to share», «принимающим», то есть блок сможет определять, когда к нему подвели и отпустили картинку. Это позволит нам применить специальный стиль к контейнеру, и открыть модальное окно.
Модальное окно – это компонент пользовательского интерфейса, поставляемый вместе с jQuery UI. Он прячет все элементы страницы, под полупрозрачный слой, тем самым блокируя их использование для пользователя. Единственная вещь, полностью привлекающая внимание пользователя – это окно с сообщением, которое в нашем случае, окно содержит URL картинки.
И наконец, у нас есть несколько строк кода, которые проверяют, есть ли строки вида #pic-123 в URL, c помощью которых, лайтбокс показывает соответствующие изображения при загрузке страницы.
Наша CSS3-галерея готова.
Перевод статьи «An Awesome CSS3 Lightbox Gallery With jQuery», автор Martin
Другие участники эстафеты:
- Cuprum.name – Работа с цветовой моделью RGBA
- rotorweb.ru — Скажем прощай overflow: hidden!
Хотите принять участие в эстафете? Это очень просто, опубликуйте перевод статьи из представляемого ресурса, сообщите мне, и я с удовольствием поставлю ссылку на ваш блог. Обязательное условие – статьи и ресурсы не должны повторятся.
Leave a Reply