#012 - Slider Foundations | CSS-Tricks

We decide to go with the RoyalSlider for the slider on the homepage. I’ve long been a fan of the AnythingSlider, because I was part of it’s creation and I think it’s very powerful. However, I think it’s a bit long in the tooth these days not supporting touch events or fluid width environments very well. The RoyalSlider is nearly as powerful (API wise) and also supports touch and fluid-ness.

We have a bunch of photos from Jeff as his work, which is all we need content-wise for the slider.

We go through the process of downloading it and implementing the CSS and JS needed to make it work on our page.

Comments

frankspin

# February 5, 2013

To register stylesheets and javascript files in WordPress i use the following snippet. You can copy and paste it in your functions.php and edit it to fit your needs.

<?php
    // Enqueue scripts and styles
    // load the styles and scripts

    function scripts_important() {
    wp_register_script( ‘modernizr’, get_template_directory_uri() . ‘/js/vendor/modernizr-2.6.1-respond-1.1.0.min.js’, ’20121015′, false );
    wp_enqueue_script( ‘modernizr’ );
    }

    function enqueue_custom_script($form) {
    wp_register_script( ‘forms’, get_template_directory_uri() . ‘/js/forms.min.js’, array( ‘jquery’ ), ’20121015′, true );
    wp_enqueue_script( ‘forms’ );
    }

    function scripts_normal() {
    global $post_type;

    // remove default jQuery includes
    wp_deregister_script( 'jquery' );

    // register javascript files
    // get jQuery from Google CDN  
    wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js", false, null);

    wp_register_script( 'bootstrap', get_template_directory_uri() . '/js/vendor/bootstrap.min.js', array( 'jquery' ), '20120206', true );
    wp_register_script( 'lightbox', get_template_directory_uri() . '/js/jquery.fancybox.pack.js', array( 'jquery' ), '20120206', false );
    wp_register_script( 'plugins', get_template_directory_uri() . '/js/plugins.min.js', array( 'jquery' ),'20120206', true );


    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'bootstrap' );
    // load javascript file only on a specific post type
    if( 'activiteiten' == $post_type ) { wp_enqueue_script( 'lightbox' );};
    wp_enqueue_script( 'plugins' );
    }

    function theme_styles() {
    global $post_type;
    wp_register_style( ‘fonts’, ‘http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic’, ’20120208′, ‘all’ );
    wp_register_style( ‘bootstrap’, get_template_directory_uri() . ‘/css/bootstrap.min.css’, array(), ’20120208′, ‘all’ );
    wp_register_style( ‘lightbox’, get_template_directory_uri() . ‘/css/jquery.fancybox.min.css’, array(), ’20120208′, ‘all’ );
    wp_register_style( ‘main’, get_template_directory_uri() . ‘/css/main.min.css’, array(‘bootstrap’, ‘fonts’), ’20120208′, ‘all’ );

    wp_enqueue_style( 'fonts' );
    wp_enqueue_style( 'bootstrap' );
    wp_enqueue_style( 'main' );
    if( 'activiteiten' == $post_type ) { wp_enqueue_style( 'lightbox' );};
    }
    add_action( ‘wp_enqueue_scripts’, ‘scripts_important’, 5 );
    add_action(“gform_enqueue_scripts”, “enqueue_custom_script”, 10, 2);
    add_action( ‘wp_enqueue_scripts’, ‘scripts_normal’ );
    add_action( ‘wp_enqueue_scripts’, ‘theme_styles’ );

?>

Gary A

# February 7, 2013

What’s the best way to attach jQuery to the end of the body element?

kayla thompson

# May 6, 2013

I am a total newbie at js, and I am not using codekit for this project. At the point where you talk about prepending the document using codekit… what am I supposed to do if I’m not using codekit? can I just copy and paste the code from the royalslider.min.js file to the global.js file? Cause that didn’t work, I have done everything else correctly (or so I think) and it’s not looking the same at this point… HELP

bmacadam

# October 17, 2013

You are the master

Jesse Graupmann

# September 5, 2014

It’s worth noting that the advertised price of Royal Slider has increased to $14 & $22 for the WordPress version. If you use PayPal you’ll pay an extra $2 handling fee whereas if you don’t use PayPal you have to use their in-store credit which only comes in $20 & $30 chunks – forcing you to waste money.

Essentially, if this is the only thing you’ll purchase, then Royal Slider will cost you $16/$20 or $24/$30 (WordPress version).

Comments

Leave a Reply Cancel reply