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 |
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.











