jQuery - Producttour.js


Producttour.js is a jQuery plugin for quickly and easily implementing of help guide into your website.

A Simple of producttour.js example as shown below −

<!doctype html>
<html lang = "en" class = "no-js">
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "css/reset.css"> 
      <link rel = "stylesheet" href = "css/style.css"> 
      <script src = "js/modernizr.js"></script> 
   <body background = "tp.png">
      <div class = "cd-nugget-info">
         <button id = "cd-tour-trigger" class = "cd-btn">Start tour</button>

      <ul class = "cd-tour-wrapper">
         <li class = "cd-single-step">
            <span>Step 1</span>
            <div class = "cd-more-info bottom">
               <h2>Step Number 1</h2>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit. Modi alias animi molestias in, aperiam.</p>
               <img src = "img/step-1.png" alt = "step 1">

         <li class = "cd-single-step">
            <span>Step 2</span>

            <div class = "cd-more-info top">
               <h2>Step Number 2</h2>
               <p>Lorem ipsum dolor sit amet, consectetur 
                  adipisicing elit. Officia quasi in quisquam.</p>
               <img src = "img/step-2.png" alt = "step 2">

         <li class = "cd-single-step">
            <span>Step 3</span>

            <div class = "cd-more-info right">
               <h2>Step Number 3</h2>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing
                  elit. Optio illo non enim ut necessitatibus perspiciatis,
               <img src = "img/step-3.png" alt = "step 3">
      <script src = "js/jquery-2.1.4.js"></script>
      <script src = "js/jquery.mobile.min.js"></script> 
      <script src = "js/main.js"></script> 

This should produce following result −

Click here

Useful Video Courses


JQuery Online Training

27 Lectures 1 hours

Mahesh Kumar


JQuery for Beginners

27 Lectures 1.5 hours

Pratik Singh


jQuery Masterclass Course: JavaScript and AJAX Coding Bible

72 Lectures 4.5 hours

Frahaan Hussain


Projects In JavaScript & JQuery

60 Lectures 9 hours

Eduonix Learning Solutions


jQuery for Beginner to Advanced: 12 Projects included

17 Lectures 2 hours

Sandip Bhattacharya


jQuery Memory Game Project - Fun coding Project with jQuery

12 Lectures 53 mins

Laurence Svekis