Красивая галерея всегда придает сайту особенную изюминку. В данном уроке мы рассмотрим как создать отличный ротатор изображений с эффектом вращения слайдов, в различные стороны. Данный эффект будет достигнут с помощью плагина jQuery Rotate и правил CSS3 у нас получиться отличная галерея, которую можно будет использовать на своем сайте для демонстрации портфолио или свойств продукта. Идея заключается в плавном перевороте изображения в различные стороны, с эффектом смены изображений, что придает галереи особой иллюзии.

Как всегда, мы рассмотрим HTML разметку для слайдшоу. В которой основной контейнер div#slideShowContainer содержит div #slideShow и ссылки на предыдущий/следующий слайд (они будут преобразованы в стрелки с помощью CSS).

Слайды определяются как элементы li в неупорядоченном списке. Обратите внимание, что ширина изображений устанавливается в значение 100%. Таким образом, они масштабируются в соответствии с шириной div #slideShow.

Внизу включается библиотека jQuery, наш собственный скрипт script.js и плагин jQuery Rotate. Мы используем плагин, поэтому вращения CSS3 будут организованы в кросс-браузерном варианте, о чем будет  сказано далее в уроке.

Ширина элемента div #slideShow устанавливается равной 490px, его реальный размер составляет 510px. Разница в 20px переходит и на слайды (так как они привязаны к ширине элемента div #slideShow), которые уменьшаются от их нормального размера 480px до 460px. С помощью анимации jQuery они будут увеличиваться до полного размера. Таким образом, даже при использовании масштабирования изображения отображаются в своем реальном размере без потери качества.

Хотя большинство современных браузеров поддерживает вращения CSS3, установка специфических для разных браузеров свойств является весьма скучным и утомительным занятием. К счастью, существуют плагины, которые берут на себя всю возню с обеспечением кросс-браузерности. В данном уроке используется плагин jQuery Rotate, который также хорошо интегрирован с методами animate() и css(). Поэтому мы можем легко анимировать вращение элементов. Для этого используется пользовательское событие rotateContainer, обработчик которого вращает div #slideShow.

Для проверки поддержки браузером трансформаций CSS3 используется объект jQuery $.support. Вращения будут выводиться только в тех браузерах, которые их поддерживают, таких как Firefox, Chrome, Safari и Opera, а в старых версиях будет использоваться эффект затухания для перехода между слайдами.

Internet Explorer предлагает решение для вращения элементов на основе использования собственного свойства filter, но мы не будем использовать данную технику для нашего слайдшоу. Таким образом, слайдшоу будет работать во всех браузерах, но во всей красе его можно будет увидеть только в тех, которые поддерживают трансформации CSS3.

Во второй части кода содержится фрагмент, который выполняется только в браузерах, не поддерживающих трансформации CSS3. В данном случае мы также используем пользовательские события  showNext и showPrevious, но при переходе между слайдами используется проявление/растворение изображения без вращения.

Функция updateZindex() используется для установки правильного порядка вывода слайдов. Она присваивает свойству z-index соответствующие порядку следования значения, поэтому первый слайд выводится первым, а не последним (если оставить все по умолчанию).

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.