jQuery Producttour.js Plugin



Hello dear readers! Welcome back to another edition of our tutorial on jQuery. In this tutorial guide, we are going to be discussing about the jQuery Producttour.js plugin.

Producttour.js is a jQuery plugin used for easy implementation of help or direction guide into a web page.

Example

The following below is a simple Producttour.js example -

<!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>This section of my website contains HTML tutorials, 
                              the tutorials are explained with detailed examples</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>This section contains PHP tutorials, 
                              which are available to the public</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>This section contains alot of JavaScript tutorials, 
                              coupled with examples </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>


Alright guys! This is where we are rounding up for this tutorial post. In our next tutorial guide, we are going to be discussing about the Megadropdown.js Plugin.

Do feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.