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

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

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

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

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;}

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


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

Если Вам понравился урок и у Вас появился интерес к возможностям, которые открываются перед нами со знанием Java Script и JQuery (а их на самом деле очень много), то советую почитать о достаточно полезном курсе «Javascript + jQuery для начинающих в видеоформате».. Начинать изучение тех возможностей, которые предлагает нам этот язык программирования достаточно просто с данным курсом, плюс все примеры сразу можно применять на практике, создавая свои уникальные веб страницы. В общем сама его использовала и Вам советую.

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

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

Преимущества сайта на php

Супер фишка:веб дизайн, собирающийся на глазах!

Понравилась статья? Поделись с друзьями!


Не нашли того, что искали? Воспользуйтесь расширенным поиском!

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail:


Комментарии к этой статье:

Комментарий добавил(а): Юлия
Дата: 2016-03-25

Очень интересно! Спасибо! Сама только начинаю изучать сайтостроение. А можно при помощи JQuery сделать такую штуку: посетитель сайта загружает свои фото на сайт в фоторамки (готовые уже на сайте), которые , и потом уже скачивает себе на комп.

Добавить Комментарий:


Введите сумму чисел с картинки:

Почему стоит подписаться на обновления блога

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail: