Категории

Конфликты скриптов jquery или как заменить переменные!

Надеюсь эта тема будет полезна всем, кто захотел происпользовать на своем сайте несколько скриптов.
Я пользую версию 2.5.4 и шаблон silver. В процессе создания сайта вычищаю различные ошибки, остатки кодов и облегчаю некоторые части шаблона и модернизирую их под себя.
А началось мое изучение данной темы с того, что решил я установить себе lightbox2 (тот что открывает картинки POPUP). Установил (если кому интересно как - напишу отдельно) я себе этот lightbox, при этом вынес все остатки highslider, который должен был бы работать по умолчанию...но картинка предательски открывалась просто на новой вкладке. Начал смотреть ошибки и "курить" форум.
Для начала вычистил все вторичные запуски jquery и для упрощения работы и вынес их запуск в файл general.js.php. На какие файлы стоит обратить внимание (по моему опыту): header.php, product.php, box_goods_carousello.html, prod_listing.html.
Этот процесс упростил задачу, но не решил ее. Тогда начал отключать поочередно работающие скрипты. Как оказалось, сначала проблема возникла из-за карусели товаров. Отключение ее позволяло использовать lightbox. Вариант отказа от одного из скриптов не рассматривался.
Стал изучать документацию. Оказалось, что проблема конфликтов lightbox, а если быть точнее скрипта prototype.js, и jquery существует и причина ее в совместном использовании переменной $ обоими скриптами. Поэтому необходимо заменить для jquery данную переменную. Для этого необходимо происпользовать следующий код, который я разместил в general.js.php:

Данная часть кода вставляется после запуска jquery. Далее необходимо заменить все переменные для карусели товаров, которые расположены в файле box_goods_carousello.html:

Т.е. мы заменили просто $ на $j. Перезаписываем файлы и вуаля, каруселька закрутилась. Но дальше я столкнулся со следующей проблемой - перестал работать vtip скрипт - тот самый, который использовал NeBox (за что ему большое спасибо) в описании процесса по увеличению картинки при наведении курсора в списке категории (http://www.shopos.ru/forum/index.php?topic=4546.0).
Для решения этой проблемы пришлось также произвести замену переменных, но уже в файле vtip-min.js:

this.vtip=function(){this.xOffset=-10;this.yOffset=10;$j(".vtip").unbind().hover(function(a){this.t=this.title;this.title="";this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$j("body").append('<p id="vtip"><img id="vtipArrow" />'+this.t+"</p>");$j("p#vtip #vtipArrow").attr("src","images/vtip_arrow.png");$j("p#vtip").css("top",this.top+"px").css("left",this.left+"px").fadeIn("slow")},function(){this.title=this.t;$j("p#vtip").fadeOut("slow").remove()}).mousemove(function(a){this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$j("p#vtip").css("top",this.top+"px").css("left",this.left+"px")})};jQuery(document).ready(function(a){vtip()});

И опять-таки все заработало.

ИТОГ:
Не знаю насколько грамотно я решил данную проблему, т.к. не имею опыта программирования и не все процессы поддаются моему пониманию, но результат есть! Надеюсь мой опыт поможет "чайникам" как я решить подобные проблемы и сократит время поиска различных частей кода. Готового решения на форуме не нашел.

P.S. Возможно из-за этого конфликта у меня и не получилось запустить раздвижную корзину (или поиск, неважно). Буду дальше "копать"!

ну так lightbox работает на prototype. Конечно глюки были бы.
В данном случае нужно было выкинуть lightbox и найти скрипт работающий с jQuery, а не переделывать кучу работы.
Какая разница в чем картинки открывать? Главное, чтобы работало корректно везде. И все)

Возможно...на самом деле работы не очень много, просто мне пришлось разбираться и перелопачивать кучу файлов, т.к. не знал где искать и что искать...Но получил бесценный опыт...

Источник