Создай свою интерактивную фото галерею

С каждым днем веб страницы становятся все более интерактивными. Каждый сайт старается быть все более привлекательным для пользователя, чтобы удержать его на своих страницах подольше. А как Вам идея создания интерактивной фотогалереи, где пользователь может самостоятельно передвигать картинки с задних планов на передние, как-то группировать их и т.д. Заинтересовала? Смотрите, как это делается…

дополнительные материалы к урокам

демо версия урока

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

1. Начнем с того, что подготовим изображения. Изображения будут представлять собой как бы снимки с полороида разложенные на доске. Следовательно, снимки должны быть квадратной формы. Я подготовила 7 фото для этого примера, которые Вы можете найти в дополнительных материалах, а можете подготовить и свои изображения. В нашем примере размер изображений 250px на 250px. Располагаться они будут в созданной для них папке img.

2. После того как подготовили изображения и разместили их в нужной папке, создаете новый html файл и размещаете в нес следующий код:

<!doctype html>
<html>
<head>
<meta charset="windows-1251">
<title>Интерактивная Фото галерея</title>
</head>

<body>
<div id="doska">
<ul>
<li><img src="img/01.jpg" width="250" height="250" alt="photo 1"><span>Описание к фото 1</span></li>
<li><img src="img/02.jpg" width="250" height="250" alt="photo 2"><span>Описание к фото 2</span></li>
<li><img src="img/03.jpg" width="250" height="250" alt="photo 3"><span>Описание к фото 3</span></li>
<li><img src="img/04.jpg" width="250" height="250" alt="photo 4"><span>Описание к фото 4</span></li>
<li><img src="img/05.jpg" width="250" height="250" alt="photo 5"><span>Описание к фото 5</span></li>
<li><img src="img/06.jpg" width="250" height="250" alt="photo 6"><span>Описание к фото 6</span></li>
<li><img src="img/07.jpg" width="250" height="250" alt="photo 7"><span>Описание к фото 7</span></li>
</ul>
<div id="description">
<h1>Эти забавные животные</h1>
<p>Познакомьтесь с Этими смешными собаками...</p>
</div>
</div>
</body>
</html>

 

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

4. Давайте придадим основные стили для нашей страницы. Создадим файл таблицы стилей и подключим его к нашему html документу. Для этого в теге head пропишите следующую строчку:

<link rel="stylesheet" type="text/css" href="style.css">

 

Теперь в новом файле таблицы стилей прописываем следующие стили:

body{background: transparent url(img/bg.jpg) repeat top left; font-family:'Bad Script';}
#doska{width:1000px; height:400px; position:relative; margin:auto;}
#doska ul{margin:0; padding:0; position:relative; width:960px; height:400px;}
#doska ul li{position:absolute; top:200px; left:460px; display:block;
margin:0; padding:0; list-style:none; background:#fefefe;
width:250px; height:250px; padding:20px 20px 40px 20px;}
#doska ul li img{border:1px solid #CCC;}
#doska ul li span{position:absolute; bottom:10px; left:20px;}

 

Если мы загрузим нашу страницу в браузере, то увидим нечто подобное:

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

<link href='http://fonts.googleapis.com/css?family=Just+Another+Hand|Bad+Script&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

 

Результат будет вот таким:

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

-webkit-box-shadow:0px 0px 10px #000;
-moz-box-shadow:0px 0px 10px #000;
-o-box-shadow:0px 0px 10px #000;
-ms-box-shadow:0px 0px 10px #000;
box-shadow:0px 0px 10px #000;

 

Сейчас если мы перезагрузим страницу, то она будет выглядеть так:

7. Пришло время заняться интерактивностью. И здесь нам поможет библиотека JQuery UI. Перейдите на сайт http://jqueryui.com. Там нажмите на вкладку Download. В этой вкладке оставьте галочки только на всех элементах заголовка UI Core, а также на чекбоксе Draggable.

После этого загрузите JQuery UI на свой компьютер. Откройте архиватором, перейдите в папку js и оттуда скопируйте два файла, как на скриншоте ниже:

Создайте папку с именем scripts и поместите туда эти два файла.
Теперь мы можем подключить их в html документе. Для этого в теге head пропишите следующий код:

