Soccer Field Diagram With Players And Positions - jQuery soccerField.js

soccerField.js is a jQuery plugin used to illustrate team formations that dynamically display players and their positions(roles) on a soccer(football) field diagram with lots of configuration options.

How to use it:

1. Load the jQuery soccerField.js plugin and other required resources in your html document.

<link rel="stylesheet" href="css/soccerfield.min.css" />
<link rel="stylesheet" href="css/soccerfield.default.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="js/jquery.soccerfield.min.js"></script>

2. Prepare your soccer players data containing names, positions(roles) and images as these. Could be set as a variable or loaded from server.

var data = [
    {name: 'KEYLOR NAVAS', position: 'C_GK', img: 'custom.png'},
    {name: 'MARCELO', position: 'LC_B'},
    {name: 'SERGIO RAMOS', position: 'C_B'},
    {name: 'CARVAJAL', position: 'RC_B'},
    {name: 'CASEMIRO', position: 'C_DM'},
    {name: 'KROOS', position: 'L_M'},
    {name: 'ISCO', position: 'LC_M'},
    {name: 'ASENSIO', position: 'RC_M'},
    {name: 'MODRIC', position: 'R_M'},
    {name: 'RONALDO', position: 'LC_F'},
    {name: 'BENZEMA', position: 'RC_F'},
];

3. Generate a default soccer(footbal) field diagram on the page.

$("#soccerfield").soccerfield(data);

4. Customize the soccer field with the following options.

$("#soccerfield").soccerfield(data,{
  field: {
    width: "960px",
    height: "600px",
    img: 'img/soccerfield_green.png',
    startHidden: false,
    animate: false,
    fadeTime: 1000,
    autoReveal:false,
    onReveal: function () {
      // triggered on reveal
    }
  }
});

5. Customize the soccer players with the following options.

$("#soccerfield").soccerfield(data,{
  players: {
    font_size: 16,
    reveal: true,
    sim: true, // reveal simultaneously
    timeout: 1000,
    fadeTime: 1000,
    img: false,
    onReveal: function () {
      // triggered on reveal
    }
  }
});

---

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