Добавить в избранное

Галерея на jQuery

Дата: 2011-11-15

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

Скачать все файлы можно тут.

Внешний вид данной галереи представлен на рисунке ниже.

 

Установка и использование галереи:

1) Подключить javascript файлы и встроенную таблицу стилей между тегами  

 


Помните про правильный путь к файлам, если поменяете их месторасположение.

2) Прописать в теле вашего html-документа следующий код: 






Galleria Demo 1





 

 

 





Galleria Demo 01

 

 


Information


This demonstration shows you aome more advanced effects you can accomplish with the Galleria plugin. The history object is also active, so feel free to try the back button in your browser and bookmark a page. The next and previous links are simple to create since the galleria object has two public functions for traversing the images in your list.


This gallery was created from a simple unordered list with images - thumbnails and functionality is all in the Galleria plugin. Viewing this page without javascript or CSS enabled with degrade it into a list of full-size images.


Visit the galleria project: http://galleria.googlecode.com





 

 

 

Помните про пути к вашим картинкам, указанным в атрибуте src тэга . Расположение всех картинок оформлено в виде стилизованного списка помещенного в блок с идентификатором main_image. Если будите использовать свои картинки, то измените атрибуты alt и title, а также width и height картинок для указания их размера. В представленной галереи использовались картинки размером 700 x 438 пикселей.

Навигация оформлена в виде ссылок next(следующий) и previous(предыдущий). Их работа основана на использовании обработчиков событий $.galleria.prev() и .galleria.next() соответственно, срабатывающих после одиночного щелчка мыши по навигационной ссылке.

Источник урока: http://devkick.com 

сайт tiwebmaster.ru

 

Просмотров: 847

Последние 5 уроков

Обработка AJAX с помощью jQuery (часть 2)

В предыдущем уроке серии мы дали общее определение технологии AJAX и рассмотрели простой пример с использованием метода $.get(). Теперь продвинемся дальше и посмотрим, что еще можно делать с помощью AJAX и как.


Обработка AJAX с помощью jQuery (часть 1)

Первая статья посвящеа общему описанию технологии AJAX и потроение запросов при помощи метода $.get().


Размножения полей формы на сайте

Здравствуйте! уважаемые читатели Бывают ситуации когда нужно добавить на сайте несколько данных по одному критерию, можно несколько раз добавлять данные но это не проффесионально поэтому я предлогаю материал по добавлению полей при помощи jQuery.


Автосохранение данных, введенных в поля формы

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


10 вставок кода jQuery

jQuery вдохнул новую жизнь в JavaScript. В данном уроке приводится 10 вставок кода jQuery, которые облегчат решение повседневных задач, возникающих при создании веб приложений.


Видео уроки по php,jquery,ajax,css,html,сео