Slider Revolution WP
09.27.2016
Deep Linking for Advanced Sliders
For sliders such as the Web Product Light demo, you can add deep-linking functionality using the slider's API along with some custom JavaScript.
1. Visit your slider's API section, and make note of your slider's "API Name".
2. Paste the following code into your slider's Custom JavaScript section, and then continue to #3 below for code editing instructions.
|
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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
/* ********************** */ /* BEGIN SETTINGS SECTION */ /* ********************** */ /* set your slider's api name here https://www.themepunch.com/revslider-doc/slider-settings/#api */ var apiName = revapi3; /* setup your deep-linking hashes here first part is the url hash you want to use, such as this example: https://www.site.com/#intro second part is the slide number that the hash would correspond to */ var hashes = { 'intro' : 1, 'examples' : 2, 'easytouse' : 3, 'buylicense': 4 }; /* ******************** */ /* END SETTINGS SECTION */ /* ******************** */ var newHash, firstRun, timer; function hashChanged() { var slideNumber; for(var hash in hashes) { if(hash === newHash) { slideNumber = hashes[hash]; break; } } if(!slideNumber) return; apiName.revshowslide(slideNumber); } /* Credit: https://developer.mozilla.org/en-US/docs/Web/Events/hashchange */ (function(window) { if('onhashchange' in window.document.body) return; var location = window.location, oldURL = location.href, oldHash = location.hash; setInterval(function() { var newURL = location.href, newHash = location.hash; if(newHash != oldHash && typeof window.onhashchange === 'function') { window.onhashchange({type: 'hashchange', oldURL: oldURL, newURL: newURL}); oldURL = newURL; oldHash = newHash; } }, 100); })(window); jQuery(window).on('hashchange', function(event) { clearTimeout(timer); event = event.originalEvent; newHash = event.newURL; if(event.oldURL === newHash) return; newHash = newHash.split('#')[1]; timer = setTimeout(hashChanged, 250); }); apiName.on('revolution.slide.onloaded', function() { var hash = document.URL.split('#')[1]; if(hash) { newHash = hash; hashChanged(); firstRun = true; } apiName.on('revolution.slide.onchange', slideChange); }); function slideChange(event, data) { if(firstRun) { firstRun = false; return; } var currentHash, currentSlide = data.slideIndex; for(var hash in hashes) { if(hashes[hash] === currentSlide) { currentHash = hash; break; } } if(currentHash === newHash) return; newHash = currentHash; window.location.hash = newHash; } |
3. Edit the "Settings Section" in the code.
In the custom script at the top you’ll see a “Begin Settings Section” and also an “End Settings Section” comment.
This is the only part of the script that needs to be edited.
The first part of the script to edit is this line:
|
1 2 3 |
var apiName = revapi3; |
Replace the “revapi3” part with whatever API Name is being used for your slider (see #1 above).
The second part of the script to edit is the “hashes” part:
|
1 2 3 4 5 6 7 8 9 10 |
var hashes = { 'intro' : 1, 'examples' : 2, 'easytouse' : 3, 'buylicense': 4 }; |
This is essentially a list of hash names that are each assigned a slide number.
For example, given the list above, using the “examples” hash as shown in the url below would load slide #2.
https://www.site.com/#examples
