PGN Viewer Examples

This page shows several examples of different chess board configurations. The PgnViewer instantiation code and the CSS required for each board is also shown.

Current examples:

Alternative Move List Formatting
Board Size and Square Colour Selection
Background Images for Squares

All the examples on this page use the default CSS unless shown otherwise. The only exception is the following change to the default comment colour which is shared by all examples:

<style type="text/css">
.ct-board-move-comment
{ 
    color: #8AAFEF;
}
</style>

Alternative Move List Formatting

This output was achieved using the 'movesFormat' config option set to "main_on_own_line" as shown below. You can also see that the PGN is specified directly in the 'pgnString' option, instead of being loaded from a file on the server. This is useful for sites that are able to edit their HTML pages but are not able to store files on the server. Remember that any ' characters within the pgnString must be escaped, e.g. 'Petrosian's turn' must be translated into 'Petrosian\'s turn'.

This example also uses a smaller delay between moves when in autoplay mode. Press play on the board shown above to see the faster autoplay configuration in action. The "pauseBetweenMoves" option is used to dicate the pause in milliseconds between moves during autoplay.

The Javascript code to create the above board:

<script>
new PgnViewer(
  { boardName: "game1",
    movesFormat: "main_on_own_line",
    pgnString: '[Event "2.f"][Site "Leningrad"][Date "1974.??.??"][Round "3"][White "Karpov, Anatoly"][Black "Spassky, Boris"][Result "1-0"][ECO "E91"][WhiteElo "2700"][BlackElo "2650"][Annotator "JvR"][PlyCount "109"][EventDate "1974.??.??"] 1. d4 Nf6 2. c4 g6 3. Nc3 Bg7 4. e4 d6 5. Nf3 O-O 6. Be2 c5 7. O-O Bg4 $5 { Spassky chooses a sharp opening.} 8. d5 Nbd7 9. Bg5 a6 10. a4 Qc7 11. Qd2 Rae8 12. h3 Bxf3 13. Bxf3 e6 $5 14. b3 Kh8 15. Be3 Ng8 16. Be2 e5 $5 17. g4 Qd8 18. Kg2 Qh4 $5 {Black takes the initiative on the kingside.} 19. f3 ({ The tactical justification is} 19. Bg5 Bh6) 19... Bh6 $2 { Tal, Keres and Botvinnik condemn this provocative move} ({and prefer} 19... f5) 20. g5 Bg7 21. Bf2 Qf4 22. Be3 Qh4 23. Qe1 $1 Qxe1 24. Rfxe1 h6 25. h4 hxg5 $2 ({A defence line against an attack on the queenside creates} 25... Ra8 26. Reb1 Rfb8 27. b4 Bf8 28. bxc5 Nxc5) 26. hxg5 Ne7 27. a5 f6 28. Reb1 fxg5 29. b4 $1 Nf5 $5 30. Bxg5 $1 ({Keres analyses} 30. exf5 e4 31. Bd2 exf3+ 32. Bxf3 gxf5 { Black has counter-play.}) 30... Nd4 31. bxc5 Nxc5 32. Rb6 Bf6 33. Rh1+ $1 Kg7 34. Bh6+ Kg8 35. Bxf8 Rxf8 36. Rxd6 Kg7 37. Bd1 Be7 ({Tal mentions} 37... Bd8 38. Na4 Bc7 39. Nxc5 Bxd6 40. Nxb7 {and 41.c5. White wins.}) 38. Rb6 Bd8 39. Rb1 Rf7 40. Na4 Nd3 41. Nb6 g5 42. Nc8 Nc5 43. Nd6 Rd7 44. Nf5+ Nxf5 45. exf5 e4 46. fxe4 Nxe4 47. Ba4 Re7 48. Rbe1 Nc5 49. Rxe7+ Bxe7 50. Bc2 Bd8 51. Ra1 Kf6 52. d6 Nd7 53. Rb1 Ke5 54. Rd1 Kf4 55. Re1 1-0',
    pauseBetweenMoves: 500
  }
);
</script>

Board Size and Square Colour Selection

Smaller board sizes are achieved by using smaller piece sizes, the example below uses pieces which are 29x29 pixels.

The black square colours were changed for the fourth board using the style:

<style type="text/css">
#game2-container .ct-black-square
{ 
    background-color: blue;
}
</style>

The '#game2-container' is a CSS descendant selector which ensures the square colour is only changed for the 'game2' board and no other boards on the page.

To prevent the move list being displayed, the following 'game2-moves' div is left out of the HTML output:

    <div id="game2-moves"></div>

The resulting board display:

And the Javascript used to create the board:

<script>
new PgnViewer(
  { boardName: "game2",
    pgnFile: '/pgn-examples.pgn',
    pieceSize: 29
  }
);
</script>

Background Images for Squares

The background images for the board squares can be changed using following CSS:

<style type="text/css">
#game3-container .ct-black-square
{ 
    background: url("/images/dark-wood.gif") no-repeat;
}
#game3-container .ct-white-square
{ 
    background: url("/images/light-wood.gif") no-repeat;
}
</style>

The dark-wood.gif and light-wood.gif images must be the same dimensions as the pieceSize config setting (46 pixels in this case). The 'condal' chess piece style has been used for this board.

This example also shows two games in a single pgnString definition. When multiple games are found, a dropdown list allows the user to select the current game to display.

