Educational

Producttour.js

Written by

Saim Khalid

in

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.&lt;/p&gt;&lt;img src ="img/step-1.png" alt ="step 1"&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class="cd-single-step"&gt;&lt;span&gt;Step 2&lt;/span&gt;&lt;div class="cd-more-info top"&gt;&lt;h2&gt;Step Number 2&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur 
              adipisicing elit. Officia quasi in quisquam.&lt;/p&gt;&lt;img src ="img/step-2.png" alt ="step 2"&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class="cd-single-step"&gt;&lt;span&gt;Step 3&lt;/span&gt;&lt;div class="cd-more-info right"&gt;&lt;h2&gt;Step Number 3&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing
              elit. Optio illo non enim ut necessitatibus perspiciatis,
              dignissimos.&lt;/p&gt;&lt;img src ="img/step-3.png" alt ="step 3"&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;script src ="js/jquery-2.1.4.js"&gt;&lt;/script&gt;&lt;script src ="js/jquery.mobile.min.js"&gt;&lt;/script&gt;&lt;script src ="js/main.js"&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts