Best jQuery Website Tour Plugins & Tutorials with Demo

    Hopscotch : jQuery Product Tour Plugin

    Hopscotch : jQuery Product Tour Plugin

    Hopscotch is a framework to make it easy for developers to add product tours to their pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress.

    Features:

    • Callbacks for tour events (e.g. onStart, onEnd, onShow, onNext, onPrev, onClose)
    • Multi-page persistence using HTML5 sessionStorage using cookies as a fallback
    • I18N support
    • Lightweight single callouts

    Bootstrap Tour : Quick and easy product tours with jQuery

    Bootstrap Tour : Quick and easy product tours with jQuery

    Quick and easy way to build your product tours with Twitter Bootstrap Popovers.This library does not depend on the full Bootstrap package. The only dependencies are the tooltip and popover files.Bootstrap Tour saves the current step and will not display the tour again to users who have already completed it.

    Chardin.js : jQuery Simple overlay instructions for your apps

    Chardin.js : jQuery Simple overlay instructions for your apps

    Chardin.js is a jQuery plugin that creates a simple overlay to display instructions on existent elements. It is inspired by the recent Gmail new composer tour which I loved.

    Crumble : jQuery Feature Tour

    Crumble : jQuery Feature Tour

    Crumble allows you to quickly and easily build feature tours for your website or app using small bubbles!.The bubbles are visually interesting, will draw attention and due to the small size make sure that you will write using concise language that visitors will read.

    The tour itself is defined as a standard ordered list in your html, making it accessible.

    Joyride : jQuery feature tour plugin with Demo

    Joyride : jQuery feature tour plugin with Demo

    jQuery feature tour plugin.Joyride is an awesome jQuery plugin that lets you take users on a custom tour of your app.Setting up Joyride is simple, just attach the needed files, drop in your markup and choose your settings.

    Joyride is extremely flexible and lets you take control of how people interact with your tour. We programmed it to be cross-browser compatible with modern browsers and even used some fancy CSS to avoid images. Now let’s see just how easy it is to take your first ride without getting the fuzz involved.

    Highlight Web Page Elements With jQuery Highlighter

    Highlight Web Page Elements With jQuery Highlighter

    jQuery Highlighter neatly highlights the web page elements and helps you to direct your readers to the places you want them to look.

    This jQuery plugin is handy for products showcases, guided tours, portfolios and helpful for the color blind & visually impaired people.

    It is highly customizable and has built-in support for keyboard navigation. The plugin works fine on Chrome, Firefox and Safari (issues with IE).

    Image Zoom Tour with jQuery

    Image Zoom Tour with jQuery

    Today we want to share a little zoom tour script with you. Showing a main image initially, we want to be able to zoom into certain parts of the image by clicking on tags, using another image for the closer view. This next step can contain other tags that again allow to show more images. We achieve the “zoom” effect by enlarging the current image and fading in the new one.

    Website Tour with jQuery

    Website Tour with jQuery

    Today we want to share a little script with you that allows to create a tour on a website with jQuery. This can be very useful if you want to explain your users the functioning of your web application…