Простая галерея без навигации на JQuery

Простая галерея без навигации на JQuery

42012-02-251815Денис Абдуллин
Галерея не особо продумана в плане гибкости настроек, легко будет только заполнять галерею изображениями. Достаточно вставлять картинки размером 900 на 500 пикселей определенным кодом. Этот размер используемых изображений выписан не случайно, Вам придется повозиться, чтобы его изменить. Нет, Вы можете вставить картинки любого размера, но от этого изменится качество анимации, изменить общий вид галереи. Простая галерея без навигации на JQuery привлекает в первую очередь своей оригинальной анимацией. Она представлена в виде одновременно уменьшения прошлого и увеличения следующего слайда. Таким образом достигается эффект объемного переворачивания. А простая она потому, что вся графика позиционируется в центре. Есть еще одна деталь, которая изначально не планировалась. Эта деталь – подпись картинок. Подпись выдирается из атрибута ALT. Если этого атрибута не будет у встраиваемой на страницу графики, возникнет ошибка (не такая критическая, но все-таки).

Самое простое управление для галереи

Никаких обозначений и видимых элементов для управления галереей на странице нет. Так как же тогда она управляется? Очень просто, можно просто кликнуть по странице (в любом месте), и будет осуществлен переход к следующему слайду. Также, нажав на любую клавишу, используемую при вводе текста (за исключением некоторых), будет осуществляться переключение.

Код



Вернее будет написать, что это элемент кода, а именно фрагмент, отвечающий за список и порядок фотографий галереи. Каждое изображение необходимо заключать в тег DIV (он может иметь свои атрибуты). Плюс, все картинки обязательно содержат атрибут ALT, который определяет подпись.

Советуется использовать такую галерею для показа презентаций, к примеру, в школе. Дело в том, что я уже использовал ее, чтобы показывать свои имеющиеся слайды. После этого в галерее не было изменений.

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.