Utility - Bootstrap Tour
Plugin Information
Quick and easy product tours with Twitter Bootstrap Popovers.
| Class | Description |
|---|---|
| Plugin Name: | Bootsrap Tour |
| Author: | Ulrich Sossou |
| License: | MIT licensed |
| Website: | http://bootstraptour.com/ |
| Git Branch: | sorich87/bootstrap-tour |
| Dependencies: |  |
<link href="vendor/plugins/bstour/bootstrap-tour.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/bstour/bootstrap-tour.js"></script>
Basic Tour
Panel 1
Panel 2
Copy
<!-- Tour Activation Btn -->
<button class="btn btn-primary" id="tour_start" type="button">Begin Tour</button>
<!-- Tour Steps -->
<div class="row">
<div class="col-md-6">
<div class="panel" id="tour-item1">
<div class="panel-heading">
<span class="panel-title"> Panel 1</span>
</div>
<div class="panel-body" style="min-height: 100px;">
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel" id="tour-item2">
<div class="panel-heading">
<span class="panel-title"> Panel 2</span>
</div>
<div class="panel-body" style="min-height: 100px;">
</div>
</div>
</div>
</div>
Copy
// Create Tour steps
var tour = new Tour({
steps: [
{
element: "#tour-item1", // item selector
title: "Tour item title!", // title
content: "I'm the content", // content
placement: 'top' // left, right, top, bottom
},
{
element: "#tour-item2",
title: "Tour item title!",
content: "I'm the content",
placement: 'top'
}
]
});
// Start Tour on click
$('#tour_start').on('click',function(){
tour.restart();
});
Tour Backdrop
Panel 1
Panel 2
Copy
<!-- Tour Activation Btn -->
<button class="btn btn-primary" id="tour_start" type="button">Begin Tour</button>
<!-- Tour Steps -->
<div class="row">
<div class="col-md-6">
<div class="panel" id="tour-item1">
<div class="panel-heading">
<span class="panel-title"> Panel 1</span>
</div>
<div class="panel-body" style="min-height: 100px;">
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel" id="tour-item2">
<div class="panel-heading">
<span class="panel-title"> Panel 2</span>
</div>
<div class="panel-body" style="min-height: 100px;">
</div>
</div>
</div>
</div>
Copy
// Create Tour steps
var tour = new Tour({
backdrop: true, // can mask content in a modal
steps: [
{
element: "#tour-item1", // item selector
title: "Tour item title!", // title
content: "I'm the content", // content
placement: 'top' // left, right, top, bottom
},
{
element: "#tour-item2",
title: "Tour item title!",
content: "I'm the content",
placement: 'top'
},
]
});
// Start Tour on click
$('#tour_start').on('click',function(){
tour.restart();
});
Tour Backdrop
Panel 1
Panel 2
Copy
<!-- Tour Activation Btn -->
<button class="btn btn-primary" id="tour_start" type="button">Begin Tour</button>
<!-- Tour Steps -->
<div class="row">
<div class="col-md-6">
<div class="panel" id="tour-item1">
<div class="panel-heading">
<span class="panel-title"> Panel 1</span>
</div>
<div class="panel-body" style="min-height: 100px;">
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel" id="tour-item2">
<div class="panel-heading">
<span class="panel-title"> Panel 2</span>
</div>
<div class="panel-body" style="min-height: 100px;">
</div>
</div>
</div>
</div>
Copy
// Create Tour steps
var tour = new Tour({
steps: [
{
element: "#tour-item1", // item selector
title: "Tour item title!", // title
content: "I'm the content", // content
placement: 'top' // left, right, top, bottom
},
{
element: "#tour-item2",
title: "Tour item title!",
content: "I'm the content",
placement: 'top'
},
],
onStart: function(tour) { // On Tour Start
alert('This is an "onStart" callback');
},
onNext: function(tour) { // On Tour Next Item
alert('This is an "onNext" callback');
},
onPrev: function(tour) { // On Tour Prev Item
alert('This is an "onPrev" callback');
},
onEnd: function(tour) { // On Tour Complete
alert('This is an "onEnd" callback');
}
});
// Start Tour on click
$('#tour_start').on('click',function(){
tour.restart();
});
Utility - Waypoints
Plugin Information
Waypoints is the easiest way to trigger a function when you scroll to an element.
| Class | Description |
|---|---|
| Plugin Name: | Waypoints |
| Author: | Caleb Troughton |
| License: | MIT licensed |
| Website: | http://imakewebthings.com/ |
| Git Branch: | imakewebthings/waypoints |
| Dependencies: | |
None Required
<script src="vendor/plugins/waypoints/jquery.waypoints.min.js"></script>
Method 1: From an HTML element
Copy
<a class="test-popup-link btn btn-primary" href="path-to-image.jpg">Open popup</a>
Copy
$('.test-popup-link').magnificPopup({
type: 'image'
// other options
// gallery:{enabled:true}
});
Extended Information
For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.
| Class | Description |
|---|---|
| Documentation: | http://dimsemenov.com/docs |
| Advanced Examples: | http://codepen.io/collection/nLcqo/ |
Utility - Highlight.js
Plugin Information
A clean, lightweight javascript syntax highlighter.
| Class | Description |
|---|---|
| Plugin Name: | Highlight.js |
| Author: | Ivan Sagalaev |
| License: | MIT licensed |
| Website: | https://highlightjs.org/ |
| Git Branch: | isagalaev/highlight.js |
| Dependencies: | |
<link href="vendor/plugins/highlight/styles/github.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/highlight/highlight.pack.js"></script>
Basic Init
<button type="button" class="btn btn-primary">Example</button>
Copy
<a class="test-popup-link btn btn-primary" href="path-to-image.jpg">Open popup</a>
Copy
// Init Highlight.js Plugin
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
Extended Information
For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.
| Class | Description |
|---|---|
| Documentation: | http://dimsemenov.com/docs |
| Advanced Examples: | http://codepen.io/collection/nLcqo/ |