• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 649
  • Last Modified:

debugging Image Carousel on Homepage

Trying to debug this site's homepage carousel : http://tinyurl.com/65mrwrd . There must be a javascript conflict causing the carousel to freeze and not rotate the Slideshow images. I turned off all plugins that could possibly conflict, but slider refused to operate. Checked, and yes, images for slider are loaded. No immediate errors shown by Firebug though. I am trying to use Firebug's Script debugging capabilities to debug, but am still pretty new to Firebug JavaScript debugging. After setting random breakpoints I did not get useful data and Firebug started saying it was disabled on reload while it was not. And there are many scripts being loaded. How can I efficiently debug the image carousel? Is there a better way to go about it?
0
rhandalthor
Asked:
rhandalthor
  • 13
  • 8
3 Solutions
 
rhandalthorAuthor Commented:
Perhaps it is NextGen jQuery Cycle conflicting with the theme's jQuery Cycle. Not sure yet, how I can remedy that..
0
 
jeremyjared74Commented:
Make sure your theme has this before any jquery calls in the header.php:
<?php wp_head(); ?>

Open in new window


Also make sure this is just before the <head> tag:
<?php wp_enqueue_script("jquery"); ?>

Open in new window


And last thing is make sure this is included in the footer just before the closing </body> tag:
<?php wp_foot(); ?>:

Open in new window

0
 
rhandalthorAuthor Commented:
So header.php:
<?php 
	// Includes the jQuery framework
	if( !is_admin()){
		wp_deregister_script('jquery');
		wp_register_script('jquery', ($themePath ."js/jquery-1.4.min.js"), false, '1.4.2');
		wp_enqueue_script('jquery');
		// wp_enqueue_script('foxycart', 'https://domain.foxycart.com/files/foxycart_includes.js');
	}
	
	// calls hook to WordPress head functions
	wp_head(); 
	?>

Open in new window


and footer.php:
<?php wp_footer(); //leave for plugins ?>

</body>

Open in new window


should be OK, right?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
jeremyjared74Commented:
The 'foxycart' is being commented out, but that isn't your issue.

One thing I dont see is this:
<?php wp_enqueue_script("jquery"); ?>

Open in new window

0
 
rhandalthorAuthor Commented:
I do have that in the line before foxycart. See earlier pasted code and here once more:

      
<?php 
	// Includes the jQuery framework
	if( !is_admin()){
		wp_deregister_script('jquery');
		wp_register_script('jquery', ($themePath ."js/jquery-1.4.min.js"), false, '1.4.2');
		wp_enqueue_script('jquery');
		// wp_enqueue_script('foxycart', 'https://domain.foxycart.com/files/foxycart_includes.js');
	}
	
	// calls hook to WordPress head functions
	wp_head(); 
	?>

Open in new window


This code is loaded when you are not an admin... Not sure why the developer did that though..
0
 
rhandalthorAuthor Commented:
Here a larger snippet from header.php:

