jquery prettyPhoto conflict

Question

올바른 용어로 설명하지 않으면 사전에 사과하겠습니다. 주로 C# 지식으로 즉석에서 배우고 있습니다. 난 예쁜 jQuery 코드 prettyPhoto, Nivo 이미지 슬라이더 및 jQuery UI 탭 3 세트 있습니다. 같은 페이지에서 이미지와 비디오 모두 prettyPhoto를 사용하고 있습니다.

내 Nivo 이미지 슬라이더와 내 UI 탭 모두 정상적으로 작동하지만 내 인생에서 prettyPhoto가 작동하지 않습니다. 나는 포럼 등을 trawled했고, 시도했다.

1) 그래서 내가 jquery 라이브러리 (지금 나는 어디에 있는지)를 사용하여 하나 이상의 라이브러리를 사용했기 때문일 수있다.

2) jquery.noConflict();를 사용하려고했습니다. 행운을 빌어 몇 가지 다른 방식으로 코드를 작성하십시오.

현재이 문제는 jquery의 여러 버전을 사용하고 있기 때문에 발생할 수 있다고 생각합니다. 솔직히 말해서 문제를 해결하는 방법에 대해서는 조금 머리가 듭니다. 내 코드 내 홈 페이지 마스터의 헤드 태그에서

,

<%--PretyBox (media viewer)--%> 
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script> 
<script type="text/javascript">var $jq161 = jQuery.noConflict();</script> 
<link href="Styles/prettyPhoto.css" rel="stylesheet" type="text/css" media="screen" /> 
<script src="Scripts/jquery.prettyPhoto.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $jq161(document).ready(function() { 
     $("a[rel^='prettyPhoto']").prettyPhoto(); // Select all links that contain prettyPhoto in the attribute rel 
     //$('a.prettyPhoto').prettyPhoto(); // Select all links with prettyPhoto class 
     //$('a').prettyPhoto(); // Select all links in the page 
     //$('#gallerythumbnails a').prettyPhoto(); // Select all links in object with gallery ID 
     //$('#gallerythumbnails a').width(400); 
    }); 
</script> 

<%--Nivo Image Slider--%> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">var $jq142 = jQuery.noConflict();</script> 
<link href="Styles/nivo-slider.css" rel="stylesheet" type="text/css" media="screen" /> 
<script src="Scripts/jquery.nivo.slider.pack.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $jq142(window).load(function() { 
     $('#slider').nivoSlider({ 
      pauseTime: 6000, // How long each slide will show 
      directionNav: false, // Next & Prev navigation 
      controlNav: false, // 1,2,3... navigation 
      effect: 'fold' // Specify sets like: 'fold,fade,sliceDown' 
     }); 
    }); 
</script> 

내 콘텐츠 마스터 페이지의 head 태그의 코드,

<%--PretyPhoto (media viewer)--%> 
    <script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript">var $jq161 = jQuery.noConflict();</script> 
    <link href="Styles/prettyPhoto.css" rel="stylesheet" type="text/css" media="screen" /> 
    <script src="Scripts/jquery.prettyPhoto.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     $jq161(document).ready(function() { 
      $("a[rel^='prettyPhoto']").prettyPhoto(); // Select all links that contain prettyPhoto in the attribute rel 
      //$('a.prettyPhoto').prettyPhoto(); // Select all links with prettyPhoto class 
      //$('a').prettyPhoto(); // Select all links in the page 
      //$('#gallerythumbnails a').prettyPhoto(); // Select all links in object with gallery ID 
      //$('#gallerythumbnails a').width(400); 
     }); 
    </script> 

    <%--UI Tabs--%> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript">var $jq142 = jQuery.noConflict();</script> 
    <script src="Scripts/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script> 
    <link href="Styles/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" /> 

    <script type="text/javascript"> 
     $jq142(function() { 
      $("#tabs").tabs(); 
      $("#subtabs-1").tabs(); 
      $("#subtabs-2").tabs(); 
      $("#subtabs-3").tabs(); 
      $("#subtabs-4").tabs(); 

      var $tabs = $('#tabs').tabs(); 

      $('.to-stonetab').click(function() { 
       $tabs.tabs('select', 0); 
       return false; 
      }); 

      $('.to-quarrytab').click(function() { 
       $tabs.tabs('select', 1); 
       return false; 
      }); 

      $('.to-valuetab').click(function() { 
       $tabs.tabs('select', 2); 
       return false; 
      }); 

      $('.to-faqtab').click(function() { 
       $tabs.tabs('select', 3); 
       return false; 
      }); 
     }); 
    </script> 

그리고의 예를 들어, 다음과 같습니다 HTML 참조,

<a href='<%#DataBinder.Eval(Container.DataItem, "PageLink") %>' rel="prettyPhoto"> 
          <img src='Images/<%#DataBinder.Eval(Container.DataItem, "Image") %>' alt='<%#DataBinder.Eval(Container.DataItem, "AltTag") %>' /> 
</a> 

감사합니다.

Answer 1

업데이트 : 여러 버전의 jquery를 제거하고 현재 버전 (jquery-1.7.2.min.js)으로 바꾸면 문제가 해결되었습니다.

위의 방법으로 문제가 해결되지 않는 경우, 이전에 LightBox와 VideoBox를 사용하고 있었지만 다른 라이브러리를 사용했기 때문에 함께 실행되지 않았습니다.

LightBox와 VideoBox를 jquery를 사용하는 prettyPhoto으로 바꿨습니다 (내가 사용했던 다른 라이브러리와 동일 함). 문서에서 단 하나의 라이브러리 만 사용되었고 위의 내용이 적용되면 작동했습니다.