jQuery Plugin For Custom Social Links - sollist

File Size: 6.26 MB
Views Total: 1802
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Custom Social Links - sollist

sollist is a jQuery plugin which allows you to create a list of share links with custom social icons on your webpage. 

Features:

  • Supports 31 popular social networks: facebook, instagram, twitter, pinterest, tumblr, vine, googleplus, behance, dribbble, github, skype, twitch, youtube, linkedin, soundcloud, livejournal, bitbucket, vk, deviantart, digg, flickr, foursquare, steam, envato, stackoverflow, reddit, kickstarter, email, medium, quora, vimeo.
  • 11 built-in social media icon sets.
  • Custom hover effects based on CSS3 animations.
  • Allows to open social profiles page in new tab.
  • Custom social icon size, padding, tooltip, and more.

Basic usage:

1. Download, unzip and include the jQuery sollist plugin's files in your project. The plugin relies on jQuery, you should load the jQuery JavaScript library first.

<link href="jquery.sollist.css" rel="stylesheet">
...
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.sollist.js"></script>

2. Load the optional jQuery tooltipster plugin if you wish to use custom tooltip on hover.

<link href="tooltipster.css" rel="stylesheet">
<script src="jquery.tooltipster.min.js"></script>

3. Call the plugin on a DIV element to generate a list of social links.

$("#element").sollist({
  profiles: {
    facebook: 'http://facebook.com/yourlink',
    googleplus: 'https://plus.google.com/yourlink/posts',
    // more social profile pages here
  }
});

4. These are default plugin options to customize your social links & icons.

// Object with profile links. 
// Key is service name, value is profile link.
profiles:{},

// Available themes:
// lee-gargano-circle-color, lee-gargano-square-color
// lee-gargano-circle-white, lee-gargano-square-white
// mikymeg-color, mikymeg-grey, fuel, handdrawn
// light-circle, martz90-hex, victor-bejar
theme: 'lee-gargano-circle-color',

// Space between icons in pixels.
pixelsBetweenItems: 10,

// Path from base url to custom icon theme directory. 
// If you use built-in icon themes, leave this option empty.
themeDirPath: '',

// Icons container element tag.
containerTag: 'ul',

// Icon element tag
elementTag: 'li',

// Icon size in pixels.
size: 32,

// Custom icon theme files extension.
iconFileExtension: 'png',

// Icon hover animation effect.
// fade-out, fade-in, rise, rotate,
// shrink, grow, bounce
hoverEffect: '',

// Open social profiles page in new tab.
newTab: true,

// Show tooltip on icon hover. 
showTooltips: false,

// tooltipster plugin options
tooltipsterOptions: {
  // sl-tooltip-white or sl-tooltip-black
  theme: "sl-tooltip-black"
},

// tooltip class
tooltipClass: "sl-tooltip",

// Custom tooltips
tooltips: {
  'googleplus': 'google+'
},

// Custom class that will be added to each icon element.
itemClass: '',

// Custom css that will be added to each icon element.
itemCss: {}

This awesome jQuery plugin is developed by 88z. For more Advanced Usages, please check the demo page or visit the official website.