Адаптивная галерея для сайта — Gamma Gallery
Реализация стильной и одновременно современной адаптивной галереи Gamma Gallery для сайта на основе jQuery
Как реализовать:
1. Разметка html
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
1 |
<link rel="stylesheet" type="text/css" href="css/style.css"/> |
3. Подключаем библиотеку jQuery и JavaScript’s
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> |
Настройки галереи
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 |
Добрый день. А нельзя ли привести пример полной страницы index.html? Непонятно, куда вставлять блок «разметка html».
Приветствую!
На самом деле — все просто:
А далее подключаем скрипты и стили — и вуаля 🙂