Small & Beautiful Guided Tours In jQuery - introJS
File Size: | 11.8 KB |
---|---|
Views Total: | 1278 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
introJS is a small (~1kb minified) jQuery guided tour plugin which can be used to introduce new features with a step-by-step guide for your web app.
How to use it:
1. Load the introJS plugin's script intro.min.js
after loading jQuery.
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha384-JUMjoW8OzDJw4oFpWIB2Bu/c6768ObEthBMVSiIx4ruBIEdyNSUQAjJNFqT5pnJ6" crossorigin="anonymous"> </script> <script src="intro.js"></script>
2. Create an array of JS objects containging elements and introductions.
const myTour = [{ "class":"masthead-brand", "msg":"Logo Here" },{ "class":"active", "msg":"Navigation Here" },{ "class":"cover-heading", "msg":"Page Title Here" },{ "class":"btn-lg", "msg":"Description Here" }]
3. Initialize the introJS and the plugin will do the rest. Possible parameters.
- myjsonarr: JSON array
- nextbtnclassname: CSS class for the next button
- closebtnclassname: CSS class for the close button
- enableScroll: enables page scroll
// initiateIntro(myjsonarr,nextbtnclassname,closebtnclassname,enableScroll) initiateIntro(myTour,'','',true);
This awesome jQuery plugin is developed by iamdshri. For more Advanced Usages, please check the demo page or visit the official website.