Красивая фотогалерея для вашего сайта!


Фотогалерея для сайта на jquery - скачать исходники + демо пример Приветствую вас дорогие читатели! В этом уроке я покажу как сделать простою и легкую фотогалерею на 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. 1. Пока картинка не загрузится, показывается полоса процесса загрузки
  2. 2. Плавное появление и исчезновение изображений
  3. 3. Закрытие по нажатию на крестик в правом верхнем углу
Скачав данный пример, вы можете поставить свои картинки (изменить их количество и порядок), изменить стили и т.д., и после этого разместить галерею на своем сайте.
Demo фотогалереи Скачать исходники
А на сегодня все, до новых публикаций!


Раздел: Программирование

Дата последнего изменения: 2014-01-27 23:44:19

Просмотров: 11561

Читайте также:

Игра Угадай число на JavaScript!
Html таблица на JavaScript
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Видео галерея на JavaScript!
Падающий мяч на JavaScript!
Генератор случайных картинок на JavaScript!
Как изменить фон страницы на JavaScript

Оставить комментарий

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*