/ Скрипты / Адаптивная галерея для сайта — Gamma Gallery

Адаптивная галерея для сайта — Gamma Gallery

Автор: delux · Опубликовано 13.03.2017 · Обновлено 13.03.2017

Реализация стильной и одновременно современной адаптивной галереи Gamma Gallery для сайта на основе jQuery

Как реализовать:
1. Разметка html

<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"gamma-container gamma-loading"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"gamma-container"</span>></span>

	<span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"gamma-gallery"</span>></span>
		<span class="hljs-tag"><<span class="hljs-title">li</span>></span>
			<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">data-alt</span>=<span class="hljs-value">"img01"</span> <span class="hljs-attribute">data-description</span>=<span class="hljs-value">"<h3>Assemblage</h3>"</span> <span class="hljs-attribute">data-max-width</span>=<span class="hljs-value">"1800"</span> <span class="hljs-attribute">data-max-height</span>=<span class="hljs-value">"2400"</span>></span>
				<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">data-src</span>=<span class="hljs-value">"images/xxxlarge/1.jpg"</span> <span class="hljs-attribute">data-min-width</span>=<span class="hljs-value">"1300"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
				<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">data-src</span>=<span class="hljs-value">"images/xxlarge/1.jpg"</span> <span class="hljs-attribute">data-min-width</span>=<span class="hljs-value">"1000"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
				<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">data-src</span>=<span class="hljs-value">"images/xlarge/1.jpg"</span> <span class="hljs-attribute">data-min-width</span>=<span class="hljs-value">"700"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
				<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">data-src</span>=<span class="hljs-value">"images/large/1.jpg"</span> <span class="hljs-attribute">data-min-width</span>=<span class="hljs-value">"300"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
				<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">data-src</span>=<span class="hljs-value">"images/medium/1.jpg"</span> <span class="hljs-attribute">data-min-width</span>=<span class="hljs-value">"200"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
				<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">data-src</span>=<span class="hljs-value">"images/small/1.jpg"</span> <span class="hljs-attribute">data-min-width</span>=<span class="hljs-value">"140"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
				<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">data-src</span>=<span class="hljs-value">"images/xsmall/1.jpg"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
				<span class="hljs-tag"><<span class="hljs-title">noscript</span>></span>
					<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"images/xsmall/1.jpg"</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">"img01"</span>/></span>
				<span class="hljs-tag"></<span class="hljs-title">noscript</span>></span>
			<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
		<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
		<span class="hljs-tag"><<span class="hljs-title">li</span>></span> <span class="hljs-comment"><!-- ... --></span> <span class="hljs-tag"></<span class="hljs-title">li</span>></span>
		<span class="hljs-comment"><!-- ... --></span>
	<span class="hljs-tag"></<span class="hljs-title">ul</span>></span>

	<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"gamma-overlay"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>

<span class="hljs-tag"></<span class="hljs-title">div</span>></span>

<li>

<div data-alt="img01" data-description="<h3>Assemblage</h3>" data-max-width="1800" data-max-height="2400">

</noscript>

</div>

</li>

</ul>

</div>

2. Подключаем в шапку сайта стили CSS

<link rel="stylesheet" type="text/css" href="css/style.css"/>

1	<link rel="stylesheet" type="text/css" href="css/style.css"/>

3. Подключаем библиотеку jQuery и JavaScript’s

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script src="js/jquery.masonry.min.js"></script>
		<script src="js/jquery.history.js"></script>
		<script src="js/js-url.min.js"></script>
		<script src="js/jquerypp.custom.js"></script>
		<script src="js/gamma.js"></script>

Настройки галереи

// default value for masonry column count
columns : 4,
// transition properties for the images in ms (transition to/from singleview)
speed : 300,
easing : 'ease',
// if set to true the overlay's opacity will animate (transition to/from singleview)
overlayAnimated : true,
// if true, the navigate next function is called when the image (singleview) is clicked
nextOnClickImage : true,
// circular navigation
circular : true,
// transition settings for the image in the single view.
// These include:
// - adjusting its position and size when the window is resized
// - fading out the image when navigating
svImageTransitionSpeedFade : 300,
svImageTransitionEasingFade : 'ease-in-out',
svImageTransitionSpeedResize : 300,
svImageTransitionEasingResize : 'ease-in-out',
svMarginsVH : {
	vertical : 140,
	horizontal : 120
},
// allow keybord and swipe navigation
keyboard : true,
swipe : true,
// slideshow interval (ms)
interval : 4000,
// if History API is not supported this value will turn false
historyapi : true

// default value for masonry column count

columns : 4,

// transition properties for the images in ms (transition to/from singleview)

speed : 300,

easing : 'ease',

// if set to true the overlay's opacity will animate (transition to/from singleview)

overlayAnimated : true,

// if true, the navigate next function is called when the image (singleview) is clicked

nextOnClickImage : true,

// circular navigation

circular : true,

// transition settings for the image in the single view.

// These include:

// - adjusting its position and size when the window is resized

// - fading out the image when navigating

svImageTransitionSpeedFade : 300,

svImageTransitionEasingFade : 'ease-in-out',

svImageTransitionSpeedResize : 300,

svImageTransitionEasingResize : 'ease-in-out',

svMarginsVH : {

vertical : 140,

horizontal : 120

// allow keybord and swipe navigation

keyboard : true,

swipe : true,

// slideshow interval (ms)

interval : 4000,

// if History API is not supported this value will turn false

historyapi : true

Смотреть DEMO Скачать исходник

Метки: HTML CSS Адаптивная галерея галерея для сайта jQuery

delux

Предлагаю делиться опытом в сфере сайтостроения!

Игорь:

09.01.2020 в 12:46

Добрый день. А нельзя ли привести пример полной страницы index.html? Непонятно, куда вставлять блок «разметка html».

Ответить

delux:

09.01.2020 в 13:42

Приветствую!

На самом деле — все просто:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	

<!-- Здесь тот самый код из "Разметка html" -->


</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

А далее подключаем скрипты и стили — и вуаля 🙂

Ответить

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Адаптивная галерея для сайта — Gamma Gallery

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

комментария 2

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

Счетчик

Мета

Случайные записи

Адаптивная галерея для сайта — Gamma Gallery

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

Популярные посты в боковой панели

jQuery Input Mask — Маска для полей ввода

Фиксированный фон при прокрутке страницы

комментария 2

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

Счетчик

Мета

Случайные записи