Конфликт JQuery и JS

Тема в разделе "JavaScript", создана пользователем mulekula, 18 май 2010.

Модераторы: ZiX
  1. mulekula

    mulekula Постоялец

    Регистр.:
    6 дек 2008
    Сообщения:
    91
    Симпатии:
    2
    при Использовании JavaScript и jQuery
    почему то блокируются слайд шоу.

    Вот скрипт js
    PHP:
    var TINY={};

    function $(
    i){return document.getElementById(i)}
    function $$(
    e,p){p=p||document; return p.getElementsByTagName(e)}
     
    TINY.slideshow=function(n){
            
    this.infoSpeed=this.imgSpeed=this.speed=10;
            
    this.thumbOpacity=this.navHover=70;
            
    this.navOpacity=25;
            
    this.scrollSpeed=5;
            
    this.letterbox='#000';
            
    this.n=n;
            
    this.c=0;
            
    this.a=[]
    };
     
    TINY.slideshow.prototype={
            
    init:function(s,z,b,f,q){
                    
    s=$(s);
                    var 
    m=$$('li',s), i=0w=0;
                    
    this.l=m.length;
                    
    this.q=$(q);
                    
    this.f=$(z);
                    
    this.r=$(this.info);
                    
    this.o=parseInt(TINY.style.val(z,'width'));
                    if(
    this.thumbs){
                            var 
    u=$(this.left), r=$(this.right);
                            
    u.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",-1,'+this.scrollSpeed+')');
                            
    u.onmouseout=r.onmouseout=new Function('TINY.scroll.cl("'+this.thumbs+'")');
                            
    r.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",1,'+this.scrollSpeed+')');
                            
    this.p=$(this.thumbs)
                    }
                    for(
    i;i<this.l;i++){
                            
    this.a[i]={};
                            var 
    h=m[i], a=this.a[i];
                            
    a.t=$$('h3',h)[0].innerHTML;
                            
    a.d=$$('p',h)[0].innerHTML;
                            
    a.l=$$('a',h)[0]?$$('a',h)[0].href:'';
                            
    a.p=$$('span',h)[0].innerHTML;
                            if(
    this.thumbs){
                                    var 
    g=$$('img',h)[0];
                                    
    this.p.appendChild(g);
                                    
    w+=parseInt(g.offsetWidth);
                                    if(
    i!=this.l-1){
                                            
    g.style.marginRight=this.spacing+'px';
                                            
    w+=this.spacing
                                    
    }
                                    
    this.p.style.width=w+'px';
                                    
    g.style.opacity=this.thumbOpacity/100;
                                    
    g.style.filter='alpha(opacity='+this.thumbOpacity+')';
                                    
    g.onmouseover=new Function('TINY.alpha.set(this,100,5)');
                                    
    g.onmouseout=new Function('TINY.alpha.set(this,'+this.thumbOpacity+',5)');
                                    
    g.onclick=new Function(this.n+'.pr('+i+',1)')
                            }
                    }
                    if(
    b&&f){
                            
    b=$(b);
                            
    f=$(f);
                            
    b.style.opacity=f.style.opacity=this.navOpacity/100;
                            
    b.style.filter=f.style.filter='alpha(opacity='+this.navOpacity+')';
                            
    b.onmouseover=f.onmouseover=new Function('TINY.alpha.set(this,'+this.navHover+',5)');
                            
    b.onmouseout=f.onmouseout=new Function('TINY.alpha.set(this,'+this.navOpacity+',5)');
                            
    b.onclick=new Function(this.n+'.mv(-1,1)');
                            
    f.onclick=new Function(this.n+'.mv(1,1)')
                    }
                    
    this.auto?this.is(0,0):this.is(0,1)
            },
            
    mv:function(d,c){
                    var 
    t=this.c+d;
                    
    this.c=t=t<0?this.l-1:t>this.l-1?0:t;
                    
    this.pr(t,c)
            },
            
    pr:function(t,c){
                    
    clearTimeout(this.lt);
                    if(
    c){
                            
    clearTimeout(this.at)
                    }
                    
    this.c=t;
                    
    this.is(t,c)
            },
            
    is:function(s,c){
                    if(
    this.info){
                            
    TINY.height.set(this.r,1,this.infoSpeed/2,-1)
                    }
                    var 
    i=new Image();
                    
    i.style.opacity=0;
                    
    i.style.filter='alpha(opacity=0)';
                    
    this.i=i;
                    
    i.onload=new Function(this.n+'.le('+s+','+c+')');
                    
    i.src=this.a[s].p;
                    if(
    this.thumbs){
                            var 
    a=$$('img',this.p), l=a.lengthx=0;
                            for(
    x;x<l;x++){
                                    
    a[x].style.borderColor=x!=s?'':this.active
                            
    }
                    }
            },
            
    le:function(s,c){
                    
    this.f.appendChild(this.i);
                    var 
    w=this.o-parseInt(this.i.offsetWidth);
                    if(
    w>0){
                            var 
    l=Math.floor(w/2);
                            
    this.i.style.borderLeft=l+'px solid '+this.letterbox;
                            
    this.i.style.borderRight=(w-l)+'px solid '+this.letterbox
                    
    }
                    
    TINY.alpha.set(this.i,100,this.imgSpeed);
                    var 
    n=new Function(this.n+'.nf('+s+')');
                    
    this.lt=setTimeout(n,this.imgSpeed*100);
                    if(!
    c){
                            
    this.at=setTimeout(new Function(this.n+'.mv(1,0)'),this.speed*1000)
                    }
                    if(
    this.a[s].l!=''){
                            
    this.q.onclick=new Function('window.location="'+this.a[s].l+'"');
                            
    this.q.onmouseover=new Function('this.className="'+this.link+'"');
                            
    this.q.onmouseout=new Function('this.className=""');
                            
    this.q.style.cursor='pointer'
                    
    }else{
                            
    this.q.onclick=this.q.onmouseover=null;
                            
    this.q.style.cursor='default'
                    
    }
                    var 
    m=$$('img',this.f);
                    if(
    m.length>2){
                            
    this.f.removeChild(m[0])
                    }
            },
            
    nf:function(s){
                    if(
    this.info){
                            
    s=this.a[s];
                            $$(
    'h3',this.r)[0].innerHTML=s.t;
                            $$(
    'p',this.r)[0].innerHTML=s.d;
                            
    this.r.style.height='auto';
                            var 
    h=parseInt(this.r.offsetHeight);
                            
    this.r.style.height=0;
                            
    TINY.height.set(this.r,h,this.infoSpeed,0)
                    }
            }
    };
     
    TINY.scroll=function(){
            return{
                    
    init:function(e,d,s){
                            
    e=typeof e=='object'?e:$(e); var p=e.style.left||TINY.style.val(e,'left'); e.style.left=p;
                            var 
    l=d==1?parseInt(e.offsetWidth)-parseInt(e.parentNode.offsetWidth):0e.si=setInterval(function(){TINY.scroll.mv(e,l,d,s)},20)
                    },
                    
    mv:function(e,l,d,s){
                            var 
    c=parseInt(e.style.left); if(c==l){TINY.scroll.cl(e)}else{var i=Math.abs(l+c); i=i<s?i:s; var n=c-i*de.style.left=n+'px'}
                    },
                    
    cl:function(e){e=typeof e=='object'?e:$(e); clearInterval(e.si)}
            }
    }();
     
    TINY.height=function(){
            return{
                    
    set:function(e,h,s,d){
                            
    e=typeof e=='object'?e:$(e); var oh=e.offsetHeightho=e.style.height||TINY.style.val(e,'height');
                            
    ho=oh-parseInt(ho); var hd=oh-ho>h?-1:1clearInterval(e.si); e.si=setInterval(function(){TINY.height.tw(e,h,ho,hd,s)},20)
                    },
                    
    tw:function(e,h,ho,hd,s){
                            var 
    oh=e.offsetHeight-ho;
                            if(
    oh==h){clearInterval(e.si)}else{if(oh!=h){e.style.height=oh+(Math.ceil(Math.abs(h-oh)/s)*hd)+'px'}}
                    }
            }
    }();
     
    TINY.alpha=function(){
            return{
                    
    set:function(e,a,s){
                            
    e=typeof e=='object'?e:$(e); var o=e.style.opacity||TINY.style.val(e,'opacity'),
                            
    d=a>o*100?1:-1e.style.opacity=oclearInterval(e.ai); e.ai=setInterval(function(){TINY.alpha.tw(e,a,d,s)},20)
                    },
                    
    tw:function(e,a,d,s){
                            var 
    o=Math.round(e.style.opacity*100);
                            if(
    o==a){clearInterval(e.ai)}else{var n=o+Math.ceil(Math.abs(a-o)/s)*de.style.opacity=n/100e.style.filter='alpha(opacity='+n+')'}
                    }
            }
    }();
     
    TINY.style=function(){return{val:function(e,p){e=typeof e=='object'?e:$(e); return e.currentStyle?e.currentStyle[p]:document.defaultView.getComputedStyle(e,null).getPropertyValue(p)}}}();
     
  2. olen

    olen Постоялец

    Регистр.:
    30 окт 2007
    Сообщения:
    128
    Симпатии:
    33
    Проблема в первой строке:
    function $(i){return document.getElementById(i)}

    В скрипте определяется функция $, которая определена, также, и в библиотеке jQuery.
    Есть несколько решений:
    1. В скрипте убрать определение этой функции и заменить места ее использования на jQuery эквивалент.
    2. Переименовать функцию в скрипте (и ее вызовы).
    3. Использовать jQuery.noConflict(). В этом случае в jQuery не используется $, вместо этого надо будет писать jQuery.
    Можно написать var $something = jQuery.noConflict(); и использовать этот $something там, где стоял просто $.
     
  3. mulekula

    mulekula Постоялец

    Регистр.:
    6 дек 2008
    Сообщения:
    91
    Симпатии:
    2
    а где имменно писать (в скрипте). И как?!!
    Помогите пожалуйста!
     
  4. olen

    olen Постоялец

    Регистр.:
    30 окт 2007
    Сообщения:
    128
    Симпатии:
    33
    Что значит, где именно? По второму варианту можно все через search and replace заменить. Только по внимательно надо смотреть, менять только одинарный символ $.

    Третий вариант самый простой, но раз у вас есть jQuery, то значит где-то он вызывается. Если непонятно где, то лучше тогда не трогать.
     
  5. katrukhin

    katrukhin

    Регистр.:
    6 июн 2010
    Сообщения:
    168
    Симпатии:
    22
    Есть еще вариант, сменить этот скрипт, который конфликтует с jQuery, на аналог работающий с этим фраймом
     
  6. emil116rus

    emil116rus Постоялец

    Регистр.:
    29 мар 2008
    Сообщения:
    130
    Симпатии:
    15
    здравствуйте! помогите пожалуйста. не могу я разобраться с jQuery.noConflict().
    с js вообще не знаком (знаний 0)
    вот код в хеаде:
    Код:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html><head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="robots" content="index, follow">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <!-- кнопка вверх начало -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    	<script type="text/javascript">
    		google.load("jquery", "1.6.0");
    	</script>
    <script type='text/javascript' src='js/jquery.upScrollButton.js'></script>
    	<script>
    		jQuery(document).ready(function() {
    			jQuery('body').upScrollButton(
    					{
    						upScrollButtonText:'Наверх',
    						heightForButtonAppear:200,
    						scrollToptIME : 1500
    					}
    			);
    		});
    </script>
    <!-- кнопка вверх Конец -->
    <!-- fancybox начало -->
    	<link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox.css" media="screen" />
    	<script type="text/javascript" src="js/fancybox/jquery-1.3.2.min.js"></script>
    	<script type="text/javascript" src="js/fancybox/jquery.easing.1.3.js"></script>
    	<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.2.1.pack.js"></script>
    <script type="text/javascript">
    		$(document).ready(function() {
    			$("a.gallery, a.iframe").fancybox();
    url = $("a.modalbox").attr('href').replace("for_spider","content2");
    $("a.modalbox").attr("href", url);	
    $("a.modalbox").fancybox(
    {								  
    			"frameWidth" : 400,	 
    			"frameHeight" : 400 
    });
    			$("a.gallery2").fancybox(
    			{						
    "padding" : 20, // отступ контента от краев окна
    "imageScale" : false, // Принимает значение true - контент(изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - TRUE
    			"zoomOpacity" : false,	// изменение прозрачности контента во время анимации (по умолчанию false)
    			"zoomSpeedIn" : 1000,	// скорость анимации в мс при увеличении фото (по умолчанию 0)
    			"zoomSpeedOut" : 1000,	// скорость анимации в мс при уменьшении фото (по умолчанию 0)
    			"zoomSpeedChange" : 1000, // скорость анимации в мс при смене фото (по умолчанию 0)
    			"frameWidth" : 700,	 // ширина окна, px (425px - по умолчанию)
    			"frameHeight" : 600, // высота окна, px(355px - по умолчанию)
    			"overlayShow" : true, // если true затеняят страницу под всплывающим окном. (по умолчанию true). Цвет задается в jquery.fancybox.css - div#fancy_overlay 
    			"overlayOpacity" : 0.8,	 // Прозрачность затенения 	(0.3 по умолчанию)
    			"hideOnContentClick" :false, // Если TRUE  закрывает окно по клику по любой его точке (кроме элементов навигации). Поумолчанию TRUE		
    			"centerOnScroll" : false // Если TRUE окно центрируется на экране, когда пользователь прокручивает страницу		
    			});
    		$("#menu a, .anim").hover( function() {
          $(this).animate({"paddingLeft" : "10px"}, 300)},
    	  function() {$(this).animate({"paddingLeft" : "0"}, 300);
    });
    $("a.iframe").fancybox(
    {								  
    			"frameWidth" : 800,	 // ширина окна, px (425px - по умолчанию)
    			"frameHeight" : 600 // высота окна, px(355px - по умолчанию)
    });
    		});
    	</script>
    <!-- fancybox конец  -->
    <!-- jquery-spy начало  -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    	$('ul.spy').simpleSpy('2','4000');
    			$('ul.spy li').reverseOrder(); 
    });
    (function ($) {
    $.fn.reverseOrder = function() {
    	return this.each(function() {
    		$(this).prependTo( $(this).parent() );
    	});
    };
    $.fn.simpleSpy = function (limit, interval) {
        limit = limit || 4;
        interval = interval || 4000;
        return this.each(function () {
            // 1. setup
                // capture a cache of all the Interesting title s
                // chomp the list down to limit li elements
            var $list = $(this),
                items = [], // uninitialised
                currentItem = limit,
                total = 0, // initialise later on
                start = 0,//when the effect first starts
                startdelay = 4000;
                height = $list.find('> li:first').height();
            // capture the cache
            $list.find('> li').each(function () {
                items.push('<li>' + $(this).html() + '</li>');
            });
            total = items.length;
            $list.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit });
            $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
            // 2. effect        
            function spy() {
                // insert a new item with opacity and height of zero
                var $insert = $(items[currentItem]).css({
                    height : 0,
                    opacity : 0,
                    display : 'none'
                }).prependTo($list);
                // fade the LAST item out
                $list.find('> li:last').animate({ opacity : 0}, 1000, function () {
                    // increase the height of the NEW first item
                     $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
                    // AND at the same time - decrease the height of the LAST item
                    // $(this).animate({ height : 0 }, 1000, function () {
                        // finally fade the first item in (and we can remove the last)
                        $(this).remove();
                    // });
                });
                currentItem++;
                if (currentItem >= total) {
                    currentItem = 0;
                }
                setTimeout(spy, interval)
            }
            if (start < 1) {
                   setTimeout(spy,startdelay);
                    start++;
                } else {
                spy();
                }
        });
    };
    })(jQuery);
    <!-- jquery-spy конец  -->
    </script>
    </head>