Download AJAX based chess widget

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.

Configuration

Include ChessFen.js

The first thing we have to do is to include the javascript file ChessFen.js:

Place it the <HEAD> section of your page.

Create the HTML for your chess boards

Next, we create the HTML tag for our chess boards, i.e. where we want the chess boards to be inserted. This can be done simply like this:

We want one chess board inside "chessBoard1" and another one inside "chessBoard2". The script will dynamically take care of that for us.

Create Javascript Object

Once ChessFen.js has been included and one or more "Chess board divs" has been created, it's time to put a chess board inside those divs.

This is the code we use for that:

First, I created a DHTMLGoodies.ChessFen object. Then I loaded chess boards into my divs by calling the loadFen method. This method takes two arguments. The first one is the actual FEN string, the second one is a reference to the element where you want the board to be displayed. In our example, it's the DIV elements chessBoard1 and chessBoard2.

And the result may look like this:

White to move and win:

Or with a smaller board like this:

Black to move and win

I used chessObj.setSquareSize(30); to decrease the board size and chessObj.setPieceType('leipzig'); to change pieces.

Parameters to the constructor

The constructor accept some parameters which you can use to customize the widget. They are:

cssPath: Alternative path to the chess.css file. Default value is 'css/chess.css'.
imageFolder: Location of image folder relative to the html file. Default is 'images/'
flipBoardWhenBlackToMove: The script will by default flip the board when it's black to move. You can turn this feature off with this parameter.
boardLabels: Display board labels(A-F,1-8) around the chess board. (default = true).
squareSize: Size of the the squares. Default = 45. This is only useful if you have made changes to the css and replaced the images used to display the chess pieces. Currently, you have support for 30, 45(default), and 60.
pieceType: Which type of chess pieces to use. Currently supported: "motif", "cases", "merida", "alpha", "smart" and "leipzig". You can also use the setPieceType method to switch pieces. See demo 2

This is an example how to send parameters to the constructor:

var chessObj = new DHTMLGoodies.ChessFen(
{ cssPath: '/scripts/chess-fen/css/chess.css',
imageFolder: '/scripts/chess-fen/images/',
flipBoardWhenBlackToMove:false } );