Slider Revolution WP
09.27.2016
Using Slider Revolution with Ajax Sites
Example for loading Slider Revolution in pages that are loaded via Ajax.
- Article Note:
This article is for advanced developers. What you do with the information here is up to you, but hopefully it will assist with any Ajax loading issues you may be encountering with Slider Revolution during your theme development 🙂
Demo Setup:
- Setup a localhost WP installation
- Create some new pages, each containing a Slider Revolution
- Add these page’s to your site’s main navigation (WP Menu -> Appearance -> Menus)
- Install the TwentySixteen theme
- Install and activate this basic TwentySixteen child theme.
Child Theme Details:
- style.css includes CSS for the basic page transition preloader
- js/ajax_example.js converts the page’s main menu to Ajax-based loading
Quick view of custom Ajax-loading script:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
jQuery(document).ready(function() { var page = jQuery('#page'), menuItems = jQuery('#site-navigation .menu-item').on('click', function() { var $this = jQuery(this); // bounce if current page's menu item is clicked if($this.hasClass('current-menu-item') || page.hasClass('cj-loading')) return false; // update menu item styles menuItems.removeClass('current-menu-item'); $this.addClass('current-menu-item'); // show CSS-based page-change preloader page.addClass('cj-loading'); // retrieve new page's contents jQuery.ajax($this.children('a').attr('href')).done(function(data) { // hide preloader page.removeClass('cj-loading'); // load contents from new pages "#primary" div into current page's "#content" div jQuery('#content').html(jQuery(data).find('#primary')); }); // prevent normal link behavior return false; }); }); |
