Is this a jQuery conflict I see here?

  • Resolved dorearendil

    (@dorearendil)


    11 years, 11 months ago

    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 (https://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-

Viewing 7 replies - 1 through 7 (of 7 total)

  • I’m sorry but as you are using a commercial theme, you need to seek support from the theme’s developer/vendor. We do not support commercial themes here.

    Thread Starter dorearendil

    (@dorearendil)

    Hi Esmi,
    Thanks for your reply, but as I wrote:

    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.

    The reason I still have those JS problems in my theme, after having used it for so long, is precisely because the designer ignores all my messages, and I’m no programmer! And each time I raise such an issue on this forum, people tell me that they can’t help me “because it’s a commercial theme”…

    I really like this theme (see https://www.meridian-online.com), I’ve spent ages trying to make it work and look good, and I’m sure somebody with more knowledge of how WP and JS work can solve those issues in the blink of an eye. I just lack the time to learn everything Javascript these days…

    Would you please have a suggestion of something I could try?

    You could try changing the two instances of $ indicated by the error to jQuery and see if that has any effect – they are @line 7 and 28 of your seso.js file.

    Failing that you will have to do some troubleshooting from the ground up – i.e. deactivate all plugins but for the PrettyPhoto plugin and test.

    Switch to default theme + the PrettyPhoto plugin and test

    With your current theme + PrettyPhoto – comment out the seso.js and test

    See which has the best result and go from there – if you must keep the theme and are unable to locate the conflict then you might be better off hiring someone to troubleshoot it for you. The best place to do that would be the https://jobs.wordpress.net/ site.

    Ensure that all of your scripts have jQuery no-conflict wrappers:

    jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
});

    For example, your seso script:

    jQuery(document).ready(function() {

    See the problem?

    Thread Starter dorearendil

    (@dorearendil)

    Thanks to Zulfikar and Chip.

    Actually I didn’t describe my problem accurately enough in my opening post — I was using PrettyPhoto, which is basically a plugin, but hard-coded into my template files (following this tutorial), i.e. not as a plugin downloaded from www.remarpro.com.

    I tried all the methods you guys advised: deactivating all plugins then reactivating them one by one, replacing stuff in my seso.js file (non-conflict wrappers, etc.) but to no avail.

    In the end, out of sheer despair, I simply installed the official PrettyPhoto plugin — while keeping the PrettyPhoto in my template files. Well, fellows, I’ll be darned if this didn’t just solve everything… Now the lightbox effect is back.

    It’s one of these occasions in which I feel so powerless in dealing with the world of machines.

    (since things are back in order, I don’t think I’ll dig into the topic much further… But just in case the conflicts reappears suddenly in the future, does this new info shade more light on the root of all evil?)

    Actually I didn’t describe my problem accurately enough in my opening post — I was using PrettyPhoto, which is basically a plugin, but hard-coded into my template files

    The Plugin more than likely updated its scripts, to maintain compatibility with the latest jQuery version(s). While it’s perfectly fine to incorporate a Plugin directly into a Theme, the caveat is that you have essentially forked that Plugin, and thereafter have to ensure that you pull in upstream changes into your fork – especially with script-heavy/dependent Plugins.

    You might be better off integrating support for that particular Plugin into your Theme, and then just install/activate the Plugin.

    Thread Starter dorearendil

    (@dorearendil)

    Hi Chip,
    Thanks for the advice. I’ll see if I can work something out so that the issue doesn’t slyly ambush me again in the future.
    Cheers,
    Dorian

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Is this a jQuery conflict I see here?’ is closed to new replies.

Tags