Buy now
Tutorialize 1.3.1Tutorialize is a jQuery plugin that provides a simple and nice way to create tutorials that guide visitors around your site.
Highlight your features  •  Responsive  •  Ready in minutes  •  Lightweight and flexible  •  For cms, blog, e-commerce, product page
Demos & Samples
1. Welcome on Tutorialize
More than 40 options available. Run
2. Positions
13 slides position. Run
3. Colors
Define your own slides color. Run
4. Overlays
Highlight specific features of your page. Run
5. Auto Run
Run the slides automatically. Run
6. Multiple Contents
Videos, Images, Documents, Websites, etc. Run
7. Arrows
Define your own arrows. Run
8. Theming
Define your own theme. Run
9. Auto Scroll
Scroll to your slides selector automatically. Run
10. Keyboard Navigation
Keyboard slides navigation right and left. Run
11. Translation
Translate labels in your onw language. Run
12. Remember Visitors
Remember visitors current state. Run
13. Events
Trigger event onStart, onSlide and onStop. Run
14. Multiple Tutorialize
Run multiple instances of Tutorialize. Run
15. External Links
Call external links from slide. Run
Installation
Upload Tutorialize folder to your server and add the required files in your page (usually in the head section).
Options
Slide Property Default Description
slides

[{
 arrowOffset*: 0, // optional
 arrowPath*: './arrows/arrow-blue.png', // optional
 arrowSize*: 44, // optional,
 bgColor*: '#11a7df', // optional
 borderRadius*: '5px', // optional
 buttonBgColor*: '#0d8fbf', // optional
 buttonFontColor*: '#fff', // optional,
 content: ''
 fontColor*: '#fff', // optional,
 fontSize*: '13px', // optional,
 height*: 'auto', // optional,
 minWidth*: 80 // optional,
 minWidthCSS*: 160 // optional,
 overlayColor*: '#000' // optional,
 overlayMode*: 'none' // optional,
 overlayOpacity*: 0.5 // optional,
 overlayPadding*: 0 // optional,
 padding*: 15, // optional,
 position: 'center-center', // optional,
 selector: '' // The element to attach the slide
 title: '' // optional,
 width*: 200, // optional,
 onNext: null // optional
 onPrev: null // optional
 onSlide: null // optional
}]
				
Array of slides. Slide's properties are overrides from the global properties excepted for "content", "selector" and "title".

*Check the global properties for more details.
content The description of the slide. You can add any type of contents (text, image, iframe, etc...)
position center-center The position of the slide relative to the selector.

List of positions:
left-bottom, left-center, left-top, top-left, top-center, top-right, right-top, right-center, right-bottom, bottom-right, bottom-center, bottom-left, center-center.
selector html The selector is the DOM element where the slide is linked to. Selector can be defined by ID (#my-selector), class (.my-selector), etc...
onNext function(currentSlideIndex, slideData, slideDom){} Called on the next button click.
onPrev function(currentSlideIndex, slideData, slideDom){} Called on the previous button click.
onSlide function(currentSlideIndex, slideData, slideDom){} Called when the slide is running.
Global Property Default Description
arrowOffset 0 The offset to add in positive or negative to adjust the arrow position.
arrowPath './arrows/arrow-blue.png' Path of the arrow image. The arrow image is a single image containing the twelve possible positions.

List of positions:
1. right-top, 2. right-center, 3. right-bottom, 4. left-top, 5. left-center, 6. left-bottom, 7. top-left, 8. top-center, 9. top-right, 10. bottom-left, 11. bottom-center, 12. bottom-right.

! Please strictly follow this order if you create your own arrows !
arrowSize 44 Size of the arrow image. The arrow image must be a square like 16x16, 24x24, 48x48, ...
autoScroll true Scroll automatically to the slide position.
bgColor '#11a7df' Background color of slides
borderRadius '5px' Rounded borders of slides
buttonBgColor '#0d8fbf' Background color of the slide's buttons
buttonFontColor '#fff' Font color of the slide's buttons
effectDelay 500 Delay for slides transition and scrolling.
fontColor '#fff' Font color of the slides.
fontSize '13px' Font size of the slides.
keyboardNavigation true Navigate through slides using your keyboard Prev & Next.
height 'auto' Height of the slides.
labelEnd 'End' Label of the End button.
labelNext 'Next' Label of the Next button.
labelPrevious 'Previous' Label of the previous button.
minWidth 80 Minimum width of the slides. Under the minimum width, the slides will be automatically moved to the position "center-center"
minWidthCSS 160 Activate the minWidthCSS when the minWidth property reach "160" or less.
overlayColor '#000' Color of the overlay.
overlayOpacity 0.5 Opacity of the overlay
overlayPadding 0 Padding of the overlay. Visible only when overlayMode is set to 'focus'.
overlayMode none Overlay mode can be 'none', 'focus' or 'all'.
padding 20 Padding of the slides.
remember false Remember the state(current slide) of a visitor.
rememberKeyName 'tutorialize-storage' Name of the key set in localStorage.
rememberOnceOnly false If true the visitor will see only once the entire tutorial. Especially handy for Tutorialize auto started.
runEnd 'stop' Defines how tutorialize should end. runEnd can be 'stop' or 'loop'.
runMode 'manual' Defiens how tutorialize should run. runMode mode can be 'manual' or 'auto'.
runDuration 8000 The time a slide is runned. Only available when runMode is set to 'auto'.
showButtonClose true Show the button "close" on slide.
showButtonNext true Show the button "Start/Next/End" on slide.
showButtonPrevious true Show the button "previous" on slide.
theme '' Define a class theme to enhance your slides. Theme can be defined in 'css/tutorialize.css'.
width 200 Width of the slides.
onStart function(currentSlideIndex, slideData, slideDom){} Called when tutorialize starts.
onStop function(currentSlideIndex, slideData, slideDom){} Called when tutorialize ends.
Method Parameters Description
$.tutorialize() - options : see list of Global Property above
- instanceName : optional
Create an instance ot Tutorialize.
$.tutorialize.cleanRemember() - instanceName : optional Delete the state of a visitor.
$.tutorialize.getCurrentIndex() - instanceName : optional Return the current index of the slide while Tutorialize is running.
$.tutorialize.getTotal() - instanceName : optional Return the total of slides.
$.tutorialize.next() - instanceName : optional Go to the next slide. To use on the "onNext slide method.
$.tutorialize.prev() - instanceName : optional Go to the previous slide. To use on the "onPrev" slide method.
$.tutorialize.start() - instanceName : optional Start Tutorialize with the first slide.
$.tutorialize.startAt() - slideIndex: index of slide (default 0)
- instanceName : optional
Start Tutorialize at the specific slide index.
$.tutorialize.stop() - instanceName : optional Stop Tutorialize.
Change Log
1.3.1 1.3.0 1.2.0 1.1.4 1.1.3 1.1.2 1.1.1 1.1.0 1.0.1
Tutorialize has been developed by Gael Stucki