Chess Fen 2.0

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Download files

You can download the entire script for this zip file.

Demo

The chess board to the left has been created using HTML only. It's an example of how easy it is to use Chess Fen 2.0 to display chess positions on a web page.

Installation

Step 1: Include files

ChessFenAutoload.js is only required if you just want to use plain html on your website and let Chess Fen 2.0 find out where to insert chess positions.

Step 2a: Configure using HTML only

To display a chess position using HTML only, you'll need to create an HTML element for the board and assign it to the css class chess-fen-container

Then you use custom html properties to configure the board. Example:

Chess Fen 2.0 will create the chess board inside this <div> and resize it automatically.

Remember ot include ChessFenAutoload.js as described above.

Step 2b: Manual configuration

You can also create a board using Javascript code. Using Javascript, you can also update the position dynamically, example: by click on links.

This is a code example of manual configuration:

<div id="board-container" style="width:500px">

</div>

<script type="text/javascript">
var fenObj = new DG.ChessFen20({
   autoFlip: true,
   renderTo: "#board-container",
   fen: "1rr3k1/p3ppbp/3pbnp1/7P/qP1BP1P1/5P2/1PPQ4/1NKR1B1R b - - 0 1"
});
// A manually created board can later be updated with a new position using // fenObj.showFen(<position>); </script>

Available properties

The following properties are available when configuring a Chess Fen 2.0 board. In plain html, properties are added using syntax: data-<property>="<property value>.

fen: position to show, example: fen: "1rr3k1/p3ppbp/3pbnp1/7P/qP1BP1P1/5P2/1PPQ4/1NKR1B1R b - - 0 1"
autoFlip: flips the board automatically when it's black to move(default = true). Example: autoFlip:false(Javascript) or data-autoFlip="false"(HTML)
labels: Show labels(A-H, 1-8) besides the board(default = true). Example: labels:false.
font: Chess Font/Set to use for the pieces. Available types are: alpha(default), cases, leipzig, merida,motif and smart. Example: font:"merida". Please note that if you're showing a small board(width less than 230px), you should use alpha as it's the only font which has a chess piece in size 21x21. The smallest size for the other pieces is 30x30.
imageFolder: Path to image folder. Default is images/. You will only want to change this if you're including
lightSquare: Background image to use for dark squares. Path is relative to imageFolder. Default = square-light.png
darkSquare: Background image to use for dark squares. Path is relative to imageFolder. Default = square-dark.png