FooGallery Owl Carousel script will not load in Wordpress using custom theme

Hello, I am having trouble getting a script to load for a custom Wordpress theme made by another developer. The script should load a carousel gallery with a lightbox function.  But, since the script is not loading, it will not display on the page.

The custom theme is based off of the Twenty Ten Theme.  The plugin I am using is FooGallery Owl Carousel.  The Owl Carousel is one of the templates available under the FooGallery plugin.

The site is still in development, but I have made a duplicate copy of the original site to test on.

Here are the temporary credentials:
http://canflex.oakharborwebdesign.com/wp-admin
user: howitworks
password: ObzMXRjVFlHz

I have made a page to test the display of the carousel. This is the page that does not display the carousel. I can only see it in the code.

http://canflex.oakharborwebdesign.com/foo-owl-carousel/

When using the Firefox Inspector I see this error message on the foo-owl-carousel page.

TypeError: $(...).owlCarousel is not a function

These are the steps I have taken so far:

1.  Disabled all other plugins. (Did not work)
2.  Switched themes (Plugin worked when I switched themes)
3.  The previous developer was using the jquery version of the plugin (http://owlgraphic.com/owlcarousel/).  I have removed all references to that plugin so that I can use the Wordpress version of the plugin (https://wordpress.org/support/plugin/foogallery-owl-carousel-template).
4.  The FooGallery has several other templates that can be used.  They display correctly.  Only the owl carousel will not display
5.  I have the latest versions of everything installed.
6.  I am displaying it via shortcode.  There are no other tags around the shortcode to interfere when viewed in the Text Mode.
7.  Jquery is being called in the header.
8.  Jquery loads before the plugin.
9.  I have tried uninstalling and reinstalling the plugin to no avail.

I have asked assistance from the original developer of the Owl Carousel plugin and he has yet to answer or resolve the issue.  I have tried everything I know to get the script to load. But cannot make it work.

Any help would be so greatly appreciated.

Tia
tiabradford1984Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I think you need to fix how you are loading files.

Your css files should be in the <head> section and preferably loaded prior to any external js files.

Next, your js files can be loaded in the <head> section or just before the closing </body> tag.  

Lastly, any of your jquery code needs to be below where the jquery library is loaded.  If you view the source of your page you can see the issue I have described.  

CSS files are loaded at the bottom of the page, and you are calling jquery functions prior to loading the library.

Get this fixed and report back the results.

<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>-->
<script src="http://canflex.oakharborwebdesign.com/wp-content/themes/canflex-usa/js/modernizr.foundation.js"></script>
<script src="http://canflex.oakharborwebdesign.com/wp-content/themes/canflex-usa/js/foundation.min.js"></script>
<script src="http://canflex.oakharborwebdesign.com/wp-content/themes/canflex-usa/js/app.js"></script>
<script src="http://canflex.oakharborwebdesign.com/wp-content/themes/canflex-usa/js/fastclick.js"></script>
<script src="http://canflex.oakharborwebdesign.com/wp-content/themes/canflex-usa/js/smoothscroll.js"></script>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>-->
<script>
	// $(document).ready(function () {
	jQuery(document).ready(function ($) { 
	
		// MOBILE MENU
		$("#sidr").hide();
		$("#sidr").fadeTo( "slow", 0.98 );
		$("#sidr a").click(function(event){
			$('#sidr').animate({scrollTop:0});
		});
		$("#sidr ul li").has("ul").find("a").click(function(event){
			$(this).next('ul').slideToggle(300);
			$('#sidr a').removeClass('active');
			// $(this).parent("li").find("a:first-child").addClass("active");
			$(this).addClass('active');
		});
		$("#sidr > ul > li > a").click(function(event){
			$("#sidr > ul > li > a").not(this).next('ul').slideUp(300);
		});
		$("#sidr > ul > li > ul > li > a").click(function(event){
			$("#sidr > ul > li > ul > li > a").not(this).next('ul').slideUp(300);
		});
		$(".showhidemenu").click(function(event){
			$('#sidr').toggleClass('open');
		});
		$(".show-photo-gallery").click(function(event){
			$('#photo-gallery').slideDown(300);
			$('#photos-slider').owlCarousel_old({
			loop:false,
			margin:10,
				items: 4,
				nav: false,
				dots: true,
			responsiveClass:true,
			responsive:{
				0:{
					items:1,
								slideBy: 1
				},
						767:{
					items:2,
								slideBy: 2
				},
				992:{
					items:4,
								slideBy: 4
				}
			}
			});
			$('#video-gallery').slideUp(300);
		});
		$(".show-video-gallery").click(function(event){
			$('#photo-gallery').slideUp(300);
			$('#video-gallery').slideDown(300);
			$('#video-listing').owlCarousel_old({
			loop:false,
			margin:10,
				items: 4,
				nav: false,
				dots: true,
			responsiveClass:true,
			responsive:{
				0:{
					items:1,
								slideBy: 1
				},
						767:{
					items:2,
								slideBy: 2
				},
				992:{
					items:4,
								slideBy: 4
				}
			}
			});
		});
		// MOBILE MENU END
	
		// AUTO RESIZE VIDEOS
		$("iframe").wrap("<div class='flex-video'/>");
		// AUTO RESIZE VIDEOS END
	});
</script>


<script>
	$(function() {
	    FastClick.attach(document.body);
	});
</script>

<script type="text/javascript">if(window.aiModifyParent) {aiModifyParent();}</script>
    <script>
      jQuery(document).ready(function($) {
        $("a.nturl").on("click",function() {
	  default_lang = "en";
	  lang_prefix = $(this).attr("class").split(" ")[2];
			  
	  if (lang_prefix == default_lang) {			   
	    load_default();
	  } else {
	    load_selected_language();
	  }
			 
	  function load_default() {
	    doGoogleLanguageTranslator(default_lang + "|" + default_lang);
	  }
			 
	  function load_selected_language() {
	    doGoogleLanguageTranslator(default_lang + "|" + lang_prefix);
	  }
        });
		  
        $("a.flag").on("click",function() {
          default_lang = "en";
	  lang_prefix = $(this).attr("class").split(" ")[2];
			  
	  if (lang_prefix == default_lang) {			   
	    load_default();
	  } else {
	    load_selected_language();
          }
			 
	  function load_default() {
	    doGoogleLanguageTranslator(default_lang + "|" + default_lang);
	  }
			 
	  function load_selected_language() {
	    doGoogleLanguageTranslator(default_lang + "|" + lang_prefix);
	  }
        });

        if ($ ("body > #google_language_translator").length == 0) {
          $("#glt-footer").html("<div id='google_language_translator'></div>");
        }
      });
    </script>

    <div id='glt-footer'></div><script type='text/javascript'>function GoogleLanguageTranslatorInit() { new google.translate.TranslateElement({pageLanguage: 'en', autoDisplay: false}, 'google_language_translator');}</script><script type='text/javascript' src='//translate.google.com/translate_a/element.js?cb=GoogleLanguageTranslatorInit'></script><link rel='stylesheet' id='foogallery-template-owl-carousel-css'  href='http://canflex.oakharborwebdesign.com/wp-content/plugins/foogallery-owl-carousel-template/css/gallery-owl-carousel.css?ver=4.2.1' type='text/css' media='all' />
<script type='text/javascript' src='http://canflex.oakharborwebdesign.com/wp-includes/js/comment-reply.min.js?ver=4.2.1'></script>
<script type='text/javascript' src='http://canflex.oakharborwebdesign.com/wp-content/plugins/foogallery-owl-carousel-template/js/gallery-owl-carousel.js?ver=4.2.1'></script>

<script type='text/javascript'>
	//<![CDATA[
    ml(document).ready(function() { 
    	ml('html').MagicLiquidizerTable({ whichelement: 'table', breakpoint: '780', table: '1' })
    })
	//]]>
</script>
    	

</body>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
tiabradford1984Author Commented:
Thank you.  I have been trying to resolve this issue for months now.  I was only able to get it to display by:

1.  Loading jquery library in the head.
2.  Moving an older script by the previous developer to the head
3.  Moving the existing scripts that were in the footer to the head.  

Even with the scripts loading in the head, it does not seem to be affecting the load time too much.

This is how the header.php is loading now.

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?><!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title><?php wp_title(''); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/jquery.sidr.css">
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/foundation.css">
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/app.css">
<?php if ( is_front_page() ) { ?>
<?php } else { ?>
<?php } ?>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="apple-touch-icon" href="<?php bloginfo('template_url'); ?>/touch-icon.png" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
	// $(document).ready(function () {
	jQuery(document).ready(function ($) { 
	
		// MOBILE MENU
		$("#sidr").hide();
		$("#sidr").fadeTo( "slow", 0.98 );
		$("#sidr a").click(function(event){
			$('#sidr').animate({scrollTop:0});
		});
		$("#sidr ul li").has("ul").find("a").click(function(event){
			$(this).next('ul').slideToggle(300);
			$('#sidr a').removeClass('active');
			// $(this).parent("li").find("a:first-child").addClass("active");
			$(this).addClass('active');
		});
		$("#sidr > ul > li > a").click(function(event){
			$("#sidr > ul > li > a").not(this).next('ul').slideUp(300);
		});
		$("#sidr > ul > li > ul > li > a").click(function(event){
			$("#sidr > ul > li > ul > li > a").not(this).next('ul').slideUp(300);
		});
		$(".showhidemenu").click(function(event){
			$('#sidr').toggleClass('open');
		});
		$(".show-photo-gallery").click(function(event){
			$('#photo-gallery').slideDown(300);
			$('#photos-slider').owlCarousel_old({
			loop:false,
			margin:10,
				items: 4,
				nav: false,
				dots: true,
			responsiveClass:true,
			responsive:{
				0:{
					items:1,
								slideBy: 1
				},
						767:{
					items:2,
								slideBy: 2
				},
				992:{
					items:4,
								slideBy: 4
				}
			}
			});
			$('#video-gallery').slideUp(300);
		});
		$(".show-video-gallery").click(function(event){
			$('#photo-gallery').slideUp(300);
			$('#video-gallery').slideDown(300);
			$('#video-listing').owlCarousel_old({
			loop:false,
			margin:10,
				items: 4,
				nav: false,
				dots: true,
			responsiveClass:true,
			responsive:{
				0:{
					items:1,
								slideBy: 1
				},
						767:{
					items:2,
								slideBy: 2
				},
				992:{
					items:4,
								slideBy: 4
				}
			}
			});
		});
		// MOBILE MENU END
	
		// AUTO RESIZE VIDEOS
		$("iframe").wrap("<div class='flex-video'/>");
		// AUTO RESIZE VIDEOS END
	});
</script>
<script src="<?php bloginfo('template_url'); ?>/js/modernizr.foundation.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/foundation.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/app.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/fastclick.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/smoothscroll.js"></script>
<?php
if ( is_user_logged_in() ) {
?>
<style>
@media handheld, only screen and (max-width: 767px) {
html {margin-top:0px !important;}
}
</style>
<?php }
else { ?>
<?php } ?>
<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<script src="<?php bloginfo('template_url'); ?>/js/respond.min.js"></script>
<![endif]-->
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );
	wp_head();
