Support » Plugin: FooGallery Owl Carousel Template » Stage, controls and script missing from plugin code

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Matt Cromwell

    (@webdevmattcrom)

    Hi there,

    Thanks for all the details. Here’s a couple things to help get us closer to understanding why that’s happening on that site:

    1) How are you outputting the gallery on that page? I assume via the shortcode, but in a template, or a widget, or directly in the content? If in the content, can you switch to “Text” mode and make sure there’s no other tags surrounding the shortcode?

    2) Do you have the latest version of FooGallery and Owl Carousel installed?

    3) There was a bug where the WRONG version of Owl was being installed from within FooGallery. Make sure the author of Owl Carousel says Matt Cromwell.

    4) Have you disabled all plugins except FooGallery and Owl Carousel to see if it then works?

    Let me know how that goes.

    Thread Starter tiabradford

    (@tiabradford)

    Hi Matt,

    1. I am using the shortcode to put the gallery directly in the page text editor. There is no other code/tags around the shortcode in Text mode.

    2. Yes I have the latest version of FooGallery and FooGallery Owl Carousel installed.

    3. You are listed as the author of FooGallery Owl Carousel.
    http://canflex.howitworks.com/wp-content/uploads/2015/matt3.PNG
    I am taking over this site from a previous developer. He used Owl Carousel (Jquery Version) to display the sponsors listed on the front page homepage of the site. I am using FooGallery Owl Carousel Plugin for WordPress.

    4. Yes, I have tried disabling all plugins except FooGallery and Owl Carousel. It did not eliminate the issue.

    Thank you,
    Tia

    Plugin Author Matt Cromwell

    (@webdevmattcrom)

    Hi Tia,

    If you disabled all plugins except FooGallery and Owl, then the problem is with the theme. Can you try switching to a different theme then make sure to go into the Gallery and save it again then refresh the page it is on. It should then appear just fine.

    Also, what version of WP is the site on?

    If it works correctly at that point, send the theme to me (you have my email address). I’ll see what I find there.

    If it DOESN’T work correctly then, then there’s a problem with your environment. In that case also email me and we’ll see where we go from there.

    Thread Starter tiabradford

    (@tiabradford)

    I am getting in contact with the original developer to test the plugin with a different theme. He has setup the admin backend to not allow the theme to be changed. So I must wait for his response before moving on.

    In the mean time I am using WordPress version 4.1.

    Thank you,
    Tia

    Thread Starter tiabradford

    (@tiabradford)

    Hello,

    Finally got in touch with the original developer. The plugin works fine with the an alternate theme. I used Twenty Twelve. So it looks like the issue is specific to the theme.

    I will send you the theme.

    Tia

    Plugin Author Matt Cromwell

    (@webdevmattcrom)

    Hi Tia,

    I got your email. Will be looking into it, but I’d expect a reply early next week at the earliest.

    Thread Starter tiabradford

    (@tiabradford)

    Thank you,

    I look forward to hearing from you.

    Thread Starter tiabradford

    (@tiabradford)

    I’ve been trying to narrow down the issue.

    I am having trouble getting a script to load for with a custom theme made by another developer. Therefore it does not display on the page.

    The custom theme is based off of the Twenty Ten Theme.

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

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

    I made a different page where I stuck the script in manually to the footer to get it to show. This only works when I put in the specific ID# of the gallery. In this case #1507) I know this is not the correct way to do this, but I wanted to see if I could even get the carousel to show at all.

    canflex.oakharborwebdesign.com/test-page/

    This is what I put in the footer, I took this script from a different site where it was displaying correctly.
    /* The Owl Initialization Script
    /* The first lines conditionally show the slide animation */
    jQuery(function($){
    $(‘#foogall-1507’).owlCarousel({
    items: 3,
    nav:true,
    margin: 10,
    loop:true,
    autoplay: false,
    autoplaySpeed: 4000,
    smartSpeed:250,
    navSpeed: 1250,
    autoplayHoverPause: true,
    lazyLoad: true,
    autoWidth: 0 });
    });
    </script>

    Steps I have taken:

    1. Turned off all other plugins except foogallery and owl carousel. (Did not work)
    2. Switching themes (Worked in the other theme)
    3. Putting the script link in the header (caused the top half of site to disappear)
    4. Turning the FooBox plugin’s version of Jquery off (did not work)
    5. Made sure the script link to jquery was present and using an updated version.

    So, I have no idea why the initialization script will not run on any site with this theme.

    Would appreciate any insight you may have.

    Tia

    Plugin Author Matt Cromwell

    (@webdevmattcrom)

    Hi Tia,

    Thanks for all that detail, that helps me see the problem in very good detail.

    I notice there’s another javascript initialization that is also calling OwlCarousel on that page. It’s targeted at #photos-slider. Can you disable the plugin that is outputting that? I think it’s related to your mobile menu.

    Thread Starter tiabradford

    (@tiabradford)

    Hi,

    Those divs were originally used for the Advanced Custom Fields plugin. Since the client had a design change, they were no longer needed. The plugin was already deactivated. I see there is a script remaining in the footer referring to them. I have commented them out, but the carousel still does not display. Using the Firefox debugger I see this error

    TypeError: $(…).owlCarousel is not a function foo-owl-carousel:345:0

    Not sure what this means.

    Tia

    Thread Starter tiabradford

    (@tiabradford)

    I resolved my issue. I thought I would post it here in case anyone else ever has this issue.

    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>

    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();
    ?>

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

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Stage, controls and script missing from plugin code’ is closed to new replies.