Embed a game

From Jocly Wiki
Jump to: navigation, search
Jquery-jocly.png

Embedding a game your page is very simple thanks to the Jocly JQuery plugin.

First copy the last version of these 2 files to your server (or local machine) from the GitHub project repository (you can directly right click + save as):


The static way

In the <head> section of your page include the following lines:

    <link rel="stylesheet" href="jquery.jocly.min.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="jquery.jocly.min.js"></script>

In the body of your page, just insert this line of code:

<div data-jocly data-jocly-init='["localPlay","classic-chess"]'></div>

Et voilà!

Reload your page, you should see the game loading.

In this case we have chosen classic-chess, this is the machine name of the game.

Machine name of available games can be found in Jocly code inspector. Select the game you want to embed, the first displayed info field will be the Game machine name.


Example of complete page including a chess game:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Playing Chess</title>
    <link rel="stylesheet" href="jquery.jocly.min.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="jquery.jocly.min.js"></script>
  </head>
  <body>
    <div data-jocly data-jocly-init='["localPlay","classic-chess"]'></div>
  </body>
</html>

The dynamic way (recommended)

If you want to have more control on your embedded widget, we recommend to use the dynamic script way:

In the <head> section of your page insert the same lines

    <link rel="stylesheet" href="jquery.jocly.min.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="jquery.jocly.min.js"></script>

In the <body> of your page insert a <div> called for instance jocly-applet where you want to place your game:

<div id="jocly-applet"></div>

Then go back to <head> section to add a script that will dynamically populate this div when the page is ready (completely loaded):

    <script>
$(document).ready(function() {
    $("#jocly-applet").jocly().jocly("localPlay","classic-chess");
});
    </script>

And that's it. At this point your game should show up in your page.

It's now easy to play with all the options and methods of the plugin

Complete page example

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Playing Chess</title>
    <link rel="stylesheet" href="jquery.jocly.min.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="jquery.jocly.min.js"></script>
    <script>
$(document).ready(function() {
    $("#jocly-applet").jocly().jocly("localPlay","classic-chess");
});
    </script>
  </head>
  <body>
    <div id="jocly-applet"></div>
  </body>
</html>