Урок по созданию галереи Palaroid с использованием CSS и jQuery

Фотогалереи становятся каждым днем все популярнее. Они отлично выглядят, и придают уникальности вашему сайту, освежая его. Сегодня мы попытаемся создать одну простую jQuery галерею, используя некоторые основные функции CSS3. Фотогалерея будет выполнена в виде стопки фотографий Polaroid. Вы сможете перетаскивать их по экрану используя мышку.

jQuery галерея Палароид

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

Внимание: все кусочки кода, представленные в уроке, вы можете скопировать в буфер обмена и вставить в свои файлы. Для этого наведите курсор мыши на строки кода и нажмите на соответствующую иконку, которая появится в правом верхнем углу блока с кодом.

Шаг 1: Подготовка файлов

Давайте начнем с создания необходимых нам файлов:

  • Index.html
  • style.css (этот файл будет содержать все необходимые стили)
  • script.js (в этом файле будут скрипты, используемые для организации галереи)

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

В качестве фона используем текстуру паркетного пола.

Поместите все фотографии в папку «images»

Шаг 2: Структура HTML файла

Прежде всего, мы должны подключить необходимые файлы со скриптами и стилями. Для этого внутри тега <head> поместите следующую конструкцию:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />

Примечание: как вы заметили тут мы обратились к стороннему ресурсу ajax.googleapis.com, чтобы подключить jQuery библиотеку. Файлы jquery.min.js и jquery-ui.min.js. Можете скачать их к себе на компьютер, не забыв при этом поменять пути к файлам или оставить так как есть, но тогда галерея не будет работать без подключения к интернету. Так же мы подключили два созданных на предыдущем шаге файла . Это файл со стилями для фотогалереи и файл со скриптами.

Затем нам надо сделать вывод изображений. Делается это добавлением следующего HTML кода, на этот раз в теге <body>

<img src="images/1.jpg" alt="Фото 1" />
<img src="images/2.jpg" alt="Фото 2" />
<img src="images/3.jpg" alt="Фото 3" />
<img src="images/4.jpg" alt="Фото 4" />
<img src="images/5.jpg" alt="Фото 5" />

Шаг 3: Добавление стилей

После создания HTML разметки  не плохо бы добавить CSS стили. В файл style.css добавляем правила для тега body и img.

body
{
    background: url(texture.jpg);
}
img
{
    padding: 10px 10px 50px 10px;
    background: #eee;
    border: 1px solid #fff;
    box-shadow: 0px 2px 15px #333;
    -moz-box-shadow: 0px 2px 15px #333;
    -webkit-box-shadow: 0px 2px 15px #333;
    position: relative;
    margin:25px 0 0 15px;
}

Здесь мы добавили фоновое изображение для страницы. Для каждой фотографии мы установили светло серый фон с использованием отступов, чтобы имитировать традиционную форму фотографий Polaroid. Так же мы прописали CSS3 свойства, чтобы добавить тень.

Шаг 4: Добавление скриптов

Чтобы заставить работать нашу галерею, мы должны написать пару не сложных скриптов. Для этого, добавляем в файл со скриптами (script.js) следующую конструкцию: 

$(document).ready(function(){
 var zindex = 1;
 $("img").draggable({
  start: function(event, ui) {
   zindex++;
   var cssObj = { 'z-index' : zindex };
   $(this).css(cssObj);
  }
 });
});

Мы определяем переменную с именем zindex со значением 1. Затем используем функцию jQuery, чтобы каждое изображение могло перетаскиваться мышкой. Когда изображение будут тянуть мышкой, значение переменной zindex будет увеличиваться на 1 (zindex++). Записываем итоговое значение zindex как z-index в ssObj. И затем используем $(this).css(cssObj) для того, чтобы изменить CSS свойство z-index перетаскиваемого изображения. Все это делается для того, чтобы изображение, которое мы перетаскиваем мышкой, отображалось на экране поверх всех остальных.

После этого, в этот же файл со скриптами добавляем следующее:

$('img').each(function(){
  var rot = Math.random()*30-15+'deg';
  var left = Math.random()*50+'px';
  var top = Math.random()*150+'px';
  $(this).css('-webkit-transform' , 'rotate('+rot+')');
  $(this).css('-moz-transform' , 'rotate('+rot+')');
  $(this).css('top' , left);
  $(this).css('left' , top);
 $(this).mouseup(function(){
 zindex++;
 $(this).css('z-index' , zindex);
 });
});
$('img').dblclick(function(){
  $(this).css('-webkit-transform' , 'rotate(0)');
  $(this).css('-moz-transform' , 'rotate(0)');
});

Здесь мы используем  конструкцию цикла .each() от Jquery, чтобы для каждого изображения задать переменные. Переменных всего три: угол поворота, отступ сверху, отступ с лева. Каждому из значений этих переменных нам нужно присвоить случайное значение, чтобы имитировать вид случайно разбросанных фотографий. Для этого мы используем Math.random(). Эта конструкция возвращает случайное значение от 0 до 1 и для того чтобы в переменную записать необходимые нам значения градуса поворота и отступов для изображения, нам нужно добавить определенные множители. Например, Math.random()*30-15 возвращает нам значение от -15 до 15 (вы можете легко в этом убедиться подставив вместо Math.random() максимальное и минимальное значения 0 и 1 соответственно), это значние мы будем использовать для случайного угла поворота фотографий. Значения отступов слева мы задаем от 0 до 50px и от 0 до 150px для отступов справа, используя эту же самую конструкцию.

Затем используем $(this).css для изменения необходимых значений CSS3 стилей, после чего следует обработка события mouseup, которое запускается, когда клавиша мыши отжата над элементом. В нашем случае это событие запускает функцию увеличения CSS свойства z-index. Т.е. если нажмете на любую фотографию, то как только отпустите клавишу мышки, выбранная вами фотография отобразится поверх всех остальных. Еще, для полноты картины мы включаем в код обработку события dblclick. Эта конструкция по двойному щелчку мыши запускает функцию изменения градуса наклона изображений. Значение градуса сбрасывается на 0.

Таким образом ваш итоговый файл со скриптами должен выглядеть следующим образом:

$(document).ready(function(){
 var zindex = 1;
 $("img").draggable({
  start: function(event, ui) {
   zindex++;
   var cssObj = { 'z-index' : zindex };
   $(this).css(cssObj);
  }
 });
$('img').each(function(){
 var rot = Math.random()*30-15+'deg';
 var left = Math.random()*50+'px';
 var top = Math.random()*150+'px';
 $(this).css('-webkit-transform' , 'rotate('+rot+')');
 $(this).css('-moz-transform' , 'rotate('+rot+')');
$(this).css('top' , left);
 $(this).css('left' , top);
 $(this).mouseup(function(){
 zindex++;
 $(this).css('z-index' , zindex);
 });
});
$('img').dblclick(function(){
 $(this).css('-webkit-transform' , 'rotate(0)');
 $(this).css('-moz-transform' , 'rotate(0)');
});
});

На этом мы заканчиваем наш урок. Если вы все сделали правильно, у вас должна получиться интересная галерея в стиле фотографий Palaroid, такая же как изображена на демонстрационной странице. Можете попробовать по экспериментировать и по изменять значения переменных и стилей, может быть, вы сделаете еще лучше. Если вдруг что-нибудь не получилось, можете скачать и посмотреть итоговый вариант галереи.

Оригинал: 1stwebdesigner.com

02.06.2010
top


blog comments powered by Disqus
Рубрики
3 месяца отличного хостинга бесплатно
Система Orphus