Приветствую вас дорогие читатели! В этом уроке я покажу как сделать простою и легкую фотогалерею на Javascropt + JQuery!
Совсем недавно я публиковал пример создания галереи на javascript, сегодняшняя фотогалерея будет проще в своих возможностях, но зато намного красивее, так как в ней я использовал фреймворк jquery!
Почему jquery? Во-первых, в этой библиотеке реализовано много разных эффектов, свойств, анимации и так далее и тому подобное.. Поэтому не вижу смысла изобретать велосипед – можно брать пользоваться уже готовыми решениями.
Во-вторых, код написанный на jquery является кроссбраузерным (одинаково работает во всех браузерах), что очень важно!
В-третьих, на jquery можно реализовать очень много вещей, написав всего несколько строк кода (просто красота), в то время, как на чистом javascript, реализуя ту же анимацию, пришлось бы написать довольно-таки немало строк кода.
В отличие от таких javascript примеров, как игра или табы (вкладки), во всех своих следующих публикациях, скрипты будут написаны с использованием вышеописанного плагина, а вместо исходного кода примера, можно будет скачать исходники всей публикации, со всеми кодами, картинками и прочим..
Итак, это была вступительная часть, далее по теме..
Создаем простую, но красивую галерею!
Вот, собственно и сам код..
$(document).ready(function(){
$('#wrapper img').click(function(){
var fon = $('#fon').fadeIn(500);
var big_image = $('#big_image').fadeIn(500);
$('#big_image img').removeAttr('src').attr('src',this.alt);
$('#big_image img').load(function(){
$(this).fadeIn(2000);
});
$('img[src*=close]').click(function(){
fon.fadeOut(500);
big_image.fadeOut(500);
$('#big_image img').removeAttr('src');
});
});
});
Здесь происходит следующее: после окончания полной загрузки страницы, мы выбираем все картинки, которые содержатся в блоке с id wrapper, далее мы делаем плавное появление заднего темного фона за полсекунды – fadeIn(500), также, делаем плавное появление центрального блока div (блок с id big_image) – и после того, как в нем загрузится картинка, мы показываем её (до этого будет крутиться анимация загрузки).
После этого мы выбираем большую картинку (ссылки на большие картинки содержатся в атрибуте alt у маленьких картинок) и показываем ее в центральном блоке.
По нажатию на крестик в углу монитора, задний и центральный блоки плавно исчезают fadeIn(500) за полсекунды (за 500 миллисекунд).
Подробнее вы сможете разобраться, скачав исходные файлы.
Вот так выглядит структура html разметки для девяти (9) картинок.
<div id="wrapper">
<div class="one_line">
<div id="img_block"><img alt="big/1.jpg" src="small/1.jpg"></div>
<div style="margin-left: 20px;" id="img_block"><img alt="big/2.jpg" src="small/2.jpg"></div>
<div style="margin-left: 20px;" id="img_block"><img alt="big/3.jpg" src="small/3.jpg"></div>
</div>
<div class="two_line">
<div id="img_block"><img alt="big/4.jpg" src="small/4.jpg"></div>
<div style="margin-left: 20px;" id="img_block"><img alt="big/5.jpg" src="small/5.jpg"></div>
<div style="margin-left: 20px;" id="img_block"><img alt="big/6.jpg" src="small/6.jpg"></div>
</div>
<div class="three_line">
<div id="img_block"><img alt="big/7.jpg" src="small/7.jpg"></div>
<div style="margin-left: 20px;" id="img_block"><img alt="big/8.jpg" src="small/8.jpg"></div>
<div style="margin-left: 20px;" id="img_block"><img alt="big/9.jpg" src="small/9.jpg"></div>
</div>
</div>
Особенности галереи
- 1. Пока картинка не загрузится, показывается полоса процесса загрузки
- 2. Плавное появление и исчезновение изображений
- 3. Закрытие по нажатию на крестик в правом верхнем углу
Скачав данный пример, вы можете поставить свои картинки (изменить их количество и порядок), изменить стили и т.д., и после этого разместить галерею на своем сайте.
Demo фотогалереи
Скачать исходники
А на сегодня все, до новых публикаций!
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.