- PVSM.RU - https://www.pvsm.ru -
Создание фотогалереи для адаптивной дизайна — не самая простая задача. Следует учитывать отображение на экранах различной ширины, при этом не загружая слишком много графики на мобильных устройствах. Хорошее решение — Gamma Gallery, выглядит очень круто.
Демонстрация [1] | Исходники [2]
При разработке галереи использовались следующие инструменты:
В основной HTML-конструкции сразу объявляются изображения всех размеров, но подгружается только одно, в зависимости от размера экрана:
<div class="gamma-container gamma-loading" id="gamma-container">
<ul class="gamma-gallery">
<li>
<div data-alt="img01" data-description="<h3>Assemblage</h3>" data-max-width="1800" data-max-height="2400">
<div data-src="images/xxxlarge/1.jpg" data-min-width="1300"></div>
<div data-src="images/xxlarge/1.jpg" data-min-width="1000"></div>
<div data-src="images/xlarge/1.jpg" data-min-width="700"></div>
<div data-src="images/large/1.jpg" data-min-width="300"></div>
<div data-src="images/medium/1.jpg" data-min-width="200"></div>
<div data-src="images/small/1.jpg" data-min-width="140"></div>
<div data-src="images/xsmall/1.jpg"></div>
<noscript>
<img src="images/xsmall/1.jpg" alt="img01"/>
</noscript>
</div>
</li>
<li> <!-- ... --> </li>
<!-- ... -->
</ul>
<div class="gamma-overlay"></div>
</div>
Настройки плагина:
// 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
Инициализация галереи, определяет какое количество колонок будет отображаться на определенных экранах:
<script type="text/javascript">
$(function() {
var GammaSettings = {
// order is important!
viewport : [ {
width : 1200,
columns : 5
}, {
width : 900,
columns : 4
}, {
width : 500,
columns : 3
}, {
width : 320,
columns : 2
}, {
width : 0,
columns : 2
} ]
};
Gamma.init( GammaSettings );
});
</script>
Плагин в данный момент носит экспериментальный статус, однако работает достаточно стабильно, поэтому использовать его на живых сайтах вполне можно. Авторы галереи — tympanus.net [9].
Автор: grokru
Источник [10]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/veb-dizajn/20365
Ссылки в тексте:
[1] Демонстрация: http://tympanus.net/Development/GammaGallery/
[2] Исходники: http://tympanus.net/Development/GammaGallery/GammaGallery.zip
[3] jQuery Masonry: http://masonry.desandro.com/
[4] PageVisibility API: http://www.w3.org/TR/page-visibility/
[5] url(): https://github.com/websanova/js-url
[6] History.js: https://github.com/balupton/history.js
[7] jQuery++: http://jquerypp.com/
[8] Modernizr: http://modernizr.com/
[9] tympanus.net: http://tympanus.net/codrops/2012/11/06/gamma-gallery-a-responsive-image-gallery-experiment/
[10] Источник: http://habrahabr.ru/post/159087/
Нажмите здесь для печати.