Простейшая фотогалерея с превью на jQuery

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

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

Как это работает:

Итак. Для начала необходимо подготовить HTML-структуру галереи. Добавьте на страницу следующий код:

<div id="gallery">
	<div class="full">
		<img src="/images/image1.jpg">
	</div>
	<div class="thumbs">
		<a href="#">
			<img src="/images/image1.jpg">
		</a>
		<a href="#">
			<img src="/images/image2.jpg">
		</a>
		<a href="#">
			<img src="/images/image3.jpg">
		</a>
		<a href="#">
			<img src="/images/image4.jpg">
		</a>
		<a href="#">
			<img src="/images/image5.jpg">
		</a>
		<a href="#">
			<img src="/images/image6.jpg">
		</a>
	</div>
</div>

Здесь ничего сложного, у нас есть блок самой галереи #gallery, в которой мы размещаем увеличенное изображение .full и список миниатюр .thumbs

Также давайте добавим несколько CSS-стилей, чтобы хоть как-то понимать где и что находится.

#gallery .full {
	width: 668px;
	height: 400px;
	border: 1px solid #000;
	text-align: center;
}

#gallery .full img {
	max-width: 100%;
	max-height: 100%;
}

#gallery .thumbs a {
	text-decoration: none;
}

#gallery .thumbs a img {
	width: 100px;
	height: 75px;
	margin: 0px 5px;
}

#gallery .thumbs a:first-child img {
	margin-left: 0px;
}

#gallery .thumbs a:last-child img {
	margin-right: 0px;
}

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

Теперь перейдем к главному. Подключите библиотеку jQuery и следом добавьте небольшой скрипт:

$(document).ready(function() {
	$('#gallery .thumbs a').on('click', function(e) {
		e.preventDefault();
		var url = $(this).children('img').attr('src');
		$('#gallery .full img').animate({
			opacity: 0
		}, 400, function() {
			$('#gallery .full img').attr('src', url);
			$('#gallery .full img').animate({
				opacity: 1
			}, 400);
		});
	});
});

Обратите внимание, что мы обрабатываем клик не по картинке миниатюры, а по ссылке, в которую обернута миниатюра. Это сделано на случай, если вы захотите выводить в виде миниатюр специально подготовленные уменьшенные изображения, а по клику на них будут открываться полноразмерные. Для этого вам понадобится в HTML-структуре прописать в ссылках пути к полноразмерным изображениям, а в скрипте передавать не SRC миниатюры, а HREF ссылки, в которую обернута миниатюра.

Собственно, что же делает скрипт? По клику на ссылку миниатюры, мы прерываем стандартную работу ссылки, а именно переход по ссылке, в переменную передаем значение ссылки на нажатое изображение, после чего начинаем анимировать главное (увеличенное) изображение, сперва прячем его (в скрипте используется метод затухания в течении 400 милисекунд), после того как изображение полностью исчезнет, подменяем ссылку старого изображения на новую и делаем обратную анимацию.

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

Демо


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

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

0 / 2500 Ограничение символов
Ваш текст должен быть в пределах 10-2500 символов
Комментарии | Добавить свои
  • Комментарии не найдены