• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 656
  • 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

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