Interactive Diagrams in your Chess Web Site
How to do it:
You can embed diagrams right into your html code like this:
The attribute data-pos describes the position. You can either type it manually or copy it from ChessBase or Fritz in the
position setup dialog box.
Further data-attributes:
-
Title: data-title="A Typical Sacrifice."
-
Hints: data-hint="Sacrifice in a way that blocks escape squares of the black king."
-
Solutions: data-solution="f3g5"
-
Arrows: data-arrows="c1g5,g5f6"
-
Square markers: data-squares="f7,g7,h7"
-
Moves: data-moves="1.e4 e5 2.Nf3 Nc6 3.Bb5" (use this instead of data-pos)
-
Play the position: data-play="1000", where the number is the thinking time of the internal engine in milli seconds.
Additionally, you have to add the following three lines to the
<head>
section of your html code:
The "jQuery" file in the second line is not needed if you have it already in your web page (quite common). jQuery version 1.12 is sufficient.