Создание фотогалереи для адаптивного дизайна — не самая простая задача.
Вам следует рассмотреть возможность отображения на экранах разной ширины, не загружая слишком много графики на мобильные устройства.
Хорошее решение — Галерея Гамма, выглядит очень круто.
Демонстрация | Источники
При разработке галереи использовались следующие инструменты:
- jQuery Масонство для сетки
- API видимости страницы для слайдшоу
- URL() : простой парсер URL-адресов в JavaScript
- История.
js
для поддержки API истории/состояния HTML5 - jQuery++ И Модернизр
Настройки плагина:<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 src="images/xxxlarge/1.jpg" data-min-width="1300"></div> <div src="images/xxlarge/1.jpg" data-min-width="1000"></div> <div src="images/xlarge/1.jpg" data-min-width="700"></div> <div src="images/large/1.jpg" data-min-width="300"></div> <div src="images/medium/1.jpg" data-min-width="200"></div> <div src="images/small/1.jpg" data-min-width="140"></div> <div 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 .
Теги: #адаптивная верстка #галерея #разработка сайтов #CSS
Вместе с данным постом часто просматривают:
-
Больше Удовольствия. Я Серьезно
19 Oct, 24 -
Капча: Идея!
19 Oct, 24 -
Рекламодатели Заинтересованы В Конверсии
19 Oct, 24