<?php 
	// Includes the jQuery framework
	if( !is_admin()){
		wp_deregister_script('jquery');
		wp_register_script('jquery', ($themePath ."js/jquery-1.4.min.js"), false, '1.4.2');
		wp_enqueue_script('jquery');
		// wp_enqueue_script('foxycart', 'https://domain.foxycart.com/files/foxycart_includes.js');
	}
	
	// calls hook to WordPress head functions
	wp_head(); 
	?>
	
	<!-- Feed link / Pingback link -->
	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS2 Feed" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

	
	<!-- Favorites icon -->
	<link rel="shortcut icon" href="<?php echo $themePath ?>images/favicon.ico" />
	
	<!-- Style sheets -->
	<link rel="stylesheet" type="text/css" href="<?php echo $cssPath ?>css/reset.min.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo $cssPath ?>css/menu.min.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo $cssPath ?>js/fancybox/jquery.fancybox-1.3.4.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo $cssPath ?>css/tooltip.min.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo $cssPath ?>style-default.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo $cssPath ?>jg-style-customizations.css" />
	

	
	<!-- jQuery utilities -->
	<script type="text/javascript">
		var themePath = '<?php echo $themePath ?>'; // for js functions 
	</script>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script type="text/javascript" src="<?php echo $themePath ?>js/jquery.easing.1.3.min.js"></script>
	<script type="text/javascript" src="<?php echo $themePath ?>js/hoverIntent.min.js"></script>
	<script type="text/javascript" src="<?php echo $themePath ?>js/jquery.bgiframe.min.js"></script>
	<!-- Drop down menus -->
	<script type="text/javascript" src="<?php echo $themePath ?>js/superfish.min.js"></script>
	<script type="text/javascript" src="<?php echo $themePath ?>js/supersubs.min.js"></script>
	<!-- <script type="text/javascript" src="<?php echo $themePath ?>js/jquery.curvycorners.packed.js"></script> -->
	
	<!-- AJAX Form submission -->
	<script type="text/javascript" src="<?php echo $themePath ?>js/jquery.form.js"></script>
	
	<?php 
	// Tool Tips
	if (get_theme_var('toolTipsActive') !== '' || get_theme_var('toolTipsAllTitles') == true) {
		echo '<!-- Tooltips -->';
		echo '<script type="text/javascript" src="'. $themePath .'js/jquery.cluetip.min.js"></script>';
		echo '<script type="text/javascript" src="'. $themePath .'js/toolTipOptions.js"></script>';
		?>
		<script type="text/javascript">
		  jQuery(document).ready(function() {
			// select items to apply tooltip function
			$j('.tip').cluetip({showtitle: false, arrows: true, splitTitle: '|'});
			$j('.tipInclude').cluetip({attribute: 'rel', showtitle: false, arrows: true}); // external file indluded tips
			<?php 
			if (get_theme_var('toolTipsAllTitles') == true) { ?>
				$j('a[title != ""]').each( function() {
					// don't apply to any links in the drop down menu
					if ( !$j(this).parents('.sf-menu').length ) {
						$j(this).cluetip({showtitle: false, arrows: true, splitTitle: '|'});
					}
				});
			<?php 
			} ?>
		  });
		</script>
		<?php
	}
	?>
	
	<?php 
	// Ribbon Scroll Effect
	if (get_theme_var('ribbonScrollActive') !== '') {
		echo '<!-- Ribbon Scroll Effect -->';
		echo '<script type="text/javascript" src="'. $themePath .'js/ribbonScroll.js"></script>';
	}
	?>
	<!-- Input labels -->
	<script type="text/javascript" src="<?php echo $themePath ?>js/jquery.overlabel.min.js"></script>
	

	<?php 
	// Anchor tag scrolling "smooth scroll" or "scrollTo"
	if (get_theme_var('anchorScrollingActive') !== '') {
		echo '<!-- Anchor tag scrolling effects -->';
		echo '<script type="text/javascript" src="'. $themePath .'js/jquery.scrollTo-min.js"></script>';
		echo '<script type="text/javascript" src="'. $themePath .'js/jquery.localscroll-min.js"></script>';
		?>
		<script type="text/javascript">
		  jQuery(document).ready(function() {
			// initialize anchor tag scrolling effect (scrollTo)
			$j.localScroll();
		  });
		</script>
		<?php
	}
	?>

Open in new window

0
 
rhandalthorAuthor Commented:
Perhaps the scripts after wp_head() are causing problems. Not sure yet why and how to solve that.
0
 
rhandalthorAuthor Commented:
For the slider I found this code further down the line:

// output the javascript for the Cycle Plug-in (Default)
            
echo '<!-- Cycle Slide Show -->';
		if (!$jQueryCycle) {
			echo '<script type="text/javascript" src="'. $themePath .'js/jquery.cycle.all.min.js"></script>';
		$jQueryCycle = true; // plug-in included (prevents 2nd include by dynamic skin changer)
}
		