<script src="scripts/jquery-1.9.1.js"></script>
<script src="scripts/jquery-ui-1.10.3.custom.min.js"></script>

 

8. Итак, мы подготовились к тому, чтобы создавать наш собственный код. Давайте создадим новый файл java script и подключим его к нашему html файлу:

<script type="text/javascript" src="scripts/myscript.js"></script>

 

А внутри этого нового файла пропишем следующее:

$(document).ready(function(){
		$("#doska ul li").draggable();
	});

 

Можете перезагрузить страницу браузера и попробовать растащить фотографии по разным сторонам.

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

$(document).ready(function(){
		$("#doska ul li").each(function() {
         xpos = Math.floor(Math.random()*920);
		 ypos = Math.floor(Math.random()*420);
		 $(this).delay(1000).animate({top:ypos,left:xpos});   
        }).draggable();
	});

 

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

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

$(document).ready(function(){
		$("#doska ul li").each(function() {
         xpos = Math.floor(Math.random()*920);
		 ypos = Math.floor(Math.random()*420);
		 rotation = Math.floor(Math.random()*15);
		 if(Math.floor(Math.random()*11)>5){
			 rotation = rotation * -1;
		 }
		 $(this).data("rotation", rotation);
		 $(this).delay(1000).animate({top:ypos,left:xpos}).css({webkitTransform:"rotate("+rotation+"deg)",MozTransform:"rotate("+rotation+"deg)",msTransform:"rotate("+rotation+"deg)"});   
        }).draggable();
	});

 

Можете проверить в браузере что получилось:

11. Добавим дополнительный анимационный эффект. Для этого перейдите в файл стилей и пропишите для #doska ul li следующие стили:

-webkit-transition:0.2s -webkit-transform linear;
-moz-transition:0.2s -moz-transform linear;
-ms-transition:0.2s -ms-transform linear;
-o-transition:0.2s -o-transform linear;
transition:0.2s transform linear;

 

12. Теперь сделаем так, чтобы при выборе определенной фотографии, она немного увеличивалась в размере и меняла свой наклон (стояла прямо). Для этого в файле стилей пропишем новый класс со следующими параметрами:

.ui-draggable-dragging {
-webkit-transform:		rotate(0deg) scale(1.2) !important;
-moz-transform: 		rotate(0deg) scale(1.2) !important;	
-ms-transform: 			rotate(0deg) scale(1.2) !important;	
-o-transform: 			rotate(0deg) scale(1.2) !important;	
transform:		rotate(0deg) scale(1.2) !important;		
	}

 

Если Вы обновите страницу и попробуете передвинуть какую-нибудь фотографию, то увидите этот эффект.

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

var zindex = 50;

 

А теперь исправьте .draggable(); на следующий код:

.draggable({
			start: function(){
				zindex = zindex + 1;
				$(this).css({zIndex:zindex});					
			},
			stop: function(){
				rotation = Math.floor(Math.random()*15);
				if(Math.floor(Math.random()*11)>5) {
					rotation = rotation * -1;
				}
				$(this).data("rotation",rotation);
				$(this).css({webkitTransform:"rotate("+rotation+"deg)",MozTransform:"rotate("+rotation+"deg)",msTransform:"rotate("+rotation+"deg)",transform:"rotate("+rotation+"deg)"});
			}
		});

 

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

14. Осталось совсем немного. Давайте придадим стилей нашей надписи с названием страницы и с кратким описанием. Для этого в стилях пропишите следующий код:

#description{position:absolute;
top:10px;
left:-200px;
width:230px;
padding:30px 50px;
background: transparent #FFF top left;
opacity:0.7;
-webkit-transform:rotate(10deg) !important;
-moz-transform:rotate(10deg) !important;	
-ms-transform:rotate(10deg) !important;
-o-transform:rotate(10deg) !important;
transform:rotate(10deg) !important;
color:#006;
font-size:1.2em;	
}
#description p{font-size:18px; font-weight:600;}

 

Можете любоваться результатом.

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

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

На этом Все. Всего доброго и до новых встреч в следующих уроках!

Leave a Reply