• jQuery Video Tutorials

jQuery - Producttour.js

Advertisements

Previous Page
Next Page  

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">
   <head>
      <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> 
   </head>
	
   <body background = "tp.png">
      <div class = "cd-nugget-info">
         <button id = "cd-tour-trigger" class = "cd-btn">Start tour</button>
      </div>

      <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">
            </div>
         </li> 

         <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">
            </div>
         </li> 

         <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,
                  dignissimos.</p>
               <img src = "img/step-3.png" alt = "step 3">
            </div>
         </li> 
      </ul> 
      
      <script src = "js/jquery-2.1.4.js"></script>
      <script src = "js/jquery.mobile.min.js"></script> 
      <script src = "js/main.js"></script> 
      
   </body>
</html>

This should produce following result −

Click here
Advertisements