Фантастическая CSS3 лайтбокс галерея с помощью jQuery

С удовольствием принимаю эстафету по обзору полезных зарубежных ресурсов, предложенную блоггером 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

<!-- 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>

Здесь нет ничего сложного. Обратите внимание на блок с id =”modal” — он используется для создания модального окна, которое отображается, если пользователь перетаскивает изображение на блок «drop to share». Но подробнее об этом, мы поговорим позже.

Шаг 2 – CSS

Теперь, когда у нас есть вся необходимая разметка, пришло время ее стилизовать. Сначала, нам нужно включить CSS-файлы в секции head нашей страницы.

demo.php

<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">

После этого, можно перейти к написанию стилей.

demo.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-класс pic. Он используется для того картинки выглядели как полароидные снимки. Для достижения такого эффекта, каждому изображению добавляется белая рамка.

Кроме того, в этом классе используется CSS3-свойство box-shadow, благодаря которому, каждый снимок отбрасывает тень.

Если вы посмотрите на демо-страницу, то увидите, что фотографии разбросаны по страницы и развернуты в разные стороны. Такой эффект достигается с помощью CSS, на стороне PHP, как вы скоро увидите.

Остальные стили очень простые, и не нуждаются в детальном объяснении.

Шаг 3 – PHP

Как вы помните, на шаге 1, мы рассмотрели часть XHTML-разметки, и отметили, что PHP будет использоваться для создания специальной разметки, для каждого изображения. И вот как это делается:

demo.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);

Сначала, мы открываем папку миниатюр с помощью opendir (с помощью модификатора @, мы предотвращаем появление любых возможных проблем, отображаемых пользователю) и проходим циклом по всем картинкам.

В цикле, мы пропускаем файлы, не являющиеся изображениями, и генерируем некоторый XHTML-код для каждого изображения, который выводится непосредственно на экран.

Как уже упоминалось ранее, в части CSS, PHP отвечает за вращение и разброс картинок по странице. Каждое изображение позиционируется по случайным X и Y координатам, и поворачивается в диапазоне от -40 до 40 градусов (для предотвращения переворачивания снимков вверх ногами). Все это генерируется с помощью PHP-функции rand() и включается в качестве CSS-стиля картинки, с помощью атрибута style.

Существуют две папки с картинками, использующиеся галереей – thumbs, в которой содержатся миниатюры картинок, размером 100 х 100 пикселей, и original, которая содержит картинку реального размера. Обратите внимание на важную деталь, изображения в папке thumbnail и original, должны иметь одно и то же имя, иначе галерея будет работать не правильно.

Единственно, что осталось сделать – добавить немного интерактивности.

Шаг 4 – jQuery

Итак, у нас на руках отличная CSS-галерея. Но это ничего не значит, если мы не можем перетаскивать понравившиеся картинки по экрану и увеличивать их для более детального просмотра, не так ли?

Пришло время JQuery.

script.js

$(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();
	}
});

Сначала, мы вешаем, обработчик событий на клик по картинке, с тем, чтобы лайтбокс не срабатывал, когда мы просто перетаскиваем изображение.

После этого, мы делаем все картинки перетаскиваемыми, а затем настраиваем 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!

Хотите принять участие в эстафете? Это очень просто, опубликуйте перевод статьи из представляемого ресурса, сообщите мне, и я с удовольствием поставлю ссылку на ваш блог. Обязательное условие – статьи и ресурсы не должны повторятся.