?>
<?php wp_head(); ?>
</head>

Open in new window


This is how the footer appears now.

<!-- MOBILE NAVIGATION END -->

<?php if ( is_front_page() ) { ?>
<?php } else { ?>
<?php } ?>

<script>
	$(function() {
	    FastClick.attach(document.body);
	});
</script>

<?php
	wp_footer();
?>

Open in new window


This is the gallery now
http://canflex.oakharborwebdesign.com/foo-owl-carousel/

Thank you.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
This is a simple example.  Option 1.  Notice style sheet loads first  (bootstrap css loads before bootstrap js) and my custom jquery is last.
http://jsbin.com/roxepeloze/1/edit
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script>
    $(function(){
      $('#result').html('Right or Bottom');
    });
  </script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="row">
  <div id="left" class="col-sm-6">Left Or top</div>
  <div id="result" class="col-sm-6">
   
  </div>
 </div>
</body>
</html>

Open in new window

Option 2 notice jquery loads first, then the bootstrap(library) then my custom jquery) while css stays in the  head section at the top
http://jsbin.com/roxepeloze/2/edit
<!DOCTYPE html>
<html>
<head>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="row">
  <div id="left" class="col-sm-6">Left Or top</div>
  <div id="result" class="col-sm-6">
   
  </div>
 </div>
  <script src="//code.jquery.com/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script>
    $(function(){
      $('#result').html('Right or Bottom');
    });
  </script>
</body>
</html>

Open in new window

Option 3, my jquery code loads after the jquery library.  Notice the right side/bottom does not appear.  This is because I am using jquery code before I load the jquery library.

http://jsbin.com/roxepeloze/3/edit
<!DOCTYPE html>
<html>
<head>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="row">
  <div id="left" class="col-sm-6">Left Or top</div>
  <div id="result" class="col-sm-6">
   
  </div>
 </div>

  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script>
    $(function(){
      $('#result').html('Right or Bottom');
    });
  </script>
    <script src="//code.jquery.com/jquery.min.js"></script>
</body>
</html>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.

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.