Skip to content
Fralec edited this page Mar 2, 2017 · 17 revisions

Welcome to the ElegantJS wiki!

Hi, thanks for using ElegantJS.

demo

Requirements

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://raw.githubusercontent.com/fralec/elegantShareJS/develop/script/elegant.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://raw.githubusercontent.com/fralec/elegantShareJS/develop/css/elegant.css"/>

Getting started

Simple initialization All you need to do is call the plugin inside a $(document).ready? function:

$(document).ready(function() {
    $().elegant();
});

A more complex initialization with all options set could look like this:

$(document).ready(function() {
    $().elegant({
            //animations
            showEffect: 'fade', //show effect, here a list : http://api.jqueryui.com/category/effects/
            showOptions: [], //options for the effects and easings : http://api.jqueryui.com/easings/
            showDuration: 400, //in MS
            showComplete: null, //execute a function after the animation
            hideEffect: 'fade', //same effects but for the hidding
            hideOptions: [],
            hideDuration: 400,
            hideComplete: null,
                        
            //config
            newTab: true, //open new tab on click on links. will crush target option in socials
            clickNextToClose: false, //close the popup when user click next to it
            showCross: true, //showing exit cross on top right
            
            //layout
            background: 'black',
            color: 'white',
            crossSize: 2, // can be from 1 to 5
            iconSize: 2, // can also be from 1 to 5
            
            //social
            facebook: {
                id: 'alec.vonbarnekow'}, // just id is required for initialisation
                
            twitter: { //all social parameters
                id: 'fralec_', //id for the social network
                faIcon: 'twitter', //Font-awesome icon
                color: '#00aced', //color for hover, can also bee a rgb()
                url: 'https://twitter.com/', //url for the link, if you want to make a share plugin 
                target: null}, //meta target, to open new tab
                
        });
});

Implemented socials networks

var socials = ["facebook", "twitter", "linkedin", "github", "vk", "mail", "website", "instagram", "flickr", "googleplus", "youtube", "pinterest", "skype", "jsfiddle", "git", "vine", "tel", "vimeo", "wordpress", "soundcloud", "steam", "codepen", "bitcoin", "paypal", "joomla", "behance", "bitbucket", "spotify", "trello", "twitch"];

Changelog