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

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

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

Реализация стильной и одновременно современной адаптивной галереи 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>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<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>

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>

1 2 3 4 5 6

<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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

// 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 Скачать исходник

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

delux

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

• Следующая публикация Адаптивное 3D меню для сайта
• Предыдущая публикация WP Nav Menu — Произвольные меню в WordPress

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

• 0

  Галерея для сайта на CSS3 (В виде табов)

  06.04.2016

   Автор: delux · Published 06.04.2016 · Last modified 25.02.2019

• 0

  Мобильная навигация — Responsive Navigation

  16.04.2016

   Автор: delux · Published 16.04.2016 · Last modified 25.02.2019

• 0

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

  19.03.2016

   Автор: delux · Published 19.03.2016 · Last modified 25.02.2019