Chess Replayer

Usage

A guide to setting up jquery.chess-replayer for use on your website

1. First include jquery, jquery.chess-replayer.min.js, and the chess-replayer stylesheet

   <link rel="stylesheet" type="text/css" href="css/chess-replayer.css" />
   <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
   <script type="text/javascript" src="js/jquery.chess-replayer.min.js"><script>
   

2. Next, include the actual pgn in a block element

   <div class="chess">
   1. e4 e5 2. Nf3 d6 3. d4 Bg4 4. dxe5 Bxf3 5. Qxf3 dxe5 6. Bc4 Nf6
   7. Qb3 Qe7 8. Nc3 c6 9. Bg5 b5 10. Nxb5 cxb5 11. Bxb5+ Nbd7 12. O-O-O Rd8
   13. Rxd7 Rxd7 14. Rd1 Qe6 15. Bxd7+ Nxd7 16. Qb8+ Nxb8 17. Rd8#
   </div>
   

3. Finally, in either the head or the body of the page, use the appropriate jquery selector to bind the replayer to your block level element

   Various settings can be passed as an argument to the replayer function.
   Here the settings size, lightColor, and darkColor are provided.

   Complete list of available settings

   <script type="text/javascript">
   $(document).ready(function () {
       $('.chess').replayer({
           size: 'small',
           lightColor: "#F0F0FF",
           darkColor: "#00BB99"
       });
   });
   </script>