2013-10-25 2 views
-1

CodeCanyon에서 구입 한 Revolution Slider와 충돌이 있습니다. 나는 혁명 슬라이더 코드를 여기에 게시하지 않을 것이므로 나는해서는 안되는 것을 포기하지 않을 것이다.jQuery 충돌과 Revolution Slider

사이트의 다른 부분에 다음 스크립트를 사용하고 있습니다. 혁명 슬라이더를 놓자 마자이 스크립트 (아래 참조)가 더 이상 작동하지 않습니다. 슬라이더를 제거하면 다시 작동합니다. 근처에 나는 둘 사이에 어떤 종류의 갈등이 있다는 것을 알 수 있습니다.

저는 jQuery에 매우 익숙하며 누군가가 도움을 줄 수 있기를 기대합니다.

$(document).ready(function(){ 

// hide #back-top first 
$("a.back-to-top").hide(); 

// fade in #back-top 
$(function() { 
    $(window).scroll(function() { 
     if ($(this).scrollTop() > 100) { 
      $('a.back-to-top').fadeIn(); 
     } else { 
      $('a.back-to-top').fadeOut(); 
     } 
    }); 

    // scroll body to 0px on click 
    $('a.back-to-top').click(function() { 
     $('body,html').animate({ 
      scrollTop: 0 
     }, 400); 
     return false; 
    }); 
}); 


// Tooltips 
$("a").LiteTooltip(
    { margin:"0",padding:"6" //padding : "5", etc // 
}); 

}); 

--------- 편집 -----------

좋아, 나는 그것이 여기있다 ... 코드없이 어려울 것이다라는 것을 알고 있었다. 나는 이것이 물건을 조금 더 분명하게하기를 바란다.

</head> 
<body> 
    <div id="theme-wrapper"> 
     <div id="mini-header-wrapper"> 
      <div class="grid-container mini-header"> 

      </div> 
     </div> 

     <div id="nav-header-wrapper"> 
      <div class="grid-container white-trans-bottom"> 
      <div class="grid-20 grid-parent"> 
       <span style="display:block;line-height:106px;">I am 25% wide</span> 
      </div> 
      <div class="grid-80 grid-parent"> 
       <div id="main-nav"> 
       </div> 
      </div> 
      </div> 
     </div> 


     <!-- START REVOLUTION SLIDER --> 

     <div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin:0px auto;background-color:#E9E9E9;padding:0px;margin-top:0px;margin-bottom:0px;max-height:650px;"> 
      <div id="rev_slider_1_1" class="rev_slider fullwidthabanner" style="display:none;max-height:650px;height:650;">      
       <ul> 
        <li data-transition="fade" data-slotamount="7" data-masterspeed="300" > 
         <img src="/files/4413/8267/6500/bg02.jpg" alt="the7revbg02" > 

        </li> 
        <li data-transition="fade" data-slotamount="7" data-masterspeed="300" > 
         <img src="/files/4413/8267/6504/bg01.jpg" alt="the7revbg01" > 
        </li> 
       </ul> 
       <div class="tp-bannertimer"></div> 
      </div> 
     </div>    

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

      if (tpj.fn.cssOriginal != undefined) 
       tpj.fn.css = tpj.fn.cssOriginal; 

      if(tpj('#rev_slider_1_1').revolution == undefined) 
       revslider_showDoubleJqueryError('#rev_slider_1_1'); 
      else 
       revapi1 = tpj('#rev_slider_1_1').show().revolution(
       { 
        delay:9000, 
        startwidth:960, 
        startheight:650, 
        hideThumbs:200, 

        thumbWidth:100, 
        thumbHeight:50, 
        thumbAmount:2, 

        navigationType:"none", 
        navigationArrows:"none", 
        navigationStyle:"round", 

        touchenabled:"on", 
        onHoverStop:"off", 

        navigationHAlign:"center", 
        navigationVAlign:"bottom", 
        navigationHOffset:0, 
        navigationVOffset:20, 

        soloArrowLeftHalign:"left", 
        soloArrowLeftValign:"center", 
        soloArrowLeftHOffset:20, 
        soloArrowLeftVOffset:0, 

        soloArrowRightHalign:"right", 
        soloArrowRightValign:"center", 
        soloArrowRightHOffset:20, 
        soloArrowRightVOffset:0, 

        shadow:0, 
        fullWidth:"on", 

        stopLoop:"off", 
        stopAfterLoops:-1, 
        stopAtSlide:-1, 

        shuffle:"off", 

        hideSliderAtLimit:0, 
        hideCaptionAtLimit:0, 
        hideAllCaptionAtLilmit:0, 
        startWithSlide:0  
       }); 

      }); //ready 

     </script> 

         <!-- END REVOLUTION SLIDER --> 

      <div id="main-content-wrapper" style="min-height:1000px;"> 
      <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> 
      </div> 

      <footer class="grey-strip"> 
       <div class="grid-container"> 
          <div class="grid-25"> 
            test 
          </div> 
          <div class="grid-25"> 
           testing 
          </div> 
          <div class="grid-25"> 
            test 
          </div> 
          <div class="grid-25"> 
           testing 
          </div> 
        </div> 
      </footer> 
      <footer class="basefooter"> 
       <div class="grid-container"> 
          <div class="grid-30 footer-logo"> 
            <a href="#" class="footer-logo"><img src="/themes/nextcode/img/logos/nextcode-footer.png" alt="NextCode Creative Gippsland" /></a> 
          </div> 
          <div class="grid-70 mini-nav"> 
           <div class="backto-top-btn"><a href="" title="Back to top" class="back-to-top icon-circle-arrow-up icon-2x" data-location="top" data-title="Back to top"></a></div> 
           <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Design Services</a></li> 
        <li><a href="#">Our Work</a></li> 
        <li><a href="#">About Us</a></li> 
        <li><a href="#">Support</a></li> 
        <li><a href="#">Contact Us</a></li> 
       </ul> 

          </div> 
        </div> 
      </footer>  