?>

Open in new window

0
 
jeremyjared74Commented:
I'm not sure, but there seems to be a lot of jquery scripts working in your theme. You may want to read up on the jquery noconflict page:
http://api.jquery.com/jQuery.noConflict/
0
 
rhandalthorAuthor Commented:
Anyone?
0
 
rhandalthorAuthor Commented:
Ok, will do some more reading...
0
 
rhandalthorAuthor Commented:
The jQuery loaded in $themePath ."js/jquery-1.4.min.js already has a jQuery noconflict addition in the end:

// this starts the no conflict mode... (not default, added for theme)
var $j = jQuery.noConflict();
var $j = jQuery.noConflict();

Open in new window


which is used as $j in the header after the jQuery library is loaded. So all jQuery variable conflicts should be avoided.  See http://api.jquery.com/jQuery.noConflict/

Still lost here...
0
 
jeremyjared74Commented:
I just noticed your <?php wp_enqueue_script("jquery"); ?> that you said is in front of the cart is commented out.

If it is commented out it won't work. The <?php wp_enqueue_script("jquery"); ?> is what plug-ins use to hook into your theme, if it isn't correctly added then you could be having issues related to that.
0
 
jeremyjared74Commented:
You should add the <?php wp_enqueue_script("jquery"); ?> to your header.php, just before the <body> tag.
0
 
rhandalthorAuthor Commented:
It is not commented out. And otherwise we would not have it loaded on the site and shown in the source code, right? Here a link o the whole header: http://javascript.pastebin.com/EKCGnNrz . Perhaps I should enqueue all script using wp_enqueue or somehow try to reduce scripts used. Not sure yet how.
0
 
jeremyjared74Commented:
Do you see the // in front of it? This is commented out. See here: http://php.about.com/od/learnphp/qt/php_comments.htm
0
 
rhandalthorAuthor Commented:
Thanks Jeremy. There are a few  PHP comments using // which only affect the line they are put in front of. Somehow I cannot see that affecting the line which loads jQuery. On line 20 I see :
wp_register_script('jquery', ($themePath ."js/jquery-1.4.min.js"), false, '1.4.2');

Open in new window

And on the website itself: http://tinyurl.com/65mrwrd the jQuery library is loaded as well. When I check the source I see:
<script type='text/javascript' src='http://www.domain.com/wp-content/themes/parallelus-unite/js/jquery-1.4.min.js?ver=1.4.2'></script>

Open in new window

 Where do you think that jQuery script comes from?
0
 
jeremyjared74Commented:
I was looking at a different line.

I haven't used this because I try to minimize my scripts and keep my websites running smooth, but this is another way to solve WordPress jquery related conflicts:
 
Wrap your scripts like this:
(function($) {
    // $() will work as an alias for jQuery() inside of this function
})(jQuery);

Open in new window

SOURCE: http://wpengineer.com/2028/small-tips-using-wordpress-and-jquery/



Or you could try this method of using the no conflict:
<script type="text/javascript" src="http://mlep.com/~avalon/wordpress/wp-content/themes/twentyten/facebox/jquery14.js"></script> 
<script type="text/javascript"> 
    var ang = jQuery.noConflict();
</script>
<script type="text/javascript" src="http://mlep.com/~avalon/wordpress/wp-content/themes/twentyten/facebox/facebox.js"></script> 
<script type="text/javascript"> 
   // other jQuery Codes here...
</script>

Open in new window

SOURCE:http://stackoverflow.com/questions/3420517/resolving-conflict-between-multiple-jquery-files


0
 
rhandalthorAuthor Commented:
Found the issue. The jQuery Cycle code was loaded, but the script dictating the slider's configuration was not added after a previous customization by another developer. It is running now.
0
 
rhandalthorAuthor Commented:
Found the missing jQuery Cycle config snippet and added it. Slider is running again now.
0
 
jeremyjared74Commented:
Good, I'm glad it's working now.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 13
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now