Ken Burns Effect in Oxygen

This members-only tutorial provides the steps to implement Subtle Slideshow jQuery script for Ken Burns effect in Oxygen.

Caveats:

1. In smaller viewports some portions of the images might be cut off at the left and right. It is possible to add custom CSS (covered in the tutorial) to make the entire image fit in the viewport but then the (white) background will appear around the images. You will then need to either use transparent png images or jpg images that all have the same background color and set this background color for #slideshow in your media query (for say, 768px).
2. This jQuery script was designed to be used full-screen. If you want to use it like a "hero" with other content above/below the Ken Burns slideshow some tweaks are needed (covered in the tutorial). One limitation in this scenario is that you would only have to use left or right animations but not the others like up, down, in and out.

In this example we shall set up the Ken Burns slider on the homepage.

Step 1

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to site's /wp-content/plugins/my-custom-functionality-master.

Upload subtle-slideshow.css to the plugin's assets/css directory.

Upload jquery.subtle-slideshow.js to the plugin's assets/js directory.

Create a file named say, subtle-slideshow-init.js in the above location having:

(function ($) {

    $('#slides').slideshow({
        randomize: true,            // Randomize the play order of the slides.
        slideDuration: 6000,        // Duration of each induvidual slide.
        fadeDuration: 1000,         // Duration of the fading transition. Should be shorter than slideDuration.
        animate: true,              // Turn css animations on or off.
        pauseOnTabBlur: true,       // Pause the slideshow when the tab is out of focus. This prevents glitches with setTimeout().
        enableLog: false,           // Enable log messages to the console. Useful for debugging.
        slideElementClass: 'slide', // This is also defined in the CSS!
        slideshowId: 'slideshow'    // This is also defined in the CSS!
    });

})(jQuery);

By default, slides will be shown in random order. To turn this off, set randomize property's value to false in the above.

Edit plugin.php and add the following inside the custom_enqueue_files() function: