Is this a jQuery conflict I see here?

Hi everyone,

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.

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.

On this theme, I’ve been using for more than a year the simple and elegant “PrettyPhoto” lightbox plugin (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/).

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).

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.

Firebug gives me the following JS error:

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)


‘Seso.js’ is a file that comes with my theme (named “Seso”), and of which the code is as follows:

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>li>ul>li, #navigation ul.menu>li>ul>li>ul>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 && parseInt(jQuery.browser.version, 10) < 7) {} else {
    				if (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 9) {
    					image.hover(function(){
    						jQuery(".image_overlay",this).css("visibility", "visible");
    					},function(){
    						jQuery(".image_overlay",this).css("visibility", "hidden");
    					}).children('img').after('<span class="image_overlay"></span>');
    				}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('<span class="image_overlay"></span>').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 <= 0){
    					image.css('visibility','visible').animate({opacity:1}, settings.animSpeed, function(){settings.afterShow.call(this)});
    				}
    				if(count == 0){
    					imageHolder.removeData('count');
    					if(settings.delay <= 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);

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.

For the sake of completeness, here are the contents of my current WP header.php head tag:

<head>
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" />
    <title><?php if (is_front_page()) { ?><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?><?php } else { ?><?php wp_title($sep = ''); ?> - <?php bloginfo('name'); ?><?php } ?></title>

    <link rel="stylesheet" href="<?php echo $themePath ?>/css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
    <link rel="stylesheet" href="<?php echo $themePath ?>/css/imageflow.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="<?php echo $themePath ?>/css/options.php" type="text/css" media="screen" />
    <?php if(get_option_tree ('customcss', '')){ ?>
    <style type="text/css">
    <?php echo  get_option_tree ('customcss', ''); ?>
    </style>
    <?php } ?>
    <?php wp_head(); ?>
    <script src="<?php bloginfo('template_directory'); ?>/js/jquery.prettyPhoto.js"></script>
    <script type="text/javascript">
    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 */
    	});	

    })

    </script>
    </head>

I’ve tried using other lightbox plugins, but the result is the same.

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…

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!

Cheers,
D-