ThemeShaper Forums » Thematic

[closed]

wp_enqueue_script/JS/function

(14 posts)
  • Started 2 years ago by d_rec
  • Latest reply from helgatheviking
  • This topic is resolved
  1. I've been trying to get Nivo Slider work inside my childtheme by following along with http://return-true.com/2010/09/getting-jquery-nivo-slider-to-work-inside-your-wordpress-theme/ and using Jquery in Thematic Demystified http://forums.themeshaper.com/topic/jquery-in-thematic-demystified as my reference. I have a feeling the way I'm trying to call the scripts and styles required is not right.

    define('JS',get_bloginfo('stylesheet_directory') );
    
    // Enqueue Javascripts
    function my_scripts() {
    if ( !is_admin() ) {//use google's jquery
    	wp_deregister_script( 'jquery' );
    	wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js');
    	wp_enqueue_script('jquery');
    	wp_enqueue_script('nivoslider', JS .'/js/jquery.nivo.slider.pack.js', 'jquery', '2.1');
    	}
    }
    add_action('template_redirect', 'my_scripts');
    
    //load css nivo styles
    function slide_styles(){
    if ( !is_admin() ) {
    	wp_enqueue_style('nivoslider', get_bloginfo('stylesheet_directory') .'/js/nivo-slider.css', false, '2.1');
    	wp_enqueue_style('nivoslider-custom', get_bloginfo('stylesheet_directory') .'/js/custom-nivo-slider.css', 'nivoslider', '1.0');
        }
    }
    add_action('teplate_redirect', 'slide_styles');

    and calling the script on my functions.php

    function my_script(){ 	?>
    
    	<script type="text/javascript">
    	//<![CDATA[
    
    	jQuery.noConflict();
    	jQuery(document).ready(function($) {
    
    <?php if(is_front_page()){ ?>
    	jQuery(window).load(function() {
    	jQuery('#slider').nivoSlider({
    		effect:'random', //Specify sets like: 'fold,fade,sliceDown'
    		slices:15,
    		animSpeed:500, //Slide transition speed
    		pauseTime:5000,
    		startSlide:0, //Set starting Slide (0 index)
    		directionNav:true, //Next & Prev
    		directionNavHide:true, //Only show on hover
    		controlNav:true, //1,2,3...
    		keyboardNav:true, //Use left & right arrows
    		pauseOnHover:true, //Stop animation while hovering
    		captionOpacity:0.8, //Universal caption opacity
    
    <?php } ?>
    
    	}); //end document ready functions
    });
    
    	/* ]]> */
    	</script>
    
    <?php }
    add_action('template_redirect', 'my_script');

    Now if I replace the jQuery below is_front_page with this; $('body').css('backgroundColor','red'); the front page goes red. Which makes me think it's the way I'm calling the scripts and styles - tried wp_head, wp_print_scripts. When I view page source I can see 5 posts that should be displayed with the slider effect. Here's my template page;

    <?php
    /*
    Template Name: Front Page
    
    */
    ?>
    
    <?php get_header(); ?>
    	<div id="content" >
    
             <div id="slider-wrapper">
              <div id="slider">
            	<?php
    				$tmp = $wp_query; $wp_query = new WP_Query('posts_per_page=5&category_name=slide');
    				if(have_posts()) : while(have_posts()) : the_post();
    			?>
                	<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('nivothumb'); ?></a>
            	<?php endwhile; endif; $wp_query = $tmp; ?>
                </div><!-- close #slider -->
             </div>
    	    </div> <!-- /content -->
    
    <?php get_footer(); ?>
    Posted 2 years ago #
  2. you are wrapping the jquery(load) in jquery(document).ready . basically in jquery there is an either/or (load or document ready... and there might be a few other options, i'm not jquery expert) regarding when to start running the scripts. i'd say 85-90% of the time the document ready method works... but nivo requires (load) (as well as jscrollpane and lets just say i pulled out a lot of hair when it wouldn't work w/ document ready)

    here is the script i am currently using on the homepage at: http://www.chicagointerhandball.com

    <script type="text/javascript">
        //<![CDATA[
            jQuery(window).load(function($) {
    		jQuery('#slider').nivoSlider({effect:'fade', directionNav:false, controlNav:false});
    
    		});
    
        /* ]]> */
        </script>
    Posted 2 years ago #
  3. have a live link so we can see if the scripts are including properly?

    Posted 2 years ago #
  4. Thanks Kathy. Tried your code and no luck. Could it be my calling of the scripts?

    Sun's almost up so I should stop playing/learning code. Maybe daylight might bring my answer.

    Posted 2 years ago #
  5. http://drecart.com/contact/client-side/playground/ if password protected it's; nivoslider

    I quickly uploaded/set-up this page plus JS/CSS on my site for return true;

    Posted 2 years ago #
  6. Might not be the only thing wrong, but you have:

    add_action('teplate_redirect', 'slide_styles');

    and it doesn't appear your stylesheet for the slider is being loaded. Change it to: 'template_redirect'

    You also have some javascript appearing before the doctype declararion and I expect that has to do with both document.ready and document.load being used as noted.

    -Jeff

    Posted 2 years ago #
  7. you'd be amazed at how much clearer things look after sleeping on it.... all those scattered thoughts coalesce/integrate and what was taking you hours at night takes you 20 minutes in the morning w/ fresh eyes.

    i this to you at paul's site, but you have:

    <script type="text/javascript">
        //<![CDATA[
    
        jQuery.noConflict();
    
        }); //end document ready functions
    drecart.com:9Uncaught SyntaxError: Unexpected token }
    });
    
        /* ]]> */
        </script>

    quite randomly in your header. this is totally breaking everything. also, you do not appear to be loading the nivo stylesheet.

    Posted 2 years ago #
  8. @Kathy Jeff found the most likely reason for my styles not being loaded. Does the function look about right? Playground was rushed up for Paul to see and I've taken it down now as it was messing with my styles throwing huge amount of white space at the bottom.

    @Jeff That wouldn't help.....Time to double check.

    After viewing my functions.php of my live site, I think it's time I renew this. I think I could write a cleaner looking bit of code now, plus some functions are now redundant due to WP Menus. Hopefully I'll figure this out this week.

    Thanks for your help,
    derek

    Posted 2 years ago #
  9. I think I got it working locally. Looks like my if ( !is_admin() ) { was a problem to. I'll keep learning from this forum and WP Alchemy is next on my list. The code that works;

    function theme_add_scripts() {
        wp_deregister_script( 'jquery' );
    	wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js');
    	wp_enqueue_script('jquery');
        wp_enqueue_script('nivoslider', get_bloginfo('stylesheet_directory').'/js/jquery.nivo.slider.pack.js', 'jquery', '2.1');
    }
    add_action('template_redirect', 'theme_add_scripts');
    
    //load css nivo styles
    function theme_add_styles() {
    	wp_enqueue_style('nivoslider', get_bloginfo('stylesheet_directory').'/js/nivo-slider.css', false, '2.1');
    	wp_enqueue_style('nivoslider-custom', get_bloginfo('stylesheet_directory').'/js/custom-nivo-slider.css', 'nivoslider', '1.0');
    }
    add_action('template_redirect', 'theme_add_styles');
    
    // Featured Image/Thumbnail SlideShowPro
    if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size(588, 250, true); // default Post Thumbnail dimensions (cropped)
    add_image_size('nivothumb', 900, 320, true);//nivothumb
    }
    
    function my_slide(){?>
    
    <script type="text/javascript">
    jQuery(window).load(function() {
    	jQuery('#slider').nivoSlider({
    		effect:'random', //Specify sets like: 'fold,fade,sliceDown'
    		slices:15,
    		animSpeed:500, //Slide transition speed
            pauseTime:3000,
            startSlide:0, //Set starting Slide (0 index)
            directionNav:true, //Next & Prev
            directionNavHide:true, //Only show on hover
            controlNav:true, //1,2,3...
            controlNavThumbs:false, //Use thumbnails for Control Nav
            controlNavThumbsFromRel:false, //Use image rel for thumbs
            controlNavThumbsSearch: '.jpg', //Replace this with...
            controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
            keyboardNav:true, //Use left & right arrows
            pauseOnHover:true, //Stop animation while hovering
            manualAdvance:false, //Force manual transitions
            captionOpacity:0.8, //Universal caption opacity
            beforeChange: function(){},
            afterChange: function(){},
            slideshowEnd: function(){}, //Triggers after all slides have been shown
            lastSlide: function(){}, //Triggers when last slide is shown
            afterLoad: function(){} //Triggers when slider has loaded
    	});
    });
    </script>
    
    <?php }
    add_action('wp_footer', 'my_slide');
    Posted 2 years ago #
  10. that code looks good to me.

    Posted 2 years ago #
  11. Funny, I spent a whole day trying to figure out Nivo... I originally got stumped on some lame formatting errors from auto generated WP tags when I was testing, so I got off on the wrong track and was trying to fix things that weren't broke.

    Wish I had seen this post earlier, lol. I ended up scraping most of what I had and used Paul Robinson's code also, similar to yours. http://scottnix.com/test2/

    Now back to shortcodes, which are getting less fun by the day.

    Posted 2 years ago #
  12. but, but, but... shortcodes are fun! ;) paul has some great tuts at his site.

    Posted 2 years ago #
  13. HTV I'm not seeing any Nivo action on http://www.chicagointerhandball.com, I'm assuming in the header?

    Easy Nivo Slider plugin ideally would make a custom sized slider from photos attached to the post or page, but I'm unable to change the type in customizations (started a new post on that one)

    ScottNix counting on you slogging through shortcodes!

    Posted 2 years ago #
  14. it actually is there now.... months later yes. only ever had 1 image before so there was no rotation.

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.