jquery prettyPhoto conflict

Question

これを正しい言葉で説明しないと、私は事前に分かりませんが、私は主にC＃の知識で飛んで学習しています。私は、jQueryコードprettyPhoto、Nivo Imageスライダ、jQuery UIタブの3つのセットを持っています。私はprettyPhotoを同じページの画像とビデオの両方に使用しています。

私のNivo Image Sliderと私のUIタブはうまく動作しますが、私の人生ではprettyPhotoを動作させることはできません。

1）複数のライブラリを使用していた可能性があります。そのため、jqueryライブラリのみを使用していた可能性があります。

2）私もjquery.noConflict（）を使用しようとしました。運がない、いくつかの異なる方法でコード化します。

現在のところ、これはjqueryの複数のバージョンを使用している可能性があると思いますが、正直言ってそれを解決する方法について少し頭があります。私のコードは私のホーム・ページマスターのheadタグで

、

<%--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

UPDATE： 問題は、複数のバージョンのjqueryを削除し、現在のバージョン（jquery-1.7.2.min.js）に置き換えて解決しました。

上記の問題が解決しない場合は、以前はLightBoxとVideoBoxを使用していましたが、別のライブラリを使用していたために一緒に実行されないことに注意してください。

LightBoxとVideoBoxを、jqueryを使ったprettyPhoto（私が使っていた他のライブラリと同じ）に置き換えました。文書で1つのライブラリのみが使用され、上記が適用されると、それは機能しました。