</div> 


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

// hide #back-top first 
jQuery("a.back-to-top").hide(); 

// fade in #back-top 
$(function() { 
    $(window).scroll(function() { 
     if ($(this).scrollTop() > 100) { 
      jQuery('a.back-to-top').fadeIn(); 
     } else { 
      jQuery('a.back-to-top').fadeOut(); 
     } 
    }); 

    // scroll body to 0px on click 
    jQuery('a.back-to-top').click(function() { 
     jQuery('body,html').animate({ 
      scrollTop: 0 
     }, 400); 
     return false; 
    }); 
}); 


// Tooltips 
jQuery("a").LiteTooltip(
    { margin:"0",padding:"6" //padding : "5", etc // 
}); 

    }); 
</script> 

누구든지이 문제를 해결할 수 있다면, 내가 잘못 한 것에 대한 기본적인 설명을 아주 좋아할 것입니다. jQuery 학습을 통해 자신의 길을 고민하고이 문제를 통해 배우고 싶습니다.

미리 보시고 시간을내어 주셔서 감사합니다.

+0

스택 오버플로에 오신 것을 환영합니다! 질문에 대답 할 수있는 방법이 없습니다. 전체 코드를 볼 수 없다면 문제가 무엇인지 알 수있는 방법이 없습니다. 행운을 빕니다. –

답변

0

혁명 슬라이더를 호출하는 데 사용하는 js에서 var foo = jQuery;과 같은 것을 찾으십시오. 따라서 $은 jQuery를 더 이상 참조하지 않으며 기존 코드가 손상 될 수 있습니다.

슬라이더 js에 붙여 넣은 후 으로 $을 기존 js로 바꾸어보십시오.

따라서 $(document).ready..foo(document).ready..이됩니다.