Gamma Gallery — отличная адаптивная галерея

    Создание фотогалереи для адаптивного дизайна — не самая простая задача. Следует учитывать отображение на экранах различной ширины, при этом не загружая слишком много графики на мобильных устройствах. Хорошее решение — Gamma Gallery, выглядит очень круто.



    Демонстрация | Исходники

    При разработке галереи использовались следующие инструменты:



    В основной 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.
    Share post

    Comments 38

      0
      Я обратил внимание, что низ галереи не ровный, в то время, как правый край ровный. Это специальный эффект? Если я загружу картинки разной ширины, то останется ли всё так гладко? И есть ли возможность сделать и низ гладким?

      P.S. Извиняюсь, если вопрос глупый, я далёк от этой темы.

      P.S. А выглядит на самом деле хорошо, потому и заинтересовался.
        +2
        Картинки подстраиваются под размер колонок, которые в свою очередь равны между собой, и количество которых зависит от размеров окна (экрана девайса и т.п.). Т.е. да, все останется гладко.
        • UFO just landed and posted this here
            +1
            Если считать, что ширина колонки для разных колонок не обязана быть одинаковой — то очевидно можно.

            Если ничего не путаю — можно найти нормальное решение для линейного уравнения (чтобы ширины колонок были максимально схожими по ширине). В результате ширины колонок будут немного различаться (на больших галереях не сильно мешаться будет) и низ будет ровный.
            • UFO just landed and posted this here
            0
            Можно.
            Есть высота каждой колонки, берем наименьшую. У остальных колонок для каждой фотографии обрезаем превью по высоте на разницу деленную на количество фотографий в колонке.
            • UFO just landed and posted this here
                +1
                Ну если уж на то пошло — может превьюшки вообще квадратными сделать, а фото не попавшие в последний ряд удалить?)
                  +1
                  Не вижу поводов для сарказма) Вполне жизнеспособное решение
              +2
              Шикарная галерея!
                +1
                Галерея очень красивая. Но у меня, не знаю как, но вышло, что «подложкой» оказалась одна картинка, а поверх нее отображалась текущая. Как-то так:
                После f5, конечно, все встало на свои места.
                Google Chrome Version 23.0.1271.64
                  +2
                  Плохо срабатывает кнопка закрыть (x) при просмотре фото: если фото открывается в первый раз, то только через 4-5 после открытия можно его закрыть, если фото уже открывалось, то через 2-3 секунды. До этого ничего сделать нельзя. Так же, хотелось бы еще и по Esc закрывать. Windows 7, Chrome 23.0.1271.64 m
                    0
                    Я заметил что при изменении ширины окна браузера в сторону уменьшения, картинки плавно уменьшаются и при фиксации размера окна браузера нормально заполняют области. Но вот если увеличивать размер окна, то картинки начинают расширяться и налазить друг на друга :( не очень то смотрится.
                    Win8 Chrome 23.0.1271.64 m
                      0
                      То же самое в ФФ 16.0.2 WinXP
                      +1
                      Классная штука, правда нужно ещё потестить и баги поправить.
                        +1
                        Мне нравится фоторама, но увы она теперь платная. Но для личных проектов она бесплатная.
                        • UFO just landed and posted this here
                            –1
                            На вид неплохо, но вот выход из увеличения делать лучше кликом во всей темной зоне а не четко по крестику в углу, так удобнее ИМХО. А при клике на саму увеличенную фотку переход к следующей. Подкрутитить каменты и вуаля — Pinterest )))
                              0
                              А если объявить только одно изображение для каждого элемента, как будет работать?
                                +1
                                спаисбо, постараюсь применить на своем сайте…
                                картинная галлерея моего брата
                                • UFO just landed and posted this here
                                  • UFO just landed and posted this here
                                    • UFO just landed and posted this here
                                      • UFO just landed and posted this here
                                        • UFO just landed and posted this here
                                          • UFO just landed and posted this here
                                            • UFO just landed and posted this here
                                              • UFO just landed and posted this here
                                                • UFO just landed and posted this here
                                        0
                                        Она правда ваще не адаптивна
                                        • UFO just landed and posted this here
                                            0
                                            В той, что прислали Вы багов еще больше — пока не перезагрузишь страницу, фотки не адаптируются
                                            • UFO just landed and posted this here
                                                0
                                                Дык я не Вас писал, а ssh4 :)
                                        –1
                                        Выглядит красиво, но я всегда в таких галереях теряюсь, как их «читать» — вертикально или горизонтально?
                                        • UFO just landed and posted this here
                                          0
                                          Подскажите как заливать изображения? Или надо самому конвертить под все размеры?
                                          • UFO just landed and posted this here

                                          Only users with full accounts can post comments. Log in, please.