Галерея изображений на Ваш сайт (jQuery)

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

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

У нас на странице будет область с миниатюрами изображений галереи и область, где мы будем показывать изображение в увеличенном масштабе. Щелкая по любой из миниатюр, посетитель будет видеть соответствующее большое изображение в этой области. Изображение будет проявляться в течении некоторого времени, создавая эффект анимации, а предыдущее изображение будет в это время растворяться.

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

Создаем галерею изображений с jQuery

Но перед тем как писать код Java Script нам нужно пройти некоторые подготовительные этапы.

Во-первых, нужно подготовить изображения. У нас будет два вида изображений: миниатюры и изображения большого размера. Я создала папку «img», в которой создала еще 2 папки: «big» и «small». В папке «big» я сохранила большие изображения (у меня они все примерно одного размера по ширине и высоте, где-то 500px на 500px). В папке «small» лежат миниатюры тех же самых изображений (их размеры также должны быть примерно одинаковыми. Когда я говорю примерно, это значит, что разница в 2-3 пикселя не играет особого значения).

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

Во-вторых, нам нужно создать html-файл, создать в нем разметку страницы с нашей галереей и подключить к этому файлу css-файл (таблицу стилей).

Давайте этим сейчас и займемся.

1. Откройте редактор для создания нашего кода и создайте новый html-файл. Назовем его «gallery.html» и сохраним в тот же каталог, где находится папка с картинками «img».

Теперь напишем содержимое этого файла.

Между тегами «body» будет находится div с идентификатором «wrapper». Он будет содержать 2 основных элемента: тег header, в котором будет находится заголовок и div с идентификатором «content», в котором будет находится вся наша галерея.

Div «content» будет содержать div с идентификатором «main», в котором будет находиться заголовок для галереи; div с идентификатором «gallery», где расположены миниатюры наших изображений и еще один div с идентификатором «photo». Div с идентификатором «photo» пока что будет пустым, но при работе галереи в него будут выводиться большие изображения соответствующих миниатюр.

Вот в общем-то и все. Код всего вышеописанного будет выглядеть следующим образом:

<!doctype html> <html> <head> <meta charset="windows-1251"> <title>Gallery jQuery</title> </head> <body> <div id="wrapper"> <header> <p class="logo">Галерея на jQuery</p> </header> <div class="content"> <div class="main"> <h1>Моя Галерея</h1> <div id="gallery"> <a href="img/big/1.jpg"><img src="img/small/1.jpg"></a> <a href="img/big/2.jpg"><img src="img/small/2.jpg"></a> <a href="img/big/3.jpg"><img src="img/small/3.jpg"></a> <a href="img/big/4.jpg"><img src="img/small/4.jpg"></a> <a href="img/big/5.jpg"><img src="img/small/5.jpg"></a> </div> <div id="photo"> </div> </div><!--end main--> </div><!--end content--> </div><!--end wrapper--> </body> </html>

Вот так будет выглядеть страница если мы откроем ее в браузере:

создание интерактивной галереи. Верстка

2. Теперь странице нужно придать стилей. Для этого создадим файл таблицы стилей «style.css» и сохраним его в том же каталоге, что и html-документ.

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

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

Таблица стилей подключена и теперь пришло время прописать стили для всех наших элементов. Зайдите в файл «style.css» и пропишите следующий код:

body{background:rgba(102,102,153,1);} #wrapper{margin:0 auto; width:80%;} header{text-align:center;} .logo{font-family:Helvetica, sans-serif; font-size:36px; color:#DD8D15; text-shadow:2px 2px 2px #333333;} h1{font-family:Tahoma, Geneva, sans-serif; font-style:italic; color:#FFF; text-shadow:2px 2px 2px #333; text-align:center;} #gallery{float:left; width:90px; margin-left:20px; border-right:1px solid #fff;} #gallery img{margin:0 0 10px 0; display:inline-block; border:1px solid #000;} #photo{position:relative; margin-left:150px; border-top:1px solid #fff;} #photo img{position:absolute; padding-left:150px;}

Здесь мы задаем цвет для нашей страницы, задаем ширину для div с идентификатором «wrapper» и устанавливаем ему положение в центре.

Также мы создаем стили для шрифтов, указывая различные параметры, такие как: цвет, размер, тень, стиль шрифта и его выравнивание.

Div с идентификатором «gallery» мы присваиваем обтекание по левому краю, ширину, отступы и правую рамку.

