Создаем 3D галерею

При переходе между панелями, мы будем анимировать несколько разделительных линий («сетку») и настраивать размер панелей следующего слайда. Панели будут появляться с 3D-эффектом, который мы определим для каждой из них. Обратите внимание, что это очень экспериментальная галерея. Она будет работать как задумано только в браузерах, которые поддерживают новые свойства CSS, использованые здесь. Она была протестирована в последних версиях Safari, Chrome и Firefox (без сглаживания).

jQuery-плагины необходимые для галереи:

• jQuery Transit для CSS анимации
• Modernizr для проверки браузеров на предмет поддержки различных CSS-свойств

HTML-разметка выглядит следующим образом:

<ul id="sg-panel-container">
    <li data-w="60" data-h="55">
        <img title="Grexit" src="images/1.jpg" data-rotate-x="50" />
        <img title="Godwottery" src="images/2.jpg" data-rotate-y="-50" />
        <img title="Somniloquent" src="images/3.jpg" data-rotate-x="50" data-translate-z="-700" />
        <img title="Etiquette" src="images/4.jpg" data-translate-z="250" />
    </li>
    <li data-w="50" data-h="100">
        <img title="Somniloquent" src="images/3.jpg" data-rotate-x="50" data-translate-z="-700" />
        <div>
            <div class="sg-content">
                <h3>Proinde vos postulo</h3>
                <p>Veggies sunt bona vobis, proinde...</p>
            </div>
        </div>
    </li>
    <!-- ... -->
</ul>

Первый слайд, который является элементом списка, в данном примере будет содержать четыре изображения. Атрибуты данных data-w и data-h, определяют соответственно ширину и высоту (в процентах) первого изображения или элемента. Так как мы имеем не более четырех элементов в каждом элементе списка, мы без труда узнаем ширину и высоту других панелей, зная значения первой. Мы также можем просто добавить 2 элемента, как во втором слайде. Значения ширины и высоты должны быть выбраны в зависимости от желаемого расположения панелей. Во втором слайде, мы определим, что первый элемент, который является изображением, будет иметь размер в 50% от ширины и 100% от высоты, оставляя остальное пространство для текста.

Каждый элемент/изображение могут иметь data-атрибуты для создания transitions-эффектов. Могут быть использованы следующие атрибуты:

• data-rotate-x
• data-rotate-y
• data-rotate-z
• data-translate-x
• data-translate-y
• data-translate-z

Макет, который мы будем создавать динамически, имеет следующую структуру:

<div class="sg-wrapper">
    <div class="sg-box sg-box-1">
        <div class="sg-panel">
            <div style="background-image: url(/images/1.jpg);">
                <h2>Grexit</h2>
            </div>
        </div>
    </div>
    <div class="sg-box sg-box-2" style="width: 40%; height: 55%; left: 60%; ">
        <!-- ... -->
    </div>
<!-- ... -->
</div>

Каждое изображение или элемент будет заключен в блок с классом sg-box. Название изображения поместим в заголовок h2, а само изображение будем использовать как фоновое изображение внутреннего блока с классом sg-panel. Кроме того, блоки будут иметь соответствующие стили (ширина, высота, преобразования и переходы).

Фоновые изображения будет иметь свойство background-size: cover, который позволит им закрывать фон всей панели, независимо от размера.

Для вызова плагина, просто используйте следующий код:

$(function() {
    $( '#sg-panel-container' ).gridgallery();
});

Не забудьте также подключить другие скрипты, необходимые для работы галереи. Примеры вы можете посмотреть в исходных файлах.