Использование fancybox. FancyBox для WordPress: настройки и функции
Как вы уже знаете, одним из главных качеств библиотеки jQuery является очень удобный поиск элементов и возможность дальнейших манипуляций с ними. Так вот, список этих манипуляций можно расширять, организуя новые методы для объекта jQuery . Вынесенные в отдельный файл, такие расширения образуют плагины для библиотеки jQuery.
Далее, описывая правила создания собственных плагинов мы будем реализовывать отдельный полноценный плагин в качестве примера. Его функциональность будет состоять в добавлении нового поведения для выбранных элементов — изменение цвета при наведении курсора. Назовем плагин responsiveBlock (отзывчивый блочный элемент).
Создание файла с плагином и его подключение
Обычно, javascript-плагины располагаются в отдельных файлах. Для файлов с плагинами jQuery существует соглашение касательно их названия — оно должно удовлетворять формату jquery.plaginName.js . Таким образом, файл с нашим плагином нужно будет назвать jquery.responsiveBlock.js .
Чтобы наш плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery, а затем js-файл с нашим плагином плагина:
~lt~script src="jquery.min.js"~gt~~lt~/script~gt~ ~lt~script src="jquery.responsiveBlock.js"~gt~~lt~/script~gt~
Основа для плагина
Переменная this , в теле метода, всегда содержит текущий объект jQuery (тот, на котором и был вызван метод). Для того, чтобы обойти все выбранные элементы по отдельности, используем метод .each() . А для возможности продолжить цепочку методов наш метод должен будет возвратить текущий объект jQuery:
(function ($) { jQuery.fn .responsiveBlock = function () { var make = function () { } ; } ) (jQuery) ;
Добавление свойств плагину
В большинстве плагинов требуется наличие настроек. В нашем плагине например, будет очень полезна возможность указывать цвет элемента пока на него не наведен курсор и цвет после наведения. Существует один простой вариант организации настроек у плагина jQuery. Он позволят задавать список свойств, а так же их значения по умолчанию. Свои значения этих свойств, при этом, можно будет задавать в момент установки плагина на элемент, в первом параметре:
(function ($) { jQuery.fn .responsiveBlock = function (options) { // Зададим список свойств и укажем для них значения по умолчанию. // Если при вызове метода будут указаны пользовательские // варианты некоторых из них, то они автоматически перепишут // соответствующие значения по умолчанию options = $.extend ({ defColor: "white" , hoverColor: "red" } , options} ; var make = function () { // реализация работы метода с отдельным элементом страницы } ; return this .each (make) ; // в итоге, метод responsiveBlock вернет текущий объект jQuery обратно } ; } ) (jQuery) ; // теперь можно задавать плагин с настройками по умолчанию: $("div:first" ) .responsiveBlock () ; // или указать свои значения некоторых или всех настроек $("div:last" ) .responsiveBlock ({ defColor: "#bbbbbb" } ) ; $("ul" ) .responsiveBlock ({ defColor: "#aaaaaa" , hoverColor: "green" } ) ;
(Для лучшего понимания данного примера стоит ознакомиться с назначением функции $.extend).
Полученная выше заготовка, является наиболее распространенным вариантом шаблона для плагинов jQuery. Поэтому если вы решили написать свой плагин, то можете смело начинать именно с нее (естественно со своим именем плагина и своим списком настроек).
Дальнейшая реализация
~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~ ~lt~style~gt~ div{padding:10px; margin:5px; border:3px solid red} ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div~gt~Блок на странице~lt~/div~gt~ ~lt~script~gt~ (function($){ jQuery.fn.responsiveBlock = function(options){ options = $.extend({ defColor:"white", //цвет элемента над которым нет курсора hoverColor:"red" //цвет элемента на который наведен курсор }, options); var make = function(){ // здесь переменная this будет содержать отдельный // DOM-элемент, к которому и нужно будет применить // воздействия плагина $(this).css("background-color",options.defColor) .mouseenter(function(){ $(this).css("background-color",options.hoverColor); }) .mouseleave(function(){ $(this).css("background-color",options.defColor); }); }; return this.each(make); }; })(jQuery); $("div").responsiveBlock(); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~
Генерация событий
Библиотека jQuery позволяет организовывать собственные события на элементах, и в дальнейшем устанавливать их обработчики (как на события onClick или onMousemove). Чтобы генерировать собственные события на выбранных элементах необходимо воспользоваться методом .trigger() , а устанавливать их обработчики можно с помощью .on() . Таким образом, плагины могут предоставлять не только новую функциональность но и связанную с ней систему событий, которой сможет воспользоваться любой пользователь вашего плагина.
Чтобы имена событий вашего плагина не пересекались с чужими именами событий, используйте пространства имен . Для этого удобнее всего использовать имя самого плагина.
В нашем плагине можно организовать событие stateChange , которое будет происходить при смене состояния элемента (наведен курсор или нет):
(function ($) { jQuery.fn .responsiveBlock = function (options) { options = $.extend ({ defColor: "white" , //цвет элемента над которым нет курсора hoverColor: "red" //цвет элемента на который наведен курсор } , options) ; var make = function () { // здесь переменная this будет содержать отдельный // DOM-элемент, к которому и нужно будет применить // воздействия плагина $(this ) .css ("background-color" , options.defColor ) .mouseenter ( function () { $(this ) .css ("background-color" , options.hoverColor ) .trigger ("responsiveBlock.stateChange" ) ; //-вызов события } ) .mouseleave ( function () { $(this ) .css ("background-color" , options.defColor ) .trigger ("responsiveBlock.stateChange" ) ; //-вызов события } ) ; } ; return this .each (make) ; } ; } ) (jQuery) ; // теперь к элементам страницы можно будет привязывать обработчики события stateChange: $("div" ) .on ("responsiveBlock.stateChange" , handler) ;
Недавно, в процессе создания лендинга, столкнулся с проблемой - нужно было разместить «аккордион». Это даже не плагин, а просто набор функций jQuery. Постепенно код усложнялся и в какой-то момент я понял, что нужно его оформить отдельным плагином. Это упрощает его поддержку и можно дорабатывать по необходимости.
Я никогда не писал jQuery-плагины, поэтому пришлось немного погуглить и найти примеры и туториалы. По какой-то неведомой причине, практически все руководства содержат невероятное количество лишней информации, где уже на 2-минуте прочтения возникает путаница, поскольку подразумевают, что читающий прекрасно разбирается и в js, и тонкостях jQuery, что в корне неверно. :)
Поэтому я решил написать своё руководство, рассчитанное на неподготовленного читателя.
Начнём с постановки задачи. Пусть у нас есть некий jQuery-код, который нужно оформить в виде плагина. Не будем усложнять задачу, возьмём что-то совсем простое, например преключение класса элемента по клику (назовём это «первоначальным кодом»).
JS-код: $(".click").click(function(){ $(this).toggleClass("t-red") }); HTML-код:
К классу.click мы цепляем обработчик «click», который меняет его css-класс на t-red . Метод toggleClass включает/выключает класс по каждому клику.
После преобразования этого кода в плагин, вызывать его можно будет так:
$(".click").myClick();
Это уже типовой вызов jQuery-плагина. Его желательно будет снабдить опциями, чтобы можно было бы задавать произвольный css-класс. Пусть это будет параметр to:
$(".click").myClick({ to: "t-green" });
Ну и, кроме этого, было бы здорово задавать css-класс в html-атрибуте data- , что позволит указывать его прямо в html-разметке:
Почти все jQuery-плагины сейчас строятся по единому шаблону-каркасу. Для сложных плагинов этот каркас дорабатывается для подключения методов и прочих «фишек», но в нашем случае всё очень просто - у нас одна основная функция.
(function($) { // функция вызова jQuery-плагина $.fn.myClick = function(options) { // опции var config = $.extend({}, { op1: "", op2: "" }, options); function main(e) { // это основная функция } this.each(function() { main($(this)); }); return this; }; })(jQuery);
Строчка $.fn.myClick задаёт то, как будет вызываться плагин извне (myClick). Желательно использовать такое имя, чтобы оно не конфликтовало с другими плагинами.
Опции задаются таким образом, чтобы в случае их отсутствия, им присвоилось какое-то значение по умолчанию.
Функция main() собственно и выполняет основную работу плагина. При вызове плагина, она автоматически будет выполнена в строчке this.each(function() { main($(this)); }); . Если вы решите поменять её имя, то не забудьте внести изменения и в этом коде.
Теперь рассмотрим main() . Её парамер e не что иное, как используемый элемент. Наш исходный код переместится в эту функцию в таком виде:
Function main(e) { e.click(function(){ $(this).toggleClass("t-red") }); }
Этот тот же самый «первоначальный» код, только мы использовали переменную e вместо $(".click") .
Теперь добавим опции. Тут всё очень просто:
Var config = $.extend({}, { to: "t-red" }, options);
У нас одна опция. Получить её в функции main() можно так: config.to . В данном случае переменная config содержит все опции, а config.to конкретно выбранную. CSS-класс по умолчанию вы можете задать произвольно. Функция main() теперь будет такой:
Function main(e) { e.click(function(){ $(this).toggleClass(config.to) }); }
Теперь можно задавать опции при вызове плагина, но нам нужно еще добавить возможность их менять/задавать через data-атрибуты. Мы будем использовать штатную возможность jQuery - функцию data() . Она возвращает значение указанного атрибута (без префикса «data-»).
Function main(e) { var to = e.data("to"); if (!to) { to = config.to } e.click(function(){ $(this).toggleClass(to) }); }
Вначале мы получаем data-атрибут «to» в одноименную переменную. Проверяем: если атрибута нет (он не задан), то переменной присваиваем значение из опции.
Получился вот такой плагин:
(function($) { $.fn.myClick = function(options) { var config = $.extend({}, { to: "t-red" }, options); function main(e) { var to = e.data("to"); if (!to) { to = config.to } e.click(function(){ $(this).toggleClass(to) }); } this.each(function() { main($(this)); }); return this; }; })(jQuery);
Подобные простые плагины удобно использовать там, где нужно менять параметры для нескольких блоков на странице.
1. Реализация портфолио с использованием jQuery галереи
Миниатюры проектов прокручиваются при изменении положения курсора мыши в левой колонке. В области содержимого отображается увеличенное изображение с названием проектов, описанием и списком используемых технологий. При переходе между миниатюрами информация о проектах сменяет друг друга с потрясающим анимированным эффектом. При нажатии на изображение на странице с описанием, оно увеличивается также с использованием jQuery анимации. Еще хочется отметить потрясающий элегантный внешний вид всей страницы портфолио. Смотрите демо.
2. Супер реализация сайта-портфолио с использованием CSS и jQuery
Превосходная реализация сайта-портфолио фотографа. При нажатии на пункт меню из разбросанных по экрану квадратов собирается область с контентом фиксированной высоты и ширины. Для того, чтобы поместить больше информации в фиксированную область, предусмотрена прокрутка содержимого. Необычно реализована реализация показа работ из портфолио: при клике по миниатюре фотография отображается в виде фонового изображения, которое автоматически масштабируется при изменении размера окна браузера.
3. Стена-портфолио на jQuery
Оригинальное решение для создания онлайн-портфолио. Блоки проектов (миниатюры и краткое описание со ссылкой) отображаются по несколько в ряд, при изменении окна браузера блоки перераспределяются равномерно на странице с анимированным эффектом. У каждого проекта может быть несколько изображений-миниатюр, переход между которыми осуществляется с помощью стрелочек. При нажатии на ссылку открывается страница с полным описанием, на которой текст помещен на полупрозрачном блоке фиксированной высоты с прокруткой. В качестве фона страницы используется масштабируемое изображение проекта. Выглядит прикольно - смотрите демонстрацию.
4. Плавная jQuery прокрутка страниц
Реализация вертикальной и горизонтальной прокрутки.
5. Плагин jQuery «Draggable Image Boxes Grid»
Перетаскиваемая сетка, состоящая из блоков с содержимым и изображений. Сетку можно перетаскивать с помощью мышки (нажать любую кнопку мыши и тянуть в нужную сторону). При клике на миниатюру основное изображение разворачивается на всю ширину экрана. При клике темный блок с текстом, раскрывается область с более подробным описанием.
6. Одностраничный сайт портфолио
Одностраничный сайт с анимированной сменой содержимого. На демонстрационной странице пройдитесь по вкладкам меню, чтобы увидеть эффект.
7. Переключение вида отображения блоков на jQuery
С помощью этого jQuery плагина «Switch Display Options» можно реализовать переключатель на странице, с помощью которого посетитель будет переходить от табличного отображения информации к полному просмотру с описанием блоков. Отлично подойдет для реализации портфолио.
8. Шаблон для сайта ресторана с jQuery галереей и картой от Google
Оригинальное jQuery решение, созданное для сайта кафе. В шаблоне реализована интересная jQuery галерея для показа блюд из меню. Изображения в галерее масштабируются в зависимости от размера окна браузера. Сперва, в галерее отображаются уменьшенные изображения с названием и кратким описанием блюд, при этом полноразмерная фотография отображается затемненной на заднем фоне. Навигация между доступными фотографиями осуществляется с помощью стрелок или колеса мыши. Щелчок мыши в режиме галереи уберет миниатюры с описанием и даст возможность рассмотреть оригинальные большие изображения, растянутые на всю ширину окна. Для возврата в меню сайта из галереи необходимо нажать на ссылку в правом верхнем углу. Помимо шикарной jQuery галереи в шаблон очень эффектно интегрирована карта от Google.
9. Плагин Plasm The Wall
Для создания своеобразных «стен» из фотографий или HTML блоков, которые при помощи мышки можно перетаскивать по экрану в пределах фиксированной области.
10. Плагин для отображения элементов по окружности
Отображение на странице различных элементов по окружности заданного диаметра.
11. Страница-заглушка «Сайт в разработке»
На странице реализована возможность отправить е-мейл адрес, который записывается в базу данных и на который можно будет выслать уведомление об открытии сайта. Также страница украшена небольшим слайд-шоу, реализованном на базе jQuery плагина Nivo Slider v. 2.3 .
12. Плагин QuickFlip 2
С его помощью вы сможете сделать интересный эффект поворачивающейся визитной карточки при нажатии на ссылку.
13. JQuery карта кликов
Идея заключается в отслеживании кликов пользователей. Для того чтобы посмотреть плагин в работе на демонстрационной странице, покликайте мышкой, а затем нажмите кнопку «Анализ». И на полупрозрачном фоне отобразятся точки, где вы кликали мышью.
Реализация симпатичной экранной клавиатуры. Мало ли, для чего-то вам пригодится.
15. Записки jQuery
Реализация листков с записками. Текст можно редактировать, а сами записки удалять или перемещать по экрану. Чтобы посмотреть пример, перейдите на демонстрационной странице на вкладку «Demo».
16. Рейтинг на jQuery
17. HoverAttribute
Интересное оформление ссылок: при наведении на ссылку изменяется ее анкор. Смотрится прикольно.
18. jQuery Fancy капча для формы регистрации
Реализация капчи для формы регистрации. Плагин представляет собой набор цифр, которые необходимо путем перетаскивания выставить в порядке возрастания. Довольно интересный способ для подтверждения того, что регистрацию проходит живой человек, а не робот.
Внизу экрана отображаются кнопки, которые можно использовать для плавной прокрутки страницы вверх или вниз.
20. Переводчик. jQuery плагин «jTextTranslate»
Плагин использует Google Language API и может переводить текст на любые языки, предоставляемые Google. Для перевода необходимо нажать на значок рядом с абзацем и из выпадающего списка выбрать язык, на который необходимо перевести.
21. jQuery плагин для постраничной навигации
Отличная реализация прокручивающихся ссылок для постраничной навигации. Реализовано с использовании jQuery.
22. jQuery плагин «Заметки»
Этот jQuery плагин позволит реализовать «бумажные» заметки на вашем сайте.
23. jQuery плагин «Catch404»
24. jQuery плагин jBreadCrumb
Плагин для создания анимированной цепочки навигации «Хлебные крошки»
25. Плагин «Reel»
26. jQuery плагин «Dance Floor»
jQuery плагин для реализации страницы с товарами. При нажатии на изображение товара появляется его описание.
27. jQuery плагин «3D облако меток»
28. Объемные CSS кнопки
29. Анимированная горизонтальная прокрутка страницы
jQuery эффект вертикальной прокруткой страницы. Отлично подойдет для реализации одностраничных сайтов и сайтов-портфолио. Для просмотра эффекта нажмите на пункт меню на демонстрационной страницы.
30. jQuery плагин «Rating System»
jQuery эффект для реализации оценки чего-либо. Цвет кружков и текст под ними изменяется в зависимости от того, на какой из них наведен курсор мыши.
31. jQuery Panel Magic
Плагин, реализующий навигацию по сайту. При этом ваш сайт представлен в качестве сетки документов, между которыми осуществляется переход с интересным jQuery эффектом.
Вы можете легко использовать этот плагин для создания небольших сайтов и веб-приложений. Так же он не плохо будет смотреться на сайтах-портфолио.
32. Индикатор загрузки на Mootools, плагин «MoogressBar»
Эффектный индикатор загрузки.
33. Mootools плагин «CwComplete»
При заполнении поля, плагин подскажет возможные варианты для заполнения с использованием Ajax, при этом он отфильтрует и покажет только те варианты, которые удовлетворяют уже введенному в поле тексту.
34. Отличный ajax-чат с применением jQuery и CSS3
Перед тем как начать общение посетитель должен ввести свой ник и e-mail. В правой колонке показано, сколько человек авторизованы в чате. Используемые технологии: PHP, MySQL, jQuery, CSS.
35. Реализация страницы «Предложить по проекту»
Посетители могут добавить новое предложение либо проголосовать за уже существующее. Отличное решение для тех, кто хочет узнать мнение своей аудитории о сайте. Также эту страницу можно использовать чтобы накопить новые идеи для дальнейшего развития вашего проекта. Используемые технологии: PHP, MySQL, jQuery, CSS
36. Реализация голосования/опроса с помощью PHP и jQuery
37. Голосование на Ajax «TinyEditor»
Аккуратная реализация опросов на сайте. Используемые технологии: JQuery, Ajax, PHP и MySQL.
Очень интересное решение для реализации голосования на сайте. Перетаскивая вверх и вниз блоки, схватив мышкой за изображения, можно расположить их на странице в любой последовательности. Чем выше вы оставите блок, тем лучше его оценили и, соответственно, если блок разместить в самом низу, значит, он меньше всего вам понравился. После того, как вы расставите блоки в нужной последовательности, необходимо нажать на кнопку «Submit poll», чтобы голос был учтен. На странице с результатами отображаются результаты голосования и количество проголосовавших посетителей. Используемые технологии: CSS, PHP, MySQL, jQuery.
Простая система комментирования на Ajax с проверкой правильности ввода информации. Комментарии хранятся в базе данных. Реализовано с использованием: PHP, MySQL, CSS, jQuery.
40. Счетчик количества скачиваний файла
41. Заметки на странице с использованием PHP
Использованные технологии: PHP, jQuery, CSS.
При переходе по пунктам меню содержимое подгружается без перезагрузки страницы. Используемые технологии: PHP, jQuery, CSS.
43. jQuery поиск по сайту с использованием технологии от Google
Реализация поиска по сайту с использованием API Google AJAX Search . Вы сможете предоставить возможность посетителю произвести поиск как на вашем сайте, так и в интернете. При этом поиск можно осуществлять не только по страницам сайта, но и по изображениям и мультимедийным файлам.
44. jQuery эффект наложения описания на изображение
Очень интересный эффект, может быть использован в реализации портфолио. При нажатии на изображение оно затемняется полупрозрачным фоном, и появляется надпись с описанием того, на что следует обратить внимание.
45. Реализация страницы «Вопрос-ответ» с помощью jQuery
jQuery реализация страницы FAQ на сайте. Вверху страницы отображается список вопросов. При нажатии на вопрос страница плавно прокручивается к выбранному вами, и активный вопрос с ответом на него подсвечивается другим цветом. Так же в поле активного ответа появляется ссылка для возврата к списку вопросов.
46. Сайт на Ajax. Содержимое подгружается без перезагрузки страницы
47. Смена цвета фона и текста с помощью jQuery
Цвет изменяется при наведении курсора мыши. Можно сделать так, чтобы цвет изменялся случайным образом.
48. Путеводитель по сайту с использованием jQuery
С помощью этого интересного плагина можно познакомить посетителя с основными функциями вашего сайта, если он попал на него впервые. При загрузке страницы в верхнем правом углу выезжает блок с предложением провести экскурсию по сайту. Если посетитель впервые зашел на ваш сайт, он может с помощью небольшого путеводителя познакомиться с основными функциями. При этом страница затемняется и необходимые блоки на каждом шаге помечаются пометкой. Если же посетитель уже был ранее на вашем сайте, он просто может закрыть окно с предложением экскурсии по сайту.
49. Виртуальный тур по сайту «Joyride Kit»
С помощью этого плагина можно познакомить посетителя с основными функционалом страницы. Делается это в виде последовательного всплывающего описания элементов. Посетитель может посмотреть все подсказки, нажимая на кнопку Next, либо закрыть онлайн-тур (если он уже не первый раз попадает на эту страницу) воспользовавшись крестиком.