В этом уроке я покажу Вам, как создать интерактивную галерею изображений для Вашего сайта, чтобы посетители, щелкая по миниатюрам изображений могли увидеть каждое изображение в увеличенном виде. И никакой перезагрузки страницы! Изображения появляются автоматически с эффектом постепенного проявления!
У нас на странице будет область с миниатюрами изображений галереи и область, где мы будем показывать изображение в увеличенном масштабе. Щелкая по любой из миниатюр, посетитель будет видеть соответствующее большое изображение в этой области. Изображение будет проявляться в течении некоторого времени, создавая эффект анимации, а предыдущее изображение будет в это время растворяться.
Справиться с такой задачей достаточно несложно, если применить возможности библиотеки 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» мы задаем отступ слева, верхнюю рамку, а также позиционируем относительно, а большие изображения, которые будут в него попадать позиционируем абсолютно.
Теперь если мы обновим страницу в браузере, то увидим вот что:
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 для того, чтобы выбрать первое изображение, после чего «вешаем» на него событие 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 действительно очень мощная вещь. Например, в данном конкретном случае мы написали совсем немного кода, а получили прекрасно работающую галерею. И это только малая часть того, что можно делать, зная возможности этой библиотеки и умея ими пользоваться.
А на этой ноте я буду с Вами прощаться.
Если урок Вам понравился или возникли какие-либо вопросы, пишите комментарии, и я Вам обязательно отвечу и вообще буду рада любым Вашим комментариям!
Также делитесь этим уроком с друзьями при помощи кнопок социальных сетей и подписывайтесь на обновления блога (если Вы еще не подписаны). Обещаю Вам много интересных и полезных уроков и статей.
Также поздравляю Вас с уже приближающимися Новогодними Праздниками и желаю провести их весело!
Успехов Вам и до связи!
){kind=link}