/ Скрипты / Адаптивная галерея для сайта — 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 для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Exact matches only

Search in title

Search in content

Search in excerpt

Search in posts

Search in pages

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

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

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

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

Счетчик

Мета

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

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

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

Красивый слайдер с паралакс эффектом

Простая навигация для мобильных устройств

Анимированные вкладки (табы) для сайта

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

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

Счетчик

Мета

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