title: Wordpress JS conflict (?) - PrettyPhoto, jQuery
body: <p>I've been going berserk all afternoon trying to solve this issue, but I guess I just don't know enough Javascript to see what to do. Read through lots and lots of posts, including here, but I still can't figure out what to do.</p>
  
  <p>I'm currently using a Wordpress theme that I bought from a designer, who since then has disappeared and doesn't reply any message regarding the theme.</p>
  
  <p>On this theme, I've been using for more than a year the simple and elegant "PrettyPhoto" lightbox plugin (<a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/" rel="nofollow">http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/</a>). </p>
  
  <p>Everything used to work just fine, but today I suddenly discovered that the "lightbox" effect is now cancelled: every photo now opens underneath the main page, instead of popping up in a floating window -- and it looks really, really ugly (see example here).</p>
  
  <p>From what I understand it's probably a kind of javascript conflict happening within my theme, but I can't put my finger on it. I had a jQuery 1.8.2 file in my JS directory, but replacing it with version 1.9.1 brought no joy.</p>
  
  <p>Firebug gives me the following JS error:</p>
  
  <pre><code>    TypeError: $ is not a function      $('#navigation ul.menu').supersubs({          -   seso.js (line 2)
  Error: Permission denied to access property 'toString'
  TypeError: $ is not a function      $('#navigation ul.menu').supersubs({              - seso.js (line 2)     
  </code></pre>
  
  <p>'Seso.js' is a file that comes with my theme (named "Seso"), and of which the code is as follows:</p>
  
  <pre><code>jQuery(document).ready(function() {
      $('#navigation ul.menu').supersubs({ 
              minWidth:    15,
              maxWidth:    30,
              extraWidth:  1     
          }).superfish({ hoverClass: "sfHover", speed: 'slow', dropShadows: false, delay: 0, animation: {height:'show'}});
      $('.up a[href$="top"]').click( function() {
          $.scrollTo( $('#top'), {speed:1200} );
      })
      $('#navigation ul.menu&gt;li&gt;ul&gt;li, #navigation ul.menu&gt;li&gt;ul&gt;li&gt;ul&gt;li').hover(function() { //mouse in
          $(this).stop().animate({ paddingLeft: '5px' }, 300);
      }, function() { //mouse out
      $(this).stop().animate({ paddingLeft: 0 }, 300);
      });
      $(".socialtip").tipTip();
      jQuery(".toggle_body").hide(); 
  
      jQuery("h4.toggle").toggle(function(){
          jQuery(this).addClass("toggle_active");
          }, function () {
          jQuery(this).removeClass("toggle_active");
      });
  
      jQuery("h4.toggle").click(function(){
          jQuery(this).next(".toggle_body").slideToggle();
  
      });
      $("a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'facebook',slideshow:5000});
      var enable_image_hover = function(image){
          if(image.is(".portfolio")){
              if (jQuery.browser.msie &amp;&amp; parseInt(jQuery.browser.version, 10) &lt; 7) {} else {
                  if (jQuery.browser.msie &amp;&amp; parseInt(jQuery.browser.version, 10) &lt; 9) {
                      image.hover(function(){
                          jQuery(".image_overlay",this).css("visibility", "visible");
                      },function(){
                          jQuery(".image_overlay",this).css("visibility", "hidden");
                      }).children('img').after('&lt;span class="image_overlay"&gt;&lt;/span&gt;');
                  }else{
                      image.hover(function(){
                          jQuery(".image_overlay",this).animate({
                              opacity: '1'
                          },"fast");
                      },function(){
                          jQuery(".image_overlay",this).animate({
                              opacity: '0'
                          },"fast");
                      }).children('img').after(jQuery('&lt;span class="image_overlay"&gt;&lt;/span&gt;').css({opacity: '0',visibility:'visible'}));
                  }
              }
          }       
      }
  
      $('.portfolio').preloader({
          delay:200,
          imgSelector:'.imgbg img',
          beforeShow:function(){
              $(this).closest('.image_frame').addClass('preloading');
          },
          afterShow:function(){
              var image = jQuery(this).closest('.image_frame').removeClass('preloading').children("a");
              enable_image_hover(image);
          }
      });
      $('.post').preloader({
          delay:100,
          imgSelector:'.postimage img',
          beforeShow:function(){
              $(this).closest('.postimage').addClass('preloading');
          },
          afterShow:function(){
              var image = jQuery(this).closest('.postimage').removeClass('preloading');
          }
      });
  });
  (function($) {
  
      $.fn.preloader = function(options) {
          var settings = $.extend({}, $.fn.preloader.defaults, options);
  
  
          return this.each(function() {
              settings.beforeShowAll.call(this);
              var imageHolder = $(this);
  
              var images = imageHolder.find(settings.imgSelector).css({opacity:0, visibility:'hidden'});  
              var count = images.length;
              var showImage = function(image,imageHolder){
                  if(image.data.source != undefined){
                      imageHolder = image.data.holder;
                      image = image.data.source;  
                  };
  
                  count --;
                  if(settings.delay &lt;= 0){
                      image.css('visibility','visible').animate({opacity:1}, settings.animSpeed, function(){settings.afterShow.call(this)});
                  }
                  if(count == 0){
                      imageHolder.removeData('count');
                      if(settings.delay &lt;= 0){
                          settings.afterShowAll.call(this);
                      }else{
                          if(settings.gradualDelay){
                              images.each(function(i,e){
                                  var image = $(this);
                                  setTimeout(function(){
                                      image.css('visibility','visible').animate({opacity:1}, settings.animSpeed, function(){settings.afterShow.call(this)});
                                  },settings.delay*(i+1));
                              });
                              setTimeout(function(){settings.afterShowAll.call(imageHolder[0])}, settings.delay*images.length+settings.animSpeed);
                          }else{
                              setTimeout(function(){
                                  images.each(function(i,e){
                                      $(this).css('visibility','visible').animate({opacity:1}, settings.animSpeed, function(){settings.afterShow.call(this)});
                                  });
                                  setTimeout(function(){settings.afterShowAll.call(imageHolder[0])}, settings.animSpeed);
                              }, settings.delay);
                          }
                      }
                  }
              };
  
  
              images.each(function(i){
                  settings.beforeShow.call(this);
  
                  image = $(this);
  
                  if(this.complete==true){
                      showImage(image,imageHolder);
                  }else{
                      image.bind('error load',{source:image,holder:imageHolder}, showImage);
                      if($.browser.opera){
                          image.trigger("load");//for hidden image
                      }
                  }
              });
          });
      };
  
  
      //Default settings
      $.fn.preloader.defaults = {
          delay:1000,
          gradualDelay:true,
          imgSelector:'img',
          animSpeed:500,
          beforeShowAll: function(){},
          beforeShow: function(){},
          afterShow: function(){},
          afterShowAll: function(){}
      };
  })(jQuery);
  </code></pre>
  
  <p>I didn't build this JS file, so I don't know exactly what all of its functions are for. I'm quite sure I don't need 90% of them.</p>
  
  <p>For the sake of completeness, here are the contents of my current WP header.php head tag:</p>
  
  <pre><code>&lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="&lt;?php bloginfo('html_type') ?&gt;; charset=&lt;?php bloginfo('charset') ?&gt;" /&gt;
  &lt;title&gt;&lt;?php if (is_front_page()) { ?&gt;&lt;?php bloginfo('name'); ?&gt; - &lt;?php bloginfo('description'); ?&gt;&lt;?php } else { ?&gt;&lt;?php wp_title($sep = ''); ?&gt; - &lt;?php bloginfo('name'); ?&gt;&lt;?php } ?&gt;&lt;/title&gt;
  
  &lt;link rel="stylesheet" href="&lt;?php echo $themePath ?&gt;/css/style.css" type="text/css" media="screen" /&gt;
  &lt;link rel="stylesheet" href="&lt;?php bloginfo('template_directory'); ?&gt;/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo $themePath ?&gt;/css/imageflow.css" type="text/css" media="screen" /&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo $themePath ?&gt;/css/options.php" type="text/css" media="screen" /&gt;
  &lt;?php if(get_option_tree ('customcss', '')){ ?&gt;
  &lt;style type="text/css"&gt;
  &lt;?php echo  get_option_tree ('customcss', ''); ?&gt;
  &lt;/style&gt;
  &lt;?php } ?&gt;
  &lt;?php wp_head(); ?&gt;
  &lt;script src="&lt;?php bloginfo('template_directory'); ?&gt;/js/jquery.prettyPhoto.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;   
  jQuery(document).ready(function($) {
     $("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png']").prettyPhoto({
      animationSpeed: 'normal', /* fast/slow/normal */
      padding: 40, /* padding for each side of the picture */
      opacity: 0.35, /* Value betwee 0 and 1 */
      showTitle: true, /* true/false */
      theme: 'pp_default' /* light_rounded / dark_rounded / light_square / dark_square / facebook */      
      }); 
  
  })
  
  &lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>I've tried using other lightbox plugins, but the result is the same.</p>
  
  <p>The strangest thing is that PrettyPhoto does work on my local server -- the main difference between the local and online versions of my site being that the latter is a newer version of Wordpress...</p>
  
  <p>There is some deep JS conflict inside my theme, but I can't find its source. If anyone has a clue, all help would be strongly appreciated!</p>
  
  <p>Cheers,
  D-</p>