Фотографии становятся все более и более популярным в наши дни. Сегодня мы собираемся создать простую фотогалирею, используя некоторые из новых функций CSS3 и JQuery.
Характерной особенностью является то, что галерею вы сможете перетащить 1 фотографию с одним нажатием кнопки.
Надеемся, вам понравится это и понять его будет легко.
Давайте взглянем на то, что мы будет строить, вот результат демо, исходники
Шаг 1: Подготовка файлов
Давайте начнем с создания наших необходимых файлов:
1. Index.html (основная страница)
2. style.css (этот файл будет содержать все стили, что нам нужно)
3. script.js (это один документ будет содержать наш сценарии)
В этом уроке я использовал фотографии природы, но вы можете выбрать свои фотографии.
Здесь же и текстуры которые я использовал в этом уроке.
Теперь создайте новую папку, и назовите ее "images", а затем поместить в выбранные фотографии.
Шаг 2: HTML структуры файла
Прежде всего мы должны сослться на CSS, JavaScript файлы, и на jquery.min.js, jquery-ui.min.js,
для этого просто вставить этот код между тегом head:
<script type="text/<span class="><!--mce:0--></script>
<script type="text/<span class="><!--mce:1--></script>
<script type="text/<span class="><!--mce:2--></script>
<link rel="stylesheet" type="text/css" href="style.css" />
Теперь мы должны показать изображения.
<img src="images/1.jpg" alt="" />
<img src="images/2.jpg" alt="" />
<img src="images/3.jpg" alt="" />
<img src="images/4.jpg" alt="" />
<img src="images/5.jpg" alt="" />
Шаг 3: Добавление некоторых стилей!
Теперь у нас есть готовый HTML-файл, мы должны добавить некоторые стили для наших изображений:
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 правила для создания образа простой тени. Затем я использовал margin, чтобы освободить место между изображениями.
Шаг 4: Настало время для написания сценария
Теперь у нас есть исходные материалы для создания сценария, мы должны написать несколько сценариев
и меть рабочую Polaroid.
Сначала добавьте это к вашему 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, то я использовал $(this).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() метод, для каждого изображения создаются три переменные: поворот градусов,
на верхней позиции и левое положение. Для каждой переменной необходимо использовать некоторые математические значения:
Math.random возвращает значение между 0 и 1, поэтому мы должны контролировать и другие значения,
чтобы получить номера нужно: за первой переменной всегда будет возвращаться значение между 15 и -15 градусов.
В левой верхней позиции, я использовал те же формулы,
но я изменил некоторые значения. После подготовки переменных мы должны их использовать.
Для этого мы будем использовать тот же метод что мы использовали в предыдущем коде (this.css),
тоесть изменить вращение градусов, на верхней позиции и в крайнем левом положение каждого изображения,
так что мы можем получить случайное появления.
После всего этого я использовал. MouseUp метод, когда на изображение нажали это будет показано.
Также Вы можете добавить что-то полезное: при нажатии кнопки двойном щелчке мышью мы будем корректировать ее вращать.
Теперь наш файл сценария должен выглядеть следующим образом:
$(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)');
});
});
Вот и все!
Спасибо за внимание, я надеюсь, что вам понравилось и можно следовать шаг за шагом. Если вы все сделали правильно, вы должны в итоге имеем что-то вроде этого. Если у вас возникли проблемы или вам нужна помощь не стесняйтесь написать свой вопрос в разделе комментариев.