Chess Fen 2.0

Demo |

Bookmark and Share

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

<link rel="stylesheet" type="text/css" media="screen" href="css/chess-fen20.css"/>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/ChessFen20.js"></script>
<script type="text/javascript" src="js/ChessFenAutoload.js"></script>

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:

<div class="chess-fen-container" style="width:300px;float:left;margin:10px" data-fen="r1bq4/1p4kp/3p1n2/5pB1/p1pQ4/8/1P4PP/4RRK1 w - - 0 1"></div>

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

Define globals

A global value for imageFolder, lightSquare and darkSquare can be configured for all chess boards with code like this:

<script type="text/javascript">
if (!DG)var DG = {};
DG.ChessFen20Config = {
   imageFolder: "/chess-fen-20/images/",
   darkSquares: "square-dark-custom.png",
   lightSquares: "square-light-custom.png"
};
</script>

In the <HEAD> section of your web page.

What is FEN

Please see http://en.wikipedia.org/wiki/Forsyth-Edwards_Notation

Comments

No one has commented this - be first!

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Unable to save captcha-image.