wp_register_script and wp_register_style when shortcode is used

Question

hi so I used a great tutorial off of http://scribu.net/wordpress/optimal-script-loading.html and I am having trouble loading the scripts when a shortcode called lightbox is used here is my code. I am at the page when it is called wanted to check with someone to see if it is properly written.

class fancy{
    static $add_script;

    static function init() {
        add_shortcode('lightbox', array(__CLASS__, 'handle_shortcode'));

        add_action('init', array(__CLASS__, 'register_script'));
        add_action('wp_footer', array(__CLASS__, 'print_script'));
    }

    static function handle_shortcode($atts) {
        self::$add_script = true;

        // actual shortcode handling here
    }

    static function register_script() {
    wp_register_script('fancy-wheel', get_stylesheet_directory_uri('/js/jquery.mousewheel-3.0.6.pack.js', __FILE__), array('jquery'), '3.06', true);
    wp_register_script('fancybox', get_stylesheet_directory_uri('/js/jquery.fancybox.js', __FILE__), array('jquery'), '1.0', true);
    wp_register_script('fancy-buttons', get_stylesheet_directory_uri('/js/jquery.fancybox-buttons.js', __FILE__), array('jquery'), '1.0', true);
    wp_register_script('fancy-media', get_stylesheet_directory_uri('/js/jquery.fancybox-media.js', __FILE__), array('jquery'), '1.0', true);
    wp_register_script('fancy-thumbs', get_stylesheet_directory_uri('/js/jquery.fancybox-thumbs.js', __FILE__), array('jquery'), '1.0', true);
    wp_register_style('fancy-css', get_template_directory_uri('/css/jquery.fancybox.css', __FILE__), array('css'), '1.0', true); 
    wp_register_style('fancy-buttons', get_template_directory_uri('/css/jquery.fancybox-buttons.css', __FILE__), array('css'), '1.0', true); 
    wp_register_style('fancy-thumbs', get_template_directory_uri('/css/jquery.fancybox-thumbs.css', __FILE__), array('css'), '1.0', true); 

}
static function print_script() {
    if ( ! self::$add_script )
        return;

    wp_print_scripts('fancy-wheel','fancybox','fancy-buttons','fancy-thumbs','fancy-css','fancy-buttons','fancy-thumbs');
    }
}

fancy::init();

Answer 1

Your scripts and styles all share the same handle, "fancybox", which should be unique, and I think that's your issue. Try this:

wp_register_script( 'mousewheel', get_stylesheet_directory_uri('/js/jquery.mousewheel-3.0.6.pack.js', __FILE__), array('jquery'), '3.06', true );
wp_register_script( 'fancybox-script', get_stylesheet_directory_uri('/js/jquery.fancybox.js', __FILE__), array('jquery'), '1.0', true );
wp_register_script( 'fancybox-pack', get_stylesheet_directory_uri('/js/jquery.fancybox.pack.js', __FILE__), array('jquery'), '1.0', true );
wp_register_script( 'fancybox-buttons', get_stylesheet_directory_uri('/js/jquery.fancybox-buttons.js', __FILE__), array('jquery'), '1.0', true );
wp_register_script( 'fancybox-media', get_stylesheet_directory_uri('/js/jquery.fancybox-media.js', __FILE__), array('jquery'), '1.0', true );
wp_register_script( 'fancybox-thumbs-script', get_stylesheet_directory_uri('/js/jquery.fancybox-thumbs.js', __FILE__), array('jquery'), '1.0', true );
wp_register_style( 'fancybox-style', get_template_directory_uri('/css/jquery.fancybox.css', __FILE__), array('css'), '1.0', true );
wp_register_style( 'fancybox-buttons', get_template_directory_uri('/css/jquery.fancybox-buttons.css', __FILE__), array('css'), '1.0', true );
wp_register_style( 'fancybox-thumbs-style', get_template_directory_uri('/css/jquery.fancybox-thumbs.css', __FILE__), array('css'), '1.0', true );

and then...

wp_print_scripts( array( 'mousewheel', 'fancybox-script', 'fancybox-pack', 'fancybox-buttons', 'fancybox-media', 'fancybox-thumbs-script', 'fancybox-style', 'fancybox-buttons', 'fancybox-thumbs-style' ) );