soccerfield.js
jquery plugin for soccer field display with players on their positions
Usage: For usage include jquery, plugin itself (jquery.soccerfield.js), basic stylesheet (soccerfield.css) and one of themes (soccerfield.default.css)
$(document).ready(function(){ $("#soccerfield").soccerfield(data,options); });To see an example simply clone/download the repo, go to the demo folder and launch index.html
Available options (example with comments):
var options = { //options for soccer field field: { //soccer field width; default: 960px width: "960px", //soccer field height; default: 600px height: "600px", //img for soccer field default: 'img/soccerfield_green.png' img: 'img/soccerfield_green.png', //load page with hidden field; default:false startHidden: true, //animate field appearance with fade; default: false animate: true, //time for fadeIn fadeTime: 1000, //reveal field automatically on load (default:true), if set to false needs extra $selector.data("soccerfield").revealField() call autoReveal:true, //callback on soccer field reveal onReveal: function () { } }, //options for players players: { //font size for player names in pixels (default 16) font_size: 16, //reveal players or load with players not hidden; default: true reveal: true, //reveal simultaneously (default: true); if false - players reveal one by one after selected timeout sim: false, //timeout between players reveal in sim:false mode timeout: 1000, //time for fadeIn players animation fadeTime: 2000, //player img, no img if false (default: false) img: 'img/soccer-player.png', //callback after all players revealed onReveal: function () { alert("players revealed!"); } } };Data format requirements (example):
var data = [ {name: 'Gianluigi Buffon', position: 'C_GK'}, {name: 'Leonardo Bonucci', position: 'LC_B'}, {name: 'Giorgio Chiellini', position: 'C_B'}, {name: 'Andrea Barzagli', position: 'RC_B'}, {name: 'Daniele De Rossi', position: 'C_DM'}, {name: 'Alessandro Florenzi', position: 'L_M'}, {name: 'Emanuele Giaccherini', position: 'LC_M'}, {name: 'Marco Parolo', position: 'RC_M'}, {name: 'Antonio Candreva', position: 'R_M'}, {name: 'Éder', position: 'LC_F'}, {name: 'Lionel Messi', position: 'RC_F', img: 'img/argentina_flag.png'}, ];Possible positions Position consists of two parts, divided by underscore sign "_".
Left part id for "y" position:
- L - Left
- LC- Left-Center
- C - Center
- RC - Right-Center
- R - Right
Right part is for "x" or "soccer" position:
- GK - GoalKeeper
- B - Back
- DM - Defending Midfielder
- M - Midfielder
- AM - Attacking MidFielder
- F - Forward
You can combine these positions as it is showed in example
Methods
Methods are available through $selector.data("soccerfield") attribute.
revealField() - reveals field and players
revealPlayers() - reveals hidden players
destroy() - destroys instance of plugin
Added features: Now you are able to assign picture individually for each player using img key in you data array If img is not set - the plugin will pick up one from the options.players.img
Themes:
You are free to create your own themes. For example soccerfield.default.css theme is provided
TODO:
- Create minified version
- Manage players's numbers
- Manage players changes and substitutions
- More customization and themes
- Bower install
