конфликт JavaScript

ufaclub · 9 Июл 2009

при внедрении JavaScript jQuery
почему то блокируются Lightbox и Mootools.
пример внедрения кода в модуль

PHP:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body {
	padding: 50px 0 0 50px;
}
div.sc_menu {
	position: relative;
	height: 145px;
	width: 500px;
	overflow: auto;
}
ul.sc_menu {
	display: block;
	height: 110px;
	width: 1500px;	
	padding: 15px 0 0 15px; 
	margin: 0;
	background: url('navigation.png');		
	list-style: none;
}
.sc_menu li {
	display: block;
	float: left;	
	padding: 0 4px;
}
.sc_menu a {
	display: block;
	text-decoration: none;
}
.sc_menu span {
	display: none;
	margin-top: 3px;
	text-align: center;
	font-size: 12px;	
	color: #fff;
}
.sc_menu a:hover span {
	display: block;
}
.sc_menu img {
	border: 3px #fff solid;	
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.sc_menu a:hover img {
	filter:alpha(opacity=50);	
	opacity: 0.5;
}
#back {
	display: block;
	width: 500px;
	text-align: center;
	color: #003469;
	font-size: 16px;
}
</style>
<script type= "text/javascript">
$(function(){
	//Get our elements for faster access and set overlay width
	var div = $('div.sc_menu'),
		ul = $('ul.sc_menu'),
		ulPadding = 15;
	//Get menu width
	var divWidth = div.width();
	//Remove scrollbars	
	div.css({overflow: 'hidden'});
	//Find last image container
	var lastLi = ul.find('li:last-child');
	//When user move mouse over menu
	div.mousemove(function(e){
		//As images are loaded ul width increases,
		//so we recalculate it each time
		var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;	
		var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
		div.scrollLeft(left);
	});
});
</script>
</head>
<body>
<div class="sc_menu">
	<ul class="sc_menu">
	    <li><a href="#"><img src="img/1.jpg" alt="Menu"/><span>Menu</span></a></li>
	    <li><a href="#"><img src="img/2.jpg" alt="Navigation"/><span>Navigation</span></a></li>
	    <li><a href="#"><img src="img/3.jpg" alt="Javascript"/><span>jQuery</span></a></li>
	    <li><a href="#"><img src="img/4.jpg" alt="CSS"/><span>Scroll</span></a></li>
	    <li><a href="#"><img src="img/5.jpg" alt="Horizontal"/><span>Horizontal</span></a></li>
	    <li><a href="#"><img src="img/6.jpg" alt="jQuery"/><span>jQuery</span></a></li>
	    <li><a href="#"><img src="img/1.jpg" alt="Menu"/><span>Menu</span></a></li>
	    <li><a href="#"><img src="img/2.jpg" alt="Navigation"/><span>Navigation</span></a></li>
	    <li><a href="#"><img src="img/3.jpg" alt="Graceful"/><span>Graceful</span></a></li>
	    <li><a href="#"><img src="img/4.jpg" alt="Degradation"/><span>Degradation</span></a></li>
	    <li><a href="#"><img src="img/5.jpg" alt="Progressive"/><span>Progressive</span></a></li>
	    <li><a href="#"><img src="img/6.jpg" alt="Enhancement"/><span>Enhancement</span></a></li>	
	</ul>
</div>
</body>

модуль работает а вот остальные элементы сайта использующии библиотеки Lightbox и Mootools - НЕТ.
Можно ли как нить изолировать этот модуль?

чтоб не влиял на весь сайт

polyetilen · 9 Июл 2009

если на сайте используются другие библиотеки тогда jquery можно запустить без конфликтов с другими js библиотеками

HTML:

 <html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict();
     
     // используем jquery через jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });
//или с $, чтоб код не менять
jQuery(document).ready(function($){
$("div").hide();
});


     
     // другие библиотеки с $(...), и т. д..
     $('someid').hide();
   </script>
 </head>
 <body></body>
 </html>

подробнее

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

ufaclub · 9 Июл 2009

polyetilen · 9 Июл 2009

да тут целый симбиоз библиотек
ja_script.js - prototype
ja.moomenu.js - mootools
jquery.min.js - jquery

так надо чтоб заработал jquery скрипт? этот:

Код:

<script type= "text/javascript">
$(function(){
    //Get our elements for faster access and set overlay width
    var div = $('div.sc_menu'),
        ul = $('ul.sc_menu'),
        ulPadding = 15;
    //Get menu width
    var divWidth = div.width();
    //Remove scrollbars    
    div.css({overflow: 'hidden'});
    //Find last image container
    var lastLi = ul.find('li:last-child');
    //When user move mouse over menu
    div.mousemove(function(e){
        //As images are loaded ul width increases,
        //so we recalculate it each time
        var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;    
        var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
        div.scrollLeft(left);
    });
});
</script>

тогда попробуй заменить этот кусок кода на:

Код:

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){

    $(function(){
        //Get our elements for faster access and set overlay width
        var div = $('div.sc_menu'),
            ul = $('ul.sc_menu'),
            ulPadding = 15;
        
        //Get menu width
        var divWidth = div.width();
    
        //Remove scrollbars    
        div.css({overflow: 'hidden'});
        
        //Find last image container
        var lastLi = ul.find('li:last-child');
        
        //When user move mouse over menu
        div.mousemove(function(e){
            //As images are loaded ul width increases,
            //so we recalculate it each time
            var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;    
            var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
            div.scrollLeft(left);
        });
    });

});
</script>

ufaclub · 9 Июл 2009

уже лутше

конфликта нет
но не крутит картинки он после этого изменения (

вот такая фигня должна быть

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

polyetilen · 9 Июл 2009

попробуй ещё раз заменить, там ошибки были исправил

ufaclub · 9 Июл 2009

ааааа

polyetilen написал(а):
попробуй ещё раз заменить, там ошибки были исправил

спасиб чувак ) все заработало :yahoo:

ufaclub · 27 Июл 2009

+ движения

а как сделать так чтоб двигаться они начали сами (прокрутка)
например с лева на право

Firstlinehero · 16 Мар 2010

Помогите пожалуйста и мне тоже! Третий день бьюсь но не могу внятного ничего найти в сети по этом поводу.
Шаблон юзает библиотеку
mootools-1.2.1-core-nc.js

в virtuemart ( если эта библиотека включена в шаблоне ) не работает лайтбокс
при этом если отключу ее в шаблоне, он перестанет адекватно отображаться...
я так понимаю что лайтбокс это jQUERY и тоже конфликтуют они.. как же решить эту проблему?

polyetilen · 16 Мар 2010

может там не lightbox а slimbox - клон lightbox только для mootools, наверное там скрипты не загружаются, по ссылке видел проблему решили добавлением скриптов в шаблон напрямую

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

конфликт JavaScript

ufaclub

Полезный

polyetilen

Заблокирован

ufaclub

Полезный

polyetilen

Заблокирован

ufaclub

Полезный

polyetilen

Заблокирован

ufaclub

Полезный

ufaclub

Полезный

Firstlinehero

Постоялец

polyetilen

Заблокирован