title: jquery prettyPhoto conflict
body: <p>I appologise in advance if I do not explain this in the correct terms, I am learning on the fly with mainly C# knowledge. I have 3 sets of jQuery code prettyPhoto, Nivo Image slider and jQuery UI Tabs. I am using prettyPhoto for both images and video on the same page.</p>
  
  <p>Both my Nivo Image Slider, and my UI tabs work fine, but I cannot for the life of me, get the prettyPhoto to work. I have trawled forums etc, and tried,</p>
  
  <p>1) It could be because I was using more than one library hence I switched to using only the jquery library (where I am now).</p>
  
  <p>2) I have also tried to use jquery.noConflict(); code in a few different ways with no luck.</p>
  
  <p>Currently I think this could be due to using multiple versions of jquery, but to be honest it is a little over my head on how to resolve it. My code is below,</p>
  
  <p>In the head tag of my Home page Master,</p>
  
  <pre><code>&lt;%--PretyBox (media viewer)--%&gt;
  &lt;script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;var $jq161 = jQuery.noConflict();&lt;/script&gt;
  &lt;link href="Styles/prettyPhoto.css" rel="stylesheet" type="text/css" media="screen" /&gt;
  &lt;script src="Scripts/jquery.prettyPhoto.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $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);
      });
  &lt;/script&gt;
  
  &lt;%--Nivo Image Slider--%&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;var $jq142 = jQuery.noConflict();&lt;/script&gt;
  &lt;link href="Styles/nivo-slider.css" rel="stylesheet" type="text/css" media="screen" /&gt;
  &lt;script src="Scripts/jquery.nivo.slider.pack.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $jq142(window).load(function () {
          $('#slider').nivoSlider({
              pauseTime: 6000, // How long each slide will show
              directionNav: false, // Next &amp; Prev navigation
              controlNav: false, // 1,2,3... navigation
              effect: 'fold' // Specify sets like: 'fold,fade,sliceDown'
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The code in the head tag of my Content Master page,</p>
  
  <pre><code>    &lt;%--PretyPhoto (media viewer)--%&gt;
      &lt;script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;var $jq161 = jQuery.noConflict();&lt;/script&gt;
      &lt;link href="Styles/prettyPhoto.css" rel="stylesheet" type="text/css" media="screen" /&gt;
      &lt;script src="Scripts/jquery.prettyPhoto.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          $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);
          });
      &lt;/script&gt;
  
      &lt;%--UI Tabs--%&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;var $jq142 = jQuery.noConflict();&lt;/script&gt;
      &lt;script src="Scripts/jquery-ui-1.8.18.custom.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link href="Styles/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" /&gt;
  
      &lt;script type="text/javascript"&gt;
          $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;
              });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>And an example of a HTML references,</p>
  
  <pre><code>&lt;a href='&lt;%#DataBinder.Eval(Container.DataItem, "PageLink") %&gt;' rel="prettyPhoto"&gt;
                              &lt;img src='Images/&lt;%#DataBinder.Eval(Container.DataItem, "Image") %&gt;' alt='&lt;%#DataBinder.Eval(Container.DataItem, "AltTag") %&gt;' /&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Thank you in advance for any help.</p>