Press WordPress Блог

JQuery и сторонние библиотеки.
Часто приходится искать методы реализации текущих задач за счет решений сторонних разработчиков. Одной из наиболее популярной не коммерческой библиотека на сегодняшний день является JQuery. Особенно делает ее популярной наличие массы бесплатных плагинов, которые позволяют сделать ваш сайт или блог более удобным для пользователей. Но, если вы попутно используете другие библиотеки, такие как mootools, prototype, YUI и подобные, то вполне вероятно, что возникнут проблемы в вызове пересекающихся методов. Как, для примера, символ $ совместно используется как и в Prototype, так и в JQuery, и из-за незнания методов решения данной сложности, часто начинающие разработчики отказываются от готовых решений.
По данной тематике написано много, и столкнувшись с поиском оптимального решения, пришлось хорошо «посерфить» ресурсы, в поиске доходчивого объяснения.

В данном примере мы рассмотрим взаимодействие таких библиотек, как Prototype и JQuery (хотя рассматриваемый пример позволит в дальнейшем использовать JQuery c практически любыми библиотеками).

И так. Пожалуй, самой распространенной задачей является создание галлереи. Реализованная на jquery галлерея позволит просматривать изображения без перезагрузки страницы, оставляя во внимании превью картинки, но позволяя просматривать основные изображения в “полный рост”.
Задача. Есть некий проект. Есть уже реализованная функциональная часть на Prototype и Scriptaculous. И есть новый функционал, который реализован на JQuery. Можно при желании найти требуемую реализацию решения задачи и на текущих библиотеках, но суть в том, чтобы связать две несвязанные библиотеки. Данный пример заключается в том, чтобы привязать плагин JQuery LightBox2.
Для этого надо прописать следующее.
После вызова в хеаде всех существующих на данный момент библиотек, мы дописываем
//вызов jquery
<script src="/js/jquerylightbox/jquery.min.js" language="JavaScript" type="text/javascript">
//вызов функций lightbox
<script src="/js/jquerylightbox/lightbox.js" language="JavaScript" type="text/javascript">
//стили для lightbox
<link href="{$HOST}/skins/{$XCSKIN}/lightbox.css" rel="stylesheet" type="text/css" media="screen" />


И прописали для ссылки-вызова действия lighbox2
class = ”lightbox“
(в нашем примере).

По синтаксису вроде все верно. И должно работать. Но при обновлении страницы – выдает ошибку, ссылаясь на методы Prototype.
Решение есть, необходимо просто прописать следующее
<script language="javascript" type="text/javascript">
var $tempvar = jQuery.noConflict(); //методы JQuery передаем переменной $tempvar
//и далее просто пишем следующее
$tempvar(function()
{$tempvar("#divname a").lightBox({fixedNavigation:true}); }
);
< /script>

Другими словами, мы передаем обработчик $ (который использует Prototype) другой переменной.
При обновлении страницы ошибка не повторяется. И все работает корректно.
К слову, данный обработчик позволит обойти использование JQuery и с другими библиотеками.

Как это может быть полезно в отношении WordPress, если есть масса готовых модулей для реализации, скажем, галерей или простого вывода картинок? Данный материал может пригодиться не только тем, кто занимается разработкой модулей, требующих полной независимости от уже предустановленных готовых решений и узконаправленного решения задач на блогах, но и тем, кто начинает, или уже программирует на PHP, используя подобные моменты в других проектах.
За более подробной информацией стоит обратиться сюда: примеры jquery, jquery документация и jquery галерея - один из методов реализации галереи на JQuery.