Quick Info

To show a person details and social links.

Documentation

This documentation defines use of Quick Info plugin.

Description

This jQuery plugin creates quick info for a person using bootstarp. Currently this is available in multiple color themes.

  1. Red
  2. Blue-Grey
  3. Pink
  4. Purple
  5. Deep-Purple
  6. Indigo
  7. Blue
  8. Light-Blue
  9. Cyan
  10. Teal
  11. Green
  12. Light-Green
  13. Lime
  14. Yellow
  15. Amber
  16. Orange
  17. Deep-Orange
  18. Brown
  19. Grey
  20. Blue-Grey

Current version: 1.0

Download this plugin and use it to display person details with profile picture, title and social networking links.

Features

  • Fully customized
  • Responsive
  • Tested: jQuery 1.12.x in Firefox, Safari, Chrome, Internet Explorer 9, 10,11, Opera
  • Lightweight: 8KB of JavaScript (less than 4KBs gzipped).
  • CSS3 Animation

Instructions & Help

First read usage of plugin (see below). If you found any issue or need any help then submit your query at GitHub or email me yoku2010@gmail.com

Download

View Project .zip file .tar.gz file

Installation

Download the plugin from github. Import js and css files in your page and call plugin function (see usage). 

  <!-- CSS files-->
  <link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/bootstrap-theme.min.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/jquery.quick-info.css">

  <!-- JS files-->
  <script type="text/javascript" src="js/libs/jquery-1.12.4.min.js"></script>
  <script type="text/javascript" src="js/libs/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/libs/jquery.quick-info.js"></script>

Usage

jQuery Quick Info Plugin accepts setting (Json Object) to behave differently.

  // Format:
  $(selector).quickInfo({key:value, key:value, key:value});
  // Examples:
  $("#quick_info").quickInfo({
      img: "img/yogesh-bw.jpg",
      themeColor: "Red",
      name: "Yogesh Kumar",
      title: " Lead Engineer",
      description: "I love programming, singing, making algorithms and cooking. I am good at Python and JavaScript development. Enjoy helping others and learn more. Enthusiast and Passionate about pushing front end development to the next level. Ability to work independently and seek answers.",
      socialLinks: [
          {
              icon: "fa-facebook",
              href: "http://www.facebook.com/yoku2010/"
          },
          {
              icon: "fa-twitter",
              href: "https://twitter.com/yoku_2010/"
          },
          {
              icon: "fa-linkedin",
              href: "http://www.linkedin.com/in/yoku2010/"
          },
          {
              icon: "fa-graduation-cap",
              href: "https://yoku2010.github.io/resume/"
          }
      ]
  });

Demo

Click Here to see demos of Quick Info plugin.

Settings

Property Default Description
img <path of image> To define path of person profile picture.
themeColor Red Quick Info color themes (please find list of colors in Description section).
name Yogesh Kumar To define name of person.
title Lead Engineer To define title of person.
description <person description> To define description of person.
socialLinks <list of social links> To show all social links with icon.

Follow me on Twitter, GitHub, LinkedIn or Facebook