Лайтбокс (lightbox) очень здоровский скрипт для отображения изображений на странице. В этом уроке будет рассмотрен изменненый скрипт на базе лайтбокса. Особенности: изображение можно расширить, если изображение больше текущего размера окна браузера, размер изображения автоматически подгоняется под размер окна, можно наложить на изображение другую картинку (например, new - новинка), изображение можно увеличить с помощью колесика мышки и его можно перетаскивать.
Всё что нам понадобится - это изображение, которое будет использоваться в качестве фонового. При изменении окна браузера, будут изменяться и размеры нашего фонового изображения. Плагин проверен в Safari, Chrome, Opera, IE8 и Firefox.
Слайдер изображений, при клике по картинке происходит её увеличение с возможностью пролистывания уже увеличенных изображений слайдера. Также имеется возможность подписи. Работает во всех браузерах.
Интересный и простой эффект, который можно использовать на сайте интернет магазина. Полноразмерные изображения помещаются в контейнер DIV меньшего размера. Изображение центрируется, но не показывается полностью, так как параметр overflow:hidden - в состоянии включен. При наведении мыши на картинку, overflow:hidden переходит в состояние выключен и рубашка показывается полностью.
Слайдшоу из изображений во весь экран с элементами HTML5 аудио, чтобы придать динамичности и вдохнуть жизнь в фотографии, в данном случае в галерею Нью-Йорка. Для создания слайдшоу и полноэкранного режима используется плагин jquery.vegas.js, аудио будет управлять buzz.js, миниаютюры будут прокручиваться благодаря jquery.jscrollpane.js и плюс несколько эффектов от jquery.easing.js.
Ассиметричный слайдер изображений в котором при смене картинок происходит их небольшой поворот. Добавлена опция автозапуска и прокрутка с помощью колесика мыши. В слайдере будем использовать плагин jQuery 2D Transformation Plugin для поворота изображений и плагин jQuery Mousewheel Plugin для использования колесика мыши.
Плагин для увеличения отдельных элементов изображения при перемещении курсора по нему.
Небольшое и полностью автономное ответвление от TinySlider реализующее слайдшоу с эффектом растворения (fade).
Для изображний больших форматов можно использовать данный плагин, который позволяет с экономить место на странице, путем помещения оригинального изображения в контейнер ограниченных размеров, и добавив к нему миниатюру, перемещая курсором по которой, мы будет перемещаться и по оригинальному изображению в контейнере. Короче смотрим демку...
Ещё один плагин слайдшоу, однако его возможности не ограничиваются простым перелистыванием контента. Можно добавить всплывающие подсказки с текстом или миниатюрами изображений, активировать динамически высоту и многое другое.
Эффект всплывающей подсказки - изображения при наведении на иконку - миниатюру картинки.
Простейшая галерея выполненная на jQuery и состоящая всего из 4 строчек вызывающего кода.