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

Фотогалерея для сайта на 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 фотогалереи

Скачать исходники

А на сегодня все, до новых публикаций!


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

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

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>