Показать Меню
falbar Галерея материалов

Галерея материалов как на главной Рамблера

Галерея материалов

Привет, друзья! Сегодня в статье мы поговорим о ещё одном способе создать галерею с элементами слайдера. Главным отличием данного решения является то, что её элементы могут быть различной высоты, а размещены друг под другом. Данный способ расположения блоков с контентом можно увидеть на многих ресурсах, к примеру: новостная лента на рамблере или подборка материалов на surfingbird.

При рассмотрении данной галереи, хочется отметить, что она написана исключительно на JavaScript без использования сторонних тяжеловесных фреймворков. Да, с виду может показаться, что установка не особо понятна, но как во многих похожих скриптах мы просто подключаем решение к себе в проект, а потом изменяем под себя.

Приступим, и, пожалуй, начнем с разметки, которую нам стоит добавить для работы скрипта:

<div id="grid-gallery" class="grid-gallery">
	<section class="grid-wrap">
		<ul class="grid">
			<li class="grid-sizer"></li>
			<li>
				<figure>
					<img src="img/thumb/1.png" alt="img01"/>
					<figcaption>
						<h3>Заголовок 1</h3>
						<p>Краткое описание</p>
					</figcaption>
				</figure>
			</li>

			...
		</ul>
	</section>
	<section class="slideshow">
		<ul>
			<li>
				<figure>
					<figcaption>
						<h3>Заголовок 1 активного слайда</h3>
						<p>Полное описание</p>
					</figcaption>
					<img src="img/large/1.png" alt="img01"/>
				</figure>
			</li>

			...
		</ul>
		<nav>
			<span class="icon nav-prev"></span>
			<span class="icon nav-next"></span>
			<span class="icon nav-close"></span>
		</nav>
		<div class="info-keys icon">Управляйте с помощью стрелок на клавиатуре</div>
	</section>
</div>

При добавлении разметки стоит учитывать, что под каждый блок с контентом должен быть расположен слайд в элементе с классом .slideshow. Далее подключим CSS и скрипт для поддержки новых элементов HTML5 в старых браузерах (в шапку сайта):

<link href="css/main.css" type="text/css" rel="stylesheet" />
<link href="css/component.css" type="text/css" rel="stylesheet" />
<script src="js/modernizr.custom.js"></script>

Не забываем для работы modernizr указать <html class="no-js">. Последние, что нам останется, в конце документа подключить требуемые скрипты:

<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpGridGallery.js"></script>
<script>
	new CBPGridGallery(document.getElementById("grid-gallery"));
</script>

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

Источник
github.com

Подписаться на обновления

Комментариев еще не оставлено