Конфликт JQuery

Newbie257 · October 7, 2012

Хочу использовать одновременно на одной странице слайдер и fancybox-фотогалерею.

При использовании их по отдельности конфликтов не наблюдается всё работает хорошо.

Слайдер такой http://mashinki.net.ua/tester/test1/

и Фотогалерея http://mashinki.net.ua/tester/test2/

комбинирую их на одну страницу http://mashinki.net.ua/tester/testall/

фотогалерея не работает

Подскажите, пожалуйста, как подправить код, чтобы всё заработало.

Искал при помощи поиска на форуме похожие вопросы и в гугле. Там в случаях конфликтных ситуаций библиотек советуют заминить все $ на jQuery и еще в определенном месте написать jQuery.noConflict();

и возможно ещё где-то прописать jQuery(document).ready(function() { }

Но где всё это в какой последовательности писать не знаю (т.к.у меня несколько яваскрипт-файлов)

Помогите, пожалуйста

hedgehog · October 7, 2012

Хочу использовать одновременно на одной странице слайдер и fancybox-фотогалерею.
При использовании их по отдельности конфликтов не наблюдается всё работает хорошо.
Слайдер такой http://mashinki.net.ua/tester/test1/
и Фотогалерея http://mashinki.net.ua/tester/test2/
комбинирую их на одну страницу http://mashinki.net.ua/tester/testall/
фотогалерея не работает
Подскажите, пожалуйста, как подправить код, чтобы всё заработало.
Искал при помощи поиска на форуме похожие вопросы и в гугле. Там в случаях конфликтных ситуаций библиотек советуют заминить все $ на jQuery и еще в определенном месте написать jQuery.noConflict();
и возможно ещё где-то прописать jQuery(document).ready(function() { }
Но где всё это в какой последовательности писать не знаю (т.к.у меня несколько яваскрипт-файлов)
Помогите, пожалуйста

(function($){
  // Тут можно использовать $ сколько угодно
}(jQuery))

Newbie257 · October 7, 2012

(function($){
  // Тут можно использовать $ сколько угодно
}(jQuery))

А как это мне применить?

т.е. куда подставить

т.е. у меня в моём файле http://mashinki.net.ua/tester/testall/

за слайдер отвечает маленький кусок кода:

 <script type="text/javascript" src="js_e4ea3828e68753f0bdcea8992a2f792c.js" "></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, { "basePath": "/", "custom_search": { "form_target": "_self", "solr": 0 } });
//--><!]]>
</script>

а фотогалерея-fancybox за неё отвечают несколько файлов, ссылка на которые между тегами <head> </head>

там за неё отвечают несколько файлов.js:

<!-- Add jQuery library -->
	<script type="text/javascript" src="fb_files/lib/jquery-1.8.2.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fb_files/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="fb_files/source/jquery.fancybox.js?v=2.1.1"></script>


<!-- Add Button helper (this is optional) -->

<script type="text/javascript" src="fb_files/source/helpers/jquery.fancybox-buttons.js?v=1.0.4"></script>

<!-- Add Thumbnail helper (this is optional) -->

<script type="text/javascript" src="fb_files/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="fb_files/source/helpers/jquery.fancybox-media.js?v=1.0.4"></script>
<script type="text/javascript" src="fb_files/myscript.js">


</script>

в первой строчке подключается библиотека , а остальные шесть файлов - непосредственно фотогалерея

как их редактировать не понимаю. все или какой-то один

и как именно редактировать

и в каком месте писать jQuery.noConflict(); ?

Помогите с логикой, что куда писать

Edited October 9, 2012 by Newbie257

Newbie257 · October 9, 2012

Во всех файлах, связанных с funcybox заменил $ на JQuery. И написал в html-коде:

все равно ничего не поменялось

подключал js.файлы галереи и до и после слайдера не помогает

Edited October 9, 2012 by Newbie257

Newbie257 · October 9, 2012

Па Ма ГИ те )

Edited October 9, 2012 by Newbie257

nerv · October 9, 2012

Подскажите, пожалуйста, как подправить код, чтобы всё заработало.

посмотреть в отладчике в чем проблема и исправить ее

Edited October 9, 2012 by nerv

Newbie257 · October 9, 2012

в отладчике ошибок вроде бы не видно

Great Rash · October 10, 2012

Firebug - отстой и Firefox тоже...

Uncaught TypeError: Object [object Object] has no method 'deorphanize'

...выдает консоль Хрома.

UPD: ошибка в этом скрипте

<script type="text/javascript" src="js_e4ea3828e68753f0bdcea8992a2f792c.js" "></script>

К слову: тут кавычка лишняя.

Newbie257 · October 10, 2012

UPD: ошибка в этом скрипте
<script type="text/javascript" src="js_e4ea3828e68753f0bdcea8992a2f792c.js" "></script>

и как же мне его отладить?

там в этом скрипте, правда, вызывается ещё повторно JQ библиотека более старой версии(в самом начале скрипта)

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

Edited October 10, 2012 by Newbie257

Great Rash · October 10, 2012

Давайте действовать медленно, уныло и по порядку. Для начала расскажите почему скрипты у вас подключаются в <body> а не в <head>. Опять же, непонятно почему у вас все разбросано как попало. Скрипты надо подключать в одном месте, чтобы с ними было проще работать.

Перенесите все скрипты в <head>.

Newbie257 · October 10, 2012

ok. упорядочил.

все ссылки на скрипты перенес в <head>

Edited October 10, 2012 by Newbie257

Great Rash · October 10, 2012

Так, теперь до подключения всех скриптов подключайте jQuery, т.е. самым первым из подключаемых скриптов должен идти этот:

<script type="text/javascript" src="fb_files/lib/jquery-1.8.2.min.js"></script>

После него подключаете плагин fancybox и его производные (fancybox-buttons) и т.п. Предпоследним подключаете скрипт галлереи, вот этот (уберите оттуда лишнюю кавычку!):

<script type="text/javascript" src="js_e4ea3828e68753f0bdcea8992a2f792c.js" "></script>

Последним идет ваш скрипт, который:

<script type="text/javascript" src="fb_files/myscript.js"></script>

Внутри, заменяем вот эту строку:

$(document).ready(function() {

на эти:

jQuery.noConflict();
jQuery(document).ready(function($) {

По идее, все должно заработать.

Newbie257 · October 10, 2012

сделал всё по рекомендации

<!-- CSS галереи конец-->


		<!-- скрипты галереи --> 
		<!-- Add jQuery library -->
	<script type="text/javascript" src="fb_files/lib/jquery-1.8.2.min.js"></script>
	<!-- Add mousewheel plugin (this is optional) -->
	<script type="text/javascript" src="fb_files/lib/jquery.mousewheel-3.0.6.pack.js"></script>
	<!-- Add fancyBox main JS and CSS files -->
	<script type="text/javascript" src="fb_files/source/jquery.fancybox.js?v=2.1.1"></script>
	<!-- Add Button helper (this is optional) -->	
	<script type="text/javascript" src="fb_files/source/helpers/jquery.fancybox-buttons.js?v=1.0.4"></script>
	<!-- Add Thumbnail helper (this is optional) -->
	<script type="text/javascript" src="fb_files/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
	<!-- Add Media helper (this is optional) -->
	<script type="text/javascript" src="fb_files/source/helpers/jquery.fancybox-media.js?v=1.0.4"></script>

	<!-- скрипты галереи конец--> 


		<!-- скрипт слайдера --> 
 <script type="text/javascript" src="js_e4ea3828e68753f0bdcea8992a2f792c.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, { "basePath": "/", "custom_search": { "form_target": "_self", "solr": 0 } });
//--><!]]>
</script>
<!-- скрипт слайдера конец-->

    <script type="text/javascript" src="fb_files/myscript.js">
	</script>

и заменил первую строчку в файле myscript.js на

jQuery.noConflict();
jQuery(document).ready(function($) {

все равно не помогло

wwt · October 10, 2012

Начинаем смотреть исходники скриптов, и в js_e4ea3828e68753f0bdcea8992a2f792c.js сразу же видим что в данный файл уже встроен jQuery JavaScript Library v1.3.2, и того мы имеем 2 версии jQuery на одной странице.

ЗЫ попробуйте удалить её из этого файла и сделать все так как вам описали выше, теоретически слайдер должен работать с более новой версией библиотеки .

Edited October 10, 2012 by wwt

Great Rash · October 10, 2012

В js_e4ea3828e68753f0bdcea8992a2f792c.js отстутствует метод .deorphanize() - что он значит понятия не имею, но попробуйте закомментировать 1916 строку в этом файле.

И вообще, этот файл какой-то странный. Где вы его берете? Внутри видно что подключается обычный jcarousel, который можно взять с сайта разработчика без всяких извращений.

wwt · October 10, 2012

В js_e4ea3828e68753f0bdcea8992a2f792c.js отстутствует метод .deorphanize() - что он значит понятия не имею, но попробуйте закомментировать 1916 строку в этом файле.
И вообще, этот файл какой-то странный. Где вы его берете? Внутри видно что подключается обычный jcarousel, который можно взять с сайта разработчика без всяких извращений.

Там есть этот метод, 800 какаято строка. Проблемы явно изза несовместимости методов двух разных версий фреймворка.

вот он :


/*
* deorphanize - jQuery Plugin
* Works well only on headlines & short text lines.
* Usage example: $('h2').deorphanize();
*
* Has to be called on the element directly containing the text, cannot contain html elements.
* Will calculate average words per line and force <br /> on last line.
*
* Copyright (c) 2010 Quodis (http://quodis.com)
* Licensed under the MIT license
*
* $Date: 2010-07-14 (Wed, 14 Jul 2010) $
* $version: 0.1
*
*/
(function($){
$.fn.deorphanize = function() {
return this.each(function() {
var me = $(this);
// Height of the text container
var height = parseInt(me.height());
// Line height being used
var lineHeight = parseInt(me.css('line-height'));
// ... divided gives us the number of lines
var lines = height/lineHeight;
// Is there something to perfection here?
if (lines > 1) {
// Now let's know how many characters there are
var text = me.text();
var textLength = text.length;
// And get an average per line
var charsPerLine = (textLength/lines);
// Find the closest 'space' to where the last line should ideally break
var lastSpace = text.indexOf(' ', textLength-charsPerLine);
// And make it break right there!!
me.html(text.slice(0,lastSpace) + '<br />' + text.slice(lastSpace+1));
}
});
};
})(jQuery);;

Edited October 10, 2012 by wwt

Newbie257 · October 10, 2012

Начинаем смотреть исходники скриптов, и в js_e4ea3828e68753f0bdcea8992a2f792c.js сразу же видим что в данный файл уже встроен jQuery JavaScript Library v1.3.2, и того мы имеем 2 версии jQuery на одной странице.
ЗЫ попробуйте удалить её из этого файла и сделать все так как вам описали выше, теоретически слайдер должен работать с более новой версией библиотеки .

оставил всю последовательность подключения файлов как и рекомендовали выше

и убрал библиотеку 1.3.2 из файла js_e4ea3828e68753f0bdcea8992a2f792c.js,

т.е. всё до

/*
 * Sizzle CSS Selector Engine - v0.9.3

галерея стала работать как надо,

а вот слайдер не работает

Edited October 10, 2012 by Newbie257

Newbie257 · October 10, 2012

В js_e4ea3828e68753f0bdcea8992a2f792c.js отстутствует метод .deorphanize() - что он значит понятия не имею, но попробуйте закомментировать 1916 строку в этом файле.
И вообще, этот файл какой-то странный. Где вы его берете? Внутри видно что подключается обычный jcarousel, который можно взять с сайта разработчика без всяких извращений.

Вы наверное говорили про 1905 строку, т.к. 1916 там уже закоментирована

1905строка

$('#blog-container dt a, #primary-hd h1, #journal-entries .entry h2 a, #blog-container .s h3 a, #work-entries .entry h2 a, .related dt a').deorphanize()

не помогло удаление этой строки.

зашел на сайт разработчика, скачал jsor-jcarousel-7bb2e0.zip , но мне нужен именно слайдер с точечками под ним, т.е.такой как в моём примере, а как сделать из оригинального jsor-jcarousel-7bb2e0.zip такой как мне нужен я не представляю )

Edited October 10, 2012 by Newbie257

Great Rash · October 10, 2012

Да их миллион в сети. Возьмите этот например. Или вот.

Newbie257 · October 10, 2012

Да их миллион в сети. Возьмите этот например. Или вот.

по первой ссылке есть подходящий Banner with ThumbNails, через Сhrome посмотрел подходит такой,

а вот при заходе на этот сайт Firefox не отображает его.

Edited October 10, 2012 by Newbie257

Newbie257 · October 10, 2012

т.е. мне бы такой, чтобы можно было ещё и кое-какое описание добавить под картинкой и сбоку.

и желательно с кружочками под слайдером, чтобы можно было сразу прескакивать на нужный кадр без пролистывания

тот слайдер, что у меня сейчас на сайте подходит, но тоже конфликтует с fancybox

p.s.

со своим старым слайдером

после некоторых перестановок мест подключения .js файлов в принципе наладил одновременную работу слайдера и галереи-fancybox, но есть некоторые ньюансы, поэтому создам новую тему и уточню уже там )

Edited October 10, 2012 by Newbie257

Sign In

Конфликт JQuery

Question

Link to comment

Share on other sites

20 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information