And the javascript code to create this board:

<script>
new PgnViewer(
  { boardName: "game3",
    pgnString: '[Event "Wch27"] [Site "Moscow"] [Date "1969.??.??"] [Round "4"] [White "Petrosian, Tigran V"] [Black "Spassky, Boris"] [Result "0-1"] [ECO "D34"] [Annotator "JvR"] [PlyCount "82"] [EventDate "1969.??.??"]  {Petrosian and Spassky played a second match for the world title in the Estraden (Variety) Theatre.} 1. c4 e6 2. d4 d5 3. Nc3 c5 4. cxd5 exd5 5. Nf3 Nc6 6. g3 Nf6 7. Bg2 Be7 8. O-O O-O 9. Bg5 cxd4 10. Nxd4 h6 11. Be3 Bg4 12. Nb3 Be6 13. Rc1 Re8 14. Re1 Qd7 15. Bc5 $1 Rac8 16. Bxe7 Qxe7 17. e3 Red8 18. Qe2 Bg4 19. f3 Bf5 20. Rcd1 Ne5 21. Nd4 Bg6 22. Bh3 Rc4 $5 23. g4 Rb4 24. b3 Nc6 25. Qd2 Rb6 26. Nce2 $6 Bh7 27. Bg2 Re8 28. Ng3 Nxd4 29. exd4 Re6 30. Rxe6 Qxe6 31. Rc1 Bg6 32. Bf1 $6 (32. Rc7 {gives counteraction.}) 32... Nh7 33. Qf4 Nf8 34. Rc5 Bb1 35. a4 Ng6 36. Qd2 Qf6 37. Kf2 $6 ({More resistance offers} 37. Bb5 Rd8 38. Qe3 Nf4 39. Ne2 Ne6 40. Rc1) 37... Nf4 38. a5 $2 { Petrosian breaks in time trouble.} (38. Rc3 Ne6 39. Bb5 Rd8 40. Ne2 { defends properly.}) 38... Bd3 $1 39. Nf5 Qg5 $1 40. Ne3 $2 (40. Qd1 Bxf5 41. gxf5 {prolongs the game.}) 40... Qh4+ 41. Kg1 Bxf1 { Spassky had collapsed in game one. It was Petrosian\'s turn this time.} (41... Bxf1 42. Nxf1 Re2 {is horrible.}) 0-1 [Event "2.f"][Site "Leningrad"][Date "1974.??.??"][Round "3"][White "Karpov, Anatoly"][Black "Spassky, Boris"][Result "1-0"][ECO "E91"][WhiteElo "2700"][BlackElo "2650"][Annotator "JvR"][PlyCount "109"][EventDate "1974.??.??"] 1. d4 Nf6 2. c4 g6 3. Nc3 Bg7 4. e4 d6 5. Nf3 O-O 6. Be2 c5 7. O-O Bg4 $5 { Spassky chooses a sharp opening.} 8. d5 Nbd7 9. Bg5 a6 10. a4 Qc7 11. Qd2 Rae8 12. h3 Bxf3 13. Bxf3 e6 $5 14. b3 Kh8 15. Be3 Ng8 16. Be2 e5 $5 17. g4 Qd8 18. Kg2 Qh4 $5 {Black takes the initiative on the kingside.} 19. f3 ({ The tactical justification is} 19. Bg5 Bh6) 19... Bh6 $2 { Tal, Keres and Botvinnik condemn this provocative move} ({and prefer} 19... f5) 20. g5 Bg7 21. Bf2 Qf4 22. Be3 Qh4 23. Qe1 $1 Qxe1 24. Rfxe1 h6 25. h4 hxg5 $2 ({A defence line against an attack on the queenside creates} 25... Ra8 26. Reb1 Rfb8 27. b4 Bf8 28. bxc5 Nxc5) 26. hxg5 Ne7 27. a5 f6 28. Reb1 fxg5 29. b4 $1 Nf5 $5 30. Bxg5 $1 ({Keres analyses} 30. exf5 e4 31. Bd2 exf3+ 32. Bxf3 gxf5 { Black has counter-play.}) 30... Nd4 31. bxc5 Nxc5 32. Rb6 Bf6 33. Rh1+ $1 Kg7 34. Bh6+ Kg8 35. Bxf8 Rxf8 36. Rxd6 Kg7 37. Bd1 Be7 ({Tal mentions} 37... Bd8 38. Na4 Bc7 39. Nxc5 Bxd6 40. Nxb7 {and 41.c5. White wins.}) 38. Rb6 Bd8 39. Rb1 Rf7 40. Na4 Nd3 41. Nb6 g5 42. Nc8 Nc5 43. Nd6 Rd7 44. Nf5+ Nxf5 45. exf5 e4 46. fxe4 Nxe4 47. Ba4 Re7 48. Rbe1 Nc5 49. Rxe7+ Bxe7 50. Bc2 Bd8 51. Ra1 Kf6 52. d6 Nd7 53. Rb1 Ke5 54. Rd1 Kf4 55. Re1 1-0',
    pieceSet: 'condal', 
    pieceSize: 46
  }
);
</script>

Chess Tempo

User Details

PGN Viewer Examples

Alternative Move List Formatting

Board Size and Square Colour Selection

Background Images for Squares

Username:
Blitz Rating:
Standard Rating: