Custom Code Porting & API Reference
Guide to custom PHP, CSS & JS deprecation, and transitioning to the new engine
Table of Contents
New Rendering Engine Philosophy
Our new rendering engine introduces an all-new paradigm into Slider Revolution.
We are transitioning into an utterly re-imagined system of lightweight, data-driven, demand-catered methodology. Data processing is being simplified and streamlined, both in terms of back- and front-end processing and in how it is exposed to you for leveraging in custom code.
The transition to the new rendering engine will be handled automatically in the background. This means that from your perspective while using the software, you should notice nothing but quicker, smoother, and all-around more excellent rendering.
That said, as much as we intend to handle the transition for you, some deprecations to legacy custom coding methods may help you become familiar with them.
We’d also like to explain how the transition will work behind the scenes and provide our roadmap for moving from legacy to new rendering engines across upcoming releases.
Deprecated Code
Deprecated Code Types
JavaScript
jQuery is being retired and replaced with our new dedicated JavaScript API.
Fallbacks have been put in place to minimize breaking change. However, we recommend transitioning to the new API as soon as possible.
Where possible, Slider Revolution will attempt to convert legacy custom jQuery code into JavaScript, which is suitable for the new rendering engine.
Where custom code is too complex for complete conversion, it will stay as it is. However, class names, selectors, and so on will be automatically parsed and replaced as far as possible.
Listeners
Where previously we used jQuery’s bind()
method, we will now instead use native JS listeners.
Methods and Events
Several methods and events have been replaced or removed, as well as new items introduced into the API.
PHP Filters
PHP global variables have been modified, a selection of PHP filters have been removed, and several PHP functions have been renamed/replaced.
CSS & HTML
All new CSS class names, HTML elements, and data structures are being introduced.
Where possible, code written into the Custom CSS window will be parsed, and legacy class or element names will be replaced with new ones.
Deprecation Notices
Notices letting you know if a deprecated item is used will be available in the console and the Slider Revolution admin area.
How the Transition will Work
The transition to the new rendering engine will happen automatically behind the scenes and should typically not require any manual intervention.
When a module is saved, it stores data in the forms used by both the legacy and new rendering engines.
When a module is loaded on the front end, Slider Revolution will first attempt to load data in the format used by the new rendering engine.
If data is unavailable in the new format, it will be fetched in the legacy format and upgraded on demand.
An option will also be made available to force use of the legacy renderer if it is required.
JavaScript Changes
Below, you will find a reference to JS methods and events as used in the deprecated SR6 Genesis API, and the new SR7 Velocity API methods and events that should be used in their place.
JavaScript Methods
SR6 Genesis Engine | SR7 Velocity Engine |
---|---|
revapi.revstart(); | revapi.start(); (if Api Wait set to on) |
revapi.revpause(); | revapi.pause(); |
revapi.revresume(); | revapi.resume(); |
revapi.revprev(); | revapi.prevSlide(); |
revapi.revnext(); | revapi.nextSlide(); |
revapi.revscroll(offset); | revapi.scroll(offset); |
revapi.revremoveslide(slideindex); | revapi.removeSlide(slidekey); |
revapi.revshowslide(2); | revapi.showSlide(2); Possible arguments: "last" – Last Slide"first" – First Slide"random" – Random Slide"id" – Slide with ID"+2" – 2 Slide further"-1" – 1 Slide back0 –100 – Slide with Index (0 – xx) |
revapi.revcallslidewithid('rs-1007'); | Use revapi.showSlide() instead |
revapi.revmaxslide(); | revapi.maxSlide(); Amount of Slides (Not only through navigation available slides) |
revapi.revcurrentslide(); | revapi.currentSlide(); Returns data: {index: 2, key: '281', order: 3} |
revapi.revlastslide(); | revapi.lastSlide(); The last available Slide due Navigation |
revapi.revredraw(); | revapi.redraw(); |
revapi.revkill(); | revapi.kill(); |
revapi.revGoToFrame({layerid:'',frame:'',children:true}) | revapi.playScene('layer','scene'); Example: revapi.playScene('SR7_1051_1-281-0','scene_1'); |
JavaScript Events
Events were previously provided via jQuery code using the bind()
function. These events will now be provided for use via native JavaScript listeners.
For example, rather than using:
revapi.bind("<eventname>",function (e,data) {
//custom code
});
You would now use:
document.addEventListener("<eventname>", function (e,data) {
//custom code
});
Below, you will find a rundown of each legacy jQuery event and the new JavaScript that will replace it.
SR6 Genesis Engine | SR7 Velocity Engine |
---|---|
revolution.slide.onloaded Legacy Usage revapi.bind("revolution.slide.onloaded",function (e) {}); | sr.module.ready Updated Usage Listener: document.addEventlistener("sr.module.ready", function(e) { … }); Returns data in Event: id: Module Id |
revolution.slide.onchange Legacy Usage revapi.bind("revolution.slide.onchange",function (e,data){ | sr.slide.afterChange Updated Usage Listener: document.addEventlistener("sr.slide.afterChange", function(e) { … }); Returns data in Event: id: Module Id |
revolution.slide.onpause Legacy Usage revapi.bind("revolution.slide.onpause",function (e,data) { | sr.slide.pause Updated Usage Listener: document.addEventlistener("sr.slide.pause", function(e) { … }); Returns data in Event: id: Module Id |
revolution.slide.onresume Legacy Usage revapi.bind("revolution.slide.onresume",function (e,data) { | sr.slide.resume Updated Usage Listener: document.addEventlistener("sr.slide.resume", function(e) {…}); Returns data in Event: id: Module Id |
revolution.slide.onvideoplay Legacy Usage revapi.bind("revolution.slide.onvideoplay",function (e,data) { ___ revolution.slide.onvideostop Legacy Usage revapi.bind("revolution.slide.onvideostop",function (e,data) { | sr.media.update Updated Usage Listener: document.addEventlistener("sr.media.update", function(e) { … }); Returns data in Event: id: Module Id |
revolution.slide. Legacy Usage revapi.bind("revolution.slide.onstop",function (e,data) { | sr.module.finished Updated Usage Listener: document.addEventlistener("sr.module.finished", function(e) { … }); Returns data in Event: id: Module Id |
revolution.slide.onbeforeswap Legacy Usage revapi.bind("revolution.slide.onbeforeswap",function (e,data) { | sr.slide.beforeChange Updated Usage Listener: document.addEventlistener("sr.slide.beforeChange", function(e) { … }); Returns data in Event: id: Module Id |
revolution.slide.onafterswap Legacy Usage revapi.bind("revolution.slide.onafterswap",function (e,data) { | sr.slide.afterChange Updated Usage Listener: document.addEventlistener("sr.slide.afterChange", function(e) { … }); Returns data in Event: id: Module Id |
revolution.slide.slideatend Legacy Usage revapi.bind("revolution.slide.slideatend",function (e) { | sr.slide.ended Updated Usage Listener: document.addEventlistener("sr.slide.ended", function(e) { … }); Returns data in Event: id: Module Id |
revolution.slide.layeraction Legacy Usage revapi.bind("revolution.slide.layeraction",function (e,data) { | sr.layer.action Updated Usage Listener: document.addEventlistener("sr.layer.action",function(e,data){ … }); Returns data in Event: id: Module Id |
RS_MODALOPENED Legacy Usage jQuery.fn.revolution.document.on('RS_MODALOPENED', function() { | sr.modal.loaded sr.modal.open sr.modal.close Updated Usage Listener: document.addEventlistener("sr.modal.loaded",function(e,data){ … }); Returns data in Event: id: Module Id |
PHP Changes
Below, you will find a reference to PHP globals, filters and functions as used in the deprecated SR6 Genesis Engine, and the new SR7 Velocity Engine code that should be used in their place.
PHP Globals
Global variables that were previously defined as global $<var>
have now been moved into $SR_GLOBALS
:
SR6 Genesis Engine | SR7 Velocity Engine |
---|---|
$rs_material_icons_css | $SR_GLOBALS['icon_sets']['Materialicons']['css'] |
$rs_material_icons_css_parsed | $SR_GLOBALS['icon_sets']['Materialicons']['parsed'] |
$fa_icon_var | $SR_GLOBALS['icon_sets']['FontAwesome'] |
$fa_var | $SR_GLOBALS['icon_sets']['FontAwesome'] |
$pe_7s_var | $SR_GLOBALS['icon_sets']['PeIcon'] |
$rs_css_collection | $SR_GLOBALS['collections']['css'] |
$rs_ids_collection | $SR_GLOBALS['collections']['ids'] |
$rs_js_collection | $SR_GLOBALS['collections']['js'] |
$revslider_fonts | $SR_GLOBALS['fonts'] |
$revslider_is_preview_mode | $SR_GLOBALS['preview_mode'] |
$revslider_save_post | $SR_GLOBALS['save_post'] |
$revslider_addon_notice_merged | $SR_GLOBALS['addon_notice_merged'] |
$revslider_animations | $SR_GLOBALS['animations'] |
$rs_loaded_by_editor | $SR_GLOBALS['loaded_by_editor'] |
$rs_preview_mode | $SR_GLOBALS['preview_mode'] |
$rs_do_init_action | $SR_GLOBALS['data_init'] |
$rs_slider_serial | $SR_GLOBALS['serial'] |
$rs_revicons | $SR_GLOBALS['icon_sets']['RevIcon'] |
$rs_double_jquery_script | $SR_GLOBALS['js_init'] |
PHP Filters Removed
revslider_set_template_slides
revslider_set_template_sliders
revslider_slide_initByTwitter_pre
revslider_slide_initByTwitter_post
PHP Functions
SR6 Genesis Engine PHP functions are deprecated as at version 6.7, and will be removed in version 7.0.
Removed
RevSliderSlider->getAllSliderAliases()
==> Deprecated
SR6 Genesis Engine | SR7 Velocity Engine |
---|---|
RevSliderAdmin->activate_plugin() |
|
RevSliderAdmin->deactivate_plugin() | RevSliderLicense->deactivate_plugin() |
RevSliderFunctions->getVal() | RevSliderFunctions->get_val() |
RevSliderFunctions->cleanStdClassToArray() | RevSliderFunctions->class_to_array_single() |
RevSliderOutput->isPutIn() | RevSlider7Output->check_add_to() |
RevSliderSlide->getID() | RevSliderSlide->get_id() |
RevSliderSlide->getSliderID() | RevSliderSlide->get_slider_id() |
RevSliderSlide->getImageUrl() | $this->image_url |
RevSliderSlide->setLayersRaw() | RevSliderSlide->set_layers_raw() |
RevSliderSlide->saveLayers() | RevSliderSlide->save_layers() |
RevSliderSlide->getParam() | RevSliderSlide->get_val($this->params) |
RevSliderSlider->getParam() | RevSliderSlider->get_param() |
RevSliderSlider->getParams() | RevSliderSlider->get_params() |
RevSliderSlider->getID() | RevSliderSlider->get_id() |
RevSliderSlider->getArrSliders() | RevSliderSlider->get_sliders() |
RevSliderSlider->initByMixed() | RevSliderSlider->init_by_mixed() |
RevSliderSlider->initByID() | RevSliderSlider->init_by_id() |
RevSliderSlider->initByAlias() methods and events | RevSliderSlider->init_by_alias() |
RevSliderSlider->getAlias() | RevSliderSlider->get_alias() |
RevSliderSlider->isAliasExistsInDB() | RevSliderSlider->check_alias() |
RevSliderSlider->getShortcode() | RevSliderSlider->get_shortcode() |
RevSliderSlider->getFirstSlideIdFromGallery() | RevSliderSlider->get_first_slide_id_from_gallery() |
RevSliderSlider->isSlidesFromPosts() | RevSliderSlider->is_posts() |
RevSliderSlider->isSlidesFromStream() | RevSliderSlider->is_stream() |
RevSliderSlider->getNumSlidesRaw() | RevSliderSlider->get_slides() |
RevSliderSlider->getNumSlides() | RevSliderSlider->get_slides() |
RevSliderSlider->getNumRealSlides() | RevSliderSlider->get_wanted_slides() |
RevSliderSlider->getTitle() | RevSliderSlider->get_title() |
RevSliderSlider->getArrSlidersShort() | RevSliderSlider->get_sliders_short() |
RevSliderSlider->initByDBData() | RevSliderSlider->init_by_data() |
RevSliderSlider->isAliasExists() | RevSliderSlider->alias_exists() |
RevSliderSlider->getArrSlideNames() | RevSliderSlider->get_slide_names() |
RevSliderSlider->getSlidesFromGallery() | RevSliderSlider->get_slides() |
RevSliderSlider->importSliderFromPost() | RevSliderSlider->import_slider() |
RevSliderSlider->deleteSlider() | RevSliderSlider->delete_slider() |
RevSliderSlider->getAllSliderForAdminMenu() | RevSliderSlider->get_slider_for_admin_menu() |
RevSliderSlider->getNumSlidesRaw() | RevSliderSlider->get_slides() |
RevSliderFront->putAdminBarMenus() | RevSliderFront->add_admin_bar() |
Output HTML & CSS Selector Changes
ID General Updates
Removed
rev_slider_1328_1_forcefullwidth
==> Deprecatedrev_slider_1328_1_wrapper
==> Deprecated
Equivalent
SR6 Genesis Engine | SR7 Velocity Engine | Notes |
---|---|---|
rev_slider_1328_1 | SR7_1328_1 | Module ID, if custom ID not manually set. |
slider-1328-slide-3443-layer-2 | SR7_1328_1-3443-2 | Layer ID, if custom ID not manually set. |
New
SR7 Velocity Engine | Notes |
---|---|
SR7_1328_1-135 | Slide ID, if custom ID not manually set. |
SR7_1328_1-pbar | Progress Bar ID. |
SR7_1328_1-134-5_audio_html5 | Media IDs (_audio or _video + _type ) |
Module General Tags
Removed
rs-fullwidth-wrap
==> Deprecatedrs-module-wrap
==> Deprecatedrs-carousel-space
==> Deprecated
Equivalent
SR6 Genesis Engine | SR7 Velocity Engine | Notes |
---|---|---|
rs-module | sr7-module | |
rs-fw-forcer | sr7-adjuster | |
rs-static-layers | Converted into Slides with classes like (.sr7-staticslide.sr7-staticslide-low and/or .sr7-staticslide.sr7-staticslide-high ) | |
div.tp-shadowcover | sr7-module-shadow | |
rs-slides | sr7-content | (Slides, Navigation (depending on Module type), Global (Static) Slides) |
rs-slide | sr7-slide | |
rs-dotted | on Canvas OR sr7-overlay | |
rs-carousel-wrap | sr7-carousel | |
rs-modal | sr7-modals | |
rs-modal-cRemovedover | sr7-modal-underlay |
New
SR7 Velocity Engine | Description |
---|---|
sr7-module-bg |
Layer Tags
Removed
rs-sbg-px
==> Deprecated (Slide BG converted into Layer)rs-sbg-wrap
==> Deprecated (Slide BG converted into Layer)rs-layer-wrap
==> Deprecatedrs-group-wrap
==> Deprecatedrs-column-wrap
==> Deprecatedrs-row-wrap
==> Deprecated
Equivalent
SR6 Genesis Engine | SR7 Velocity Engine | Notes |
---|---|---|
rs-sbg | sr7-bg | (Layer) |
rs-layer-wrap.rs-parallax-wrap | sr7-px | |
rs-mask-wrap | sr7-mask | |
rs-group | sr7-grp | |
rs-layer[data-type="text"] | sr7-txt | |
rs-layer[data-type="button"] | sr7-btn | |
rs-layer[data-type="image"] | sr7-img | |
rs-layer[data-type="shape"] | sr7-shp | |
rs-layer[data-type="video"] | div.sr7-layer sr7-media.sr7-media | |
rs-poster | sr7-poster | |
rs-loop-wrap | sr7-loop | |
rs-dotted | on Canvas OR sr7-overlay | |
rs-zone | sr7-zone | (Converted Into Layer) |
rs-row | sr7-row | |
rs-column | sr7-col | |
rs-column-bg | sr7-col-bg |
New
SR7 Velocity Engine | Notes |
---|---|
sr7-row-con | (only if Mask, Loop, Parallax settings are enabled) |
sr7-col-con | (only if Mask, Loop, Parallax settings enabled) |
Navigation Tags
Removed
rs-progress-bar
==> Deprecated (Canvas)rs-progress-circle
==> Deprecated (Canvas)rs-progress-bg
==> Deprecated (Canvas)rs-progress-gap
==> Deprecated (Canvas)
Equivalent
SR6 Genesis Engine | SR7 Velocity Engine |
---|---|
rs-arrow | sr7-arrow |
rs-thumbs | sr7-thumbs |
rs-tabs | sr7-tabs |
rs-bullets | sr7-bullets |
rs-bullet | sr7-bullet |
rs-navmask | sr7-tt-mask |
rs-thumbs-wrap | sr7-thumbs-wrap |
rs-thumb | sr7-thumb |
rs-tabs-wrap | sr7-tabs-wrap |
rs-tab | sr7-tab |
rs-progress | canvas.sr7-pbar |
General Classes
Removed
.rs-ov-hidden
==> Deprecated.revslider-initialised
==> Deprecated.rev_redraw_on_blurfocus
==> Deprecated.rs-pxl-3
(0-15) ==> Deprecated.rs-modal-fullwidth
==> Deprecated.rs-toggled-content
==> Deprecated.rev_break_columns
==> Deprecated.rs-forceuntouchable
==> Deprecated.rs-safari
==> Deprecated.rs-fixedscrollon
==> Deprecated.rs-stickyscrollon
==> Deprecated.modalspinner
==> Deprecated.hideallscrollbars
==> Deprecated.rs-ISM
==> Deprecated.rs-tc-active
==> Deprecated.rs-tc-active
==> Deprecated.rs-stl-visible
==> Deprecated.rev-slidebg
==> Deprecated.rs-ii-o
==> Deprecated.rs-pelock
==> Deprecated.dddwrappershadow
==> Deprecated.dddwrapper-layertobggroup
==> Deprecated.rs-pxl-tobggroup
==> Deprecated.tp-parallax-container
==> Deprecated.rs-pxmask
==> Deprecated.rs_fake_cube
==> Deprecated.rs_fake_cube_wall
==> Deprecated.rs-apiready
==> Deprecated.videoisplaying
==> Deprecated.tp-blockmask_in
==> Deprecated.tp-blockmask_out
==> Deprecated.rs-waction
==> Deprecated.rs-wclickaction
==> Deprecated.tp-temporarydisabled
==> Deprecated.tp-scrollbelowslider
==> Deprecated.rs-go-fullscreen
==> Deprecated.rs-nav-element
==> Deprecated
Equivalent
SR6 Genesis Engine | SR7 Velocity Engine | Notes |
---|---|---|
.rs-forceoverflow (on rs-fullwidth-wrap ) | .sr7-overflow-force | (on rs-module ) |
.tp-shadowcover | Tag sr7-module-shadow | (Classes i.e. sr7-shdw-1) |
.dddwrapper | sr7-3dwrap.sr7-3dwrap-bg | |
.dddwrapper-layer | sr7-3dwrap.sr7-3dwrap-layers | |
.rs-forcehidden | .sr-force-hidden | |
.rs-touchhover | sr7-touchhover | (Tag) |
.tp-video-play-button | sr7-lrg-play | (Tag) |
.tp-revstop | sr7-lrg-pause | (Tag) |
Layer Classes
Removed
.rs-parallax-wrap
==> Deprecated.rs_html5vidbasicstyles
==> Deprecated.rs-layer-static
==> Deprecated (Global Layers).rs-on-sh
==> Deprecated.rs-on-car
==> Deprecated.rs-layer-video
==> Deprecated.rs-fsv
==> Deprecated.rs-fcr
==> Deprecated.rs-fcrt
==> Deprecated.rs-bcr
==> Deprecated
Equivalent
SR6 Genesis Engine | SR7 Velocity Engine | Notes |
---|---|---|
.rs-layer | .sr7-layer | |
.html5vid | .sr7-html5-video | |
.rs_splitted_lines | sr7_splitted_lines | (+_noanim ) |
.rs_splitted_words | sr7_splitted_words | (+_noanim ) |
.rs_splitted_chars | sr7_splitted_chars | (+_noanim ) |
.rs-layer-audio | sr7-hidden-audio |
Nav + Progress Classes
Removed
.noSwipe
==> Deprecated
Equivalent
SR6 Genesis Engine | SR7 Velocity Engine | Notes |
---|---|---|
.tp-leftarrow | .sr7-leftarrow | |
.tp-rightarrow | .sr7-rightarrow | |
.tparrows | .sr7-arrows | |
.tp-tabs-inner-wrapper | .sr7-ntiw | |
.tp-tabs-mask | .sr7-tabs-mask | |
.tp-tab-content | .sr7-tab-content | |
.tp-tab-image | .sr7-tab-img | |
.tp-tab-title | .sr7-tab-title | |
.tp-thumbs-inner-wrapper | .sr7-ntiw | |
.tp-thumbs-mask | .sr7-thumbs-mask | |
.tp-thumb-content | .sr7-thumb-content | |
.tp-thumb-image | .sr7-thumb-img | |
.tp-thumb-title | .sr7-thumb-title | |
.tp-bullet | .sr7-bullet | |
.selected | .selected | |
.tp-* | .sr7-* | In nav elements inner |
Important Data on Elements
Equivalent
SR6 Genesis Engine | SR7 Velocity Engine |
---|---|
rs-module -> data-slideactive | sr7-module -> data-current |
Other Tags
Removed
rs-cbg-mask-wrap
==> Deprecatedrs-bgvideo
==> Deprecatedrs-bg-elem
==> Deprecatedrs-loader
==> Deprecatedrs-sbg-effectwrap
==> Deprecatedrs-px-mask
==> Deprecated
Equivalent
SR6 Genesis Engine | SR7 Velocity Engine |
---|---|
cusli | cusli |