Download from Github. The code for the example below is at the bottom of this page. See more examples here
Once a pair of matching cards is disclosed, those cards become regular links. You can then click on them again to open the link.
Include jQuery, jQuery-UI and the plugin (place this in the <head>
):
<script src="https://code.jquery.com/jquery-2.2.4.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="css/jquery.memory-game.css"> <script src="js/jquery.memory-game.js"></script>
Markup that will be converted into cards (place this somewhere in the <body>
):
<div id="memory-game"> <a href="http://en.wikipedia.org/wiki/Iguana"><img width="100" height="100" src="example-images/iguana.jpg"></a> <a href="http://en.wikipedia.org/wiki/Panda"><img src="example-images/panda.jpg"></a> <a href="http://en.wikipedia.org/wiki/Lemur"><img src="example-images/lemur.jpg"></a> <a href="http://en.wikipedia.org/wiki/Penguin"><img src="example-images/penguins.jpg"></a> <a href="http://en.wikipedia.org/wiki/Polar_bear"><img src="example-images/polarbear.jpg"></a> <a href="http://en.wikipedia.org/wiki/Rabbit"><img src="example-images/rabbit.jpg"></a> <a href="http://en.wikipedia.org/wiki/Rhinoceros"><img src="example-images/rhino.jpg"></a> <a href="http://en.wikipedia.org/wiki/Common_seal"><img src="example-images/seal.jpg"></a> <a href="http://en.wikipedia.org/wiki/Zebra"><img src="example-images/zebra.jpg"></a> </div>
$(function(){ $("#memory-game").memoryGame(); });