Install & configuration

Installation

  • Download the library from the download page.
  • Extract the archive.
  • Include the jsPgnViewer.js in your webpage.
  • To initialize the board
    • Make a hidden div with an id(<div style="visibility:hidden;display:none" id="id_of_the_pgn_div"></div>)
    • Paste a PGN into the div
    • Make another div where you want the board to appear.
    • The div's id has to have the suffix _board. In the current example it should be id_of_the_pgn_div_board.
    • Somewhere in the <script> tags add
      • var board = new Board("id_of_the_pgn_div")
      • board.init()
  • If you want to reference the images from another directory (default is img) you can use the imagePrefix attribute of the Board object.
    • board.imagePrefix = "someDirectory/"
  • If you don't want the movesPane to show up
    • board.showMovesPane=true
  • Easier way to set options
    • var board = new Board("id_of_the_pgn_div", {'showMovesPane':true,'imagePrefix':'someDirectory/'})
    • adsfadsf
  • See that

Configuration

The general approach for the configuration is adding key value pairs to the initialization of the Board object.

var board = new Board("id_of_the_pgn_div", {OPTION:VALUE}) board.init()

Different OPTION:VALUE pairs are separated by a comma. See the demo pages for samples. The different configuratin options follow.

  • showComments : true|false
    • Controls the initial showing of the comments within the moves. Defaults to true. As of versions > 0.5
  • showMovesPane : true|false
    • Controls the initial showing of the moves pane.
  • movesPaneWidth : CSS size
    • If no size given defaults to CSS overlay hidden. 300px is a good start.
  • flipped : true|false
    • Controls if board is from the White's or Black's view. Flipped true means that the board is from the Black's point of view.
  • imagePrefix : path/
    • Override image installation directory
  • moveFont : CSS font (Arial, Tahoma)
    • The font of the moves.
  • moveFontSize : CSS font size
    • The font size of the moves.
  • moveFontColor : font color (eg. #000000)
    • The font color of the moves.
  • commentFont : CSS font (Arial, Tahoma)
    • The font of the comments.
  • commentFontSize : CSS font size
    • The font size of the comments.
  • commentFontColor : font color (eg. #000000)
    • The font color of the comments.
  • boardSize : CSS size
    • The size of the playing board. Defaults to 257px. The same size is meant for width & height.
  • squareSize : CSS size
    • The size of a board square. Defaults to 31px. The same size is meant for width & height.
  • blackSqColor : CSS color
    • The color of the dark squares.
  • whiteSqColor : CSS color
    • The color of the white squares.
  • skipToMove : Move number
    • When showing the board will skip to the move number. Mind that this is actually the double of the move. So move 10 means move 5 as this way it is easier to distinguish between white and black moves. 1 is for white's first move, 2 for black's first move etc.