Раз уж Вы решили разобраться с jQuery, значит как минимум азы сайтостроения (HTML и CSS) уже знаете. Наверняка знаете или хотя бы слышали, что такое JavaScript. Для тех кто подзабыл напоминаю, что JavaScript - это программный участок кода, который внедряется в код web-страницы и позволяет реализовать различные эффекты, недоступные с помощью HTML и CSS. Например отображение на сайте часов или текущей даты. Т.е. в нужные места web-страницы подставляют с программные куски кода, которые и выполняют нужную задачу. Это и есть JavaScript.
Если говорить коротко, то jQuery - это целая библиотека различных скриптов, собранных в один исполняемый файл. Определенный эффект вытаскивается из этой библиотеки и подставляется в нужном месте web-страницы. О том, как это делается практически мы и будем разбираться в этом разделе.
Одно из новшеств современного веб-дизайна – это применение на сайте модальных окон, наверняка Вы уже неоднократно видели такой эффект: картинка (фотография, изображение, рисунок и т.д.) при клике по ней, открывается в отдельном окне, на затененном фоне. Смотрится очень эффектно. Поэтому и называется такой эффект – модальные окна. В этом уроке мы научимся мотировать Модальные окна, в которых будем выводить одиночное изображение и группу изображений.
В прошлом уроке Как сделать плавное увеличение картинки при клике я рассказывал о создании на сайте модальных окон использующих технологию jQuery. После выхода этого урока я получил большое количество писем, отзывов и комментариев. Из всего сказанного, сделал вывод: наверное поторопился давать такой урок, для общего понимания: что такое вообще jQuery, как работает и какие возможности нам дает, нужно сначала немного рассказать о теории. Что ж исправлюсь. Начинаем серию статей и уроков о jQuery.
Гораздо интереснее и нагляднее изучать любой предмет на практике. Вспомните школьные уроки… Я например был в восторге от уроков химии, смешал что-то (кто его знает что :) ) и тут же получил результат, увы иногда печальный... Но зато сколько эмоций и как хорошо все запоминалось без скучной зубрежки. Поэтому, эту же методику применим и здесь, при изучении jQuery. Давайте будем разбираться со скучной теорией на практике.
В этом уроке мы подробно разберем как создаются Слайдеры. Что это такое? Видели закладки, торчащие по бокам некоторых сайтов. При клике на такую закладку выезжает блок с контетом, при повторном клике блок так же плавно уезжает назад, оставляя на виду небольшую закладку. Это и есть Слайдер. Как говорится лучше один раз увидеть, чем 100 раз услышать, поэтомусмотрим живойпример.
Сегодня мы разберемся как с помощью jQuery сделать галерею изображений с плавно сменяющими друг друга картинками. Например такую галерею изображение Вы можете использовать при показе своих фотографий, или же некоторые используют в шапке сайта. Неплохо смотрятся сменяющиеся баннеры и т.д.
Продолжаем разбираться с библиотекой jQuery и плагином jquery.cross-slide.js. В одном из прошлых уроков с помощью этого плагина мы создавали эффект плавно сменяющихся картинок. Но с помощью этого плагина можно реализовать и другие эффекты, например: эффект приближения и отдаления изображений.
Сегодня мы научимся создавать галерею изображений, с помощью библиотеки jQuery, а точнее одну из галерей. Библиотека jQuery просто огромна и содержит в себе великое множество скриптов JavaScript с различными эффектами и множество разных галерей изображений.
Живой пример работы галереи изображений (скрипт gallery.js) Вы видите ниже. Здесь содержится 10 различных фотографий, но фотографий можно сделать любое количество, это на Ваше усмотрение. Я использовал фотографии своего родного города Смоленска.