Картинкам-миниатюрам мы также задаем отступ рамку и свойство «display:inline-block», которое генерирует блочный элемент, обтекаемый другими элементами веб-страницы.

Div с идентификатором «photo» мы задаем отступ слева, верхнюю рамку, а также позиционируем относительно, а большие изображения, которые будут в него попадать позиционируем абсолютно.

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

интерактивная галерея с jQuery. Подключаем стили

3. И последнее подготовительное действие – это подключение на нашу страницу библиотеки jQuery и создание js-файла для собственного скрипта.

Вы можете скачать файл библиотеки jQuery с сайта http://jquery.com/ или загрузить его из исходников к этому уроки из папку под названием «js».

Чтобы скачать файл для подключения библиотеки с сайта jquery.com нужно:

1. Нажать на кнопку «Download» в меню сайта.
2. На отрывшейся странице найти ссылку «Download the compressed, production jQuery 1.10.2» (последние цифры – это версия библиотеки, они могут отличаться).
3. Нажать на ссылку правой кнопкой мыши и выбрать «Сохранить объект как…», после чего нужно выбрать то место, куда Вы хотите сохранить файл.

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

После этого создайте новый JavaScript-файл, назовите его «my_script.js» и сохраните также в папку «js». В этом файле будет весь наш код для работы галереи.

Но перед тем как его писать нужно подключить эти два файла к нашей html-странице.

Для этого снова зайдите в файл «gallery.html» и перед закрывающим тегом head пропишите следующие строки:

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/my_script.js"></script>

Мы подключили наши файлы и теперь можно заняться самым интересным – написание кода для работы галереи.

4. Откройте файл «my_script.js» и напишите следующие строки:

$(document).ready(function() { //здесь будет расположен весь наш код });

Эта функция ждет пока загрузятся вся наша html-страница, прежде чем начать выполнение кода JavaScript. Между фигурными скобками будет располагаться весь наш последующий код. Кстати, комментарий «//здесь будет расположен весь наш код» писать не обязательно, он здесь для того, чтобы Вам просто было понятнее.

Сначала нам нужно выбрать все ссылки, находящиеся в div с идентификатором «gallery» и присвоить им событие щелчка мыши. Событию щелчка мы передадим анонимную функцию, которая и будет выполнять какие-либо действия. В данном случае функция будет с переменной «evt», которая будет сохранять объект события (то есть ссылку, по которой произведен щелчок).

$(document).ready(function() { $("#gallery a").click(function(evt){ }); });

Обычно браузер реагирует на нажатие по ссылке следующим образом: он отправляет нас на страницу, прописанную в параметре «href» ссылки. Но в данном случае нам это не нужно. Мы хотим, чтобы большие изображения появлялись на той же странице, на которой мы находимся сейчас в специально отведенном для них месте. Поэтому в первую очередь нужно отменить стандартное поведение браузера при щелчке на наши ссылки. Как раз для этого нам понадобиться переменная «evt», в которой сохранен объект события. Нам нужно применить к ней функцию объекта события «preventDefault».

$(document).ready(function() { $("#gallery a").click(function(evt){ evt.preventDefault(); }); });

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

Дальше нам нужно задать некоторые переменные.

Во-первых, мы извлечем атрибут «href» большой картинки, по миниатюре которой произошел щелчок и поместим его в переменную «imgPath».

Во-вторых, мы создадим переменную «oldImg», в которой будет храниться та большая картинка, которая находится в области для изображений в данный момент.

В-третьих, мы создадим переменную «newImg», в которой сформируем тег img для новой картинки, которая должна появиться в области для изображений. Здесь нам пригодиться переменная «imgPath», которая содержит атрибут «href» для этой картинки.

$(document).ready(function() { $("#gallery a").click(function(evt){ evt.preventDefault(); var imgPath = $(this).attr('href'); var oldImg = $("#photo img"); var newImg = $("<img src='" + imgPath + "'>"); }); });

Все нужные нам переменные мы создали. Осталось только проделать с ними некоторые действия.

Итак, нам нужно, чтобы новая картинка, по миниатюре которой посетитель только что кликнул сначала исчезла. Вы спросите – «Зачем?». Дело в том, что для того, чтобы сделать эффект проявления нам сначала нужно полностью скрыть изображение. Этого мы можем добиться при помощи функции hide().

Следующим действием будет добавление новой картинки в тег с идентификатором «photo» и здесь нам подойдет функция prepend(), которая добавит html-код картинки в тег, а именно в самое его начало.

И теперь наша картинка должна красиво проявиться, например, за одну секунду. Здесь нам поможет функция fadeIn().

$(document).ready(function() { $("#gallery a").click(function(evt){ evt.preventDefault(); var imgPath = $(this).attr('href'); var oldImg = $("#photo img"); var newImg = $("<img src='" + imgPath + "'>"); newImg.hide(); $("#photo").prepend(newImg); newImg.fadeIn(1000); }); });

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

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

А делать мы это будем так: сначала мы скроем старую картинку в течении 1 секунды (так у нас получится плавный переход между изображениями). В этом нам поможет функция fadeOut().

Но этого не достаточно, нужно не просто скрыть изображение, но и удалить его из тега «photo», а поэтому первым параметром для функции fadeOut() мы передадим время эффекта (1000 миллисекунд), а вторым параметром функцию, которая и будет удалять старую картинку при помощи функции remove().

$(document).ready(function() { $("#gallery a").click(function(evt){ evt.preventDefault(); var imgPath = $(this).attr('href'); var oldImg = $("#photo img"); var newImg = $("<img src='" + imgPath + "'>"); newImg.hide(); $("#photo").prepend(newImg); newImg.fadeIn(1000); oldImg.fadeOut(1000, function(){ this.remove(); }); }); });

Теперь наша галерея уже работает. Вы можете перезагрузить страницу браузера и проверить ее работу.

интерактивная галерея jQuery на сайт

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

Для этого мы воспользуемся селекторами и фильтром библиотеки jQuery для того, чтобы выбрать первое изображение, после чего «вешаем» на него событие click(), которому не передадим никаких аргументов. Это приведет к тому, что запустятся уже заранее определенные обработчики события и изображение проявится в нужной области.

Нам нужно дописать всего одну строчку почти в самом конце. Таким образом, весь наш JavaScript код будет выглядеть так:

$(document).ready(function() { $("#gallery a").click(function(evt){ evt.preventDefault(); var imgPath = $(this).attr('href'); var oldImg = $("#photo img"); var newImg = $("<img src='" + imgPath + "'>"); newImg.hide(); $("#photo").prepend(newImg); newImg.fadeIn(1000); oldImg.fadeOut(1000, function(){ this.remove(); }); }); $("#gallery a:first").click(); });

Все! Галерея готова! Ее работу Вы можете посмотреть щелкнув по иконке с надписью «Демо» в самом начале поста.

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

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

Если эта тема Вам интересна, но Вы в ней новичок, то могу посоветовать Вам очень хороший курс от Евгения Попова «Javascript + jQuery для начинающих в видеоформате» .

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

Там очень много практических примеров и если Вы новичок в области JavaScript и jQuery, то курс отлично Вам подойдет. Ну не буду здесь долго все это расписывать, Вы можете перейти по ссылке и почитать про него поподробнее, если Вам эта тема интересна: «Javascript + jQuery для начинающих в видеоформате» .

А на этой ноте я буду с Вами прощаться.

Если урок Вам понравился или возникли какие-либо вопросы, пишите комментарии, и я Вам обязательно отвечу и вообще буду рада любым Вашим комментариям!

Также делитесь этим уроком с друзьями при помощи кнопок социальных сетей и подписывайтесь на обновления блога (если Вы еще не подписаны). Обещаю Вам много интересных и полезных уроков и статей.

Также поздравляю Вас с уже приближающимися Новогодними Праздниками и желаю провести их весело!

Успехов Вам и до связи!

Интерактивная выдвижная панель на сайт

Как подключить любые шрифты для сайта

Рассылка на твоем сайте

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


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

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

rss podpiska

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


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

Комментарий добавил(а): Александр
Дата: 2013-12-28

Спасибо за урок. Я сейчас как раз прохожу уроки Евгения Попова по html и CSS. Так, что ваши уроки как раз кстати. Спасибо очень полезно для любого сайта.

Комментарий добавил(а): Админ Анна
Дата: 2013-12-28

Всегда пожалуйста! Рада,что Вам понравилось :)

Комментарий добавил(а): Ольга
Дата: 2015-04-14

Спасибо огромное! Вы очень помогли!

Комментарий добавил(а): Евгений
Дата: 2016-03-27

Спасибо за труд, очень всё доходчиво и понятно для понимания процесса.

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

Супер!, весьма просто и полезно для новичка)

Комментарий добавил(а): 4
Дата: 2016-07-27

ghf

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


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

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

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

rss podpiska

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