jqPuzzle

Customizable Sliding Puzzles with jQuery

Demo page

On this page you can find several sliding puzzles which have been created with jqPuzzle. Each puzzle is individually styled and customized. Switch through the tabs to see the HTML/JavaScript/CSS code needed to build the puzzle.

Each example requires the jQuery and jqPuzzle files to be referenced in the source. See Preparations for detailed information.

« Home page

The easy way – Adding a class name

Brandenburger Tor, Berlin 
<img src="berlin.jpg" alt="Brandenburger Tor, Berlin" class="jqPuzzle" />

This example is made by simply adding class="jqPuzzle" to the image tag. Since the default theme is used, no additional CSS styles needs to be defined.

Isla Tabarca, Spain 
<img id="heli" src="helicopter.jpg" alt="Isla Tabarca, Spain" class="jqPuzzle" />

This example is made by simply adding class="jqPuzzle" to the image tag. Additionally, id="heli" is defined which is used for CSS styling.

The CSS only redefines/resets the style properties which differ from the default theme.

#heli {
    padding: 5px;
    border: 1px dotted #FFFFFF;
    background-color: #333333;
}

#heli.jqp-solved {
    background-color: #6FBF46;
}

#heli .jqp-wrapper {
    border-color: #000000;
    background-color: #D5EFF2;
}

#heli .jqp-piece {
    border-color: #444444;
    color: #FFFFFF;
    font-size: 10px;
}

#heli .jqp-piece:hover {
    border-style: solid;
    border-color: #000000;
}

#heli .jqp-piece span {
    padding: 1px;
    background-color: #444444;
}

#heli .jqp-piece:hover span {
    background-color: #000000;
}

#heli .jqp-controls a {
    font-size: 10px;
    margin-right: 3px;
    padding: 2px;
    border-style: none;
    background-color: #3499D6;
    color: #FFFFFF;
}

#heli .jqp-controls a:hover {
    background-color: #74C9F6;
}

#heli .jqp-controls a.jqp-toggle,
#heli .jqp-controls a.jqp-down {
    padding: 1px;
    border: 1px solid #BBBBDD;
    background-color: #0057BF;
}

#heli .jqp-controls a.jqp-disabled {
    background-color: #195D8C;
    color: #397DAC;
    border-style: none;
    padding: 2px;
}

#heli.jqp-solved .jqp-controls a.jqp-disabled {
    background-color: #49AF15;
    color: #69CF35;
    border-style: none;
    padding: 2px;
}

#heli .jqp-controls span {
    font-size: 10px;
    color: #FFFFFF;
    padding: 0px;
    margin: 0px;
    margin-top: 5px;
}

#heli .jqp-controls span.jqp-disabled {
    color: #AAAAAA;
}

#heli.jqp-solved .jqp-controls span {
    background-color: transparent;
    border-style: none;
}

#heli .jqp-controls span input {
    background-color: #777777;
    color: #FFFFFF;
    font-size: 10px;
    padding: 0px;
    padding-right: 1px;
    margin-left: 0px;
    font-weight: normal;
}

#heli .jqp-controls span.jqp-disabled input {
    background-color: #555555;
    color: #888888;
}

#heli.jqp-solved .jqp-controls span input {
    background-color: #8FDF56;
}

Basic configuration – Using the CSS micro format

Sheep 
<img id="sheep" src="sheep.jpg" alt="Sheep" class="jqPuzzle jqp-r3-c3-h3-NDE" />

This example uses the CSS micro format, which is a specially formed class name applied to the image tag. It is used in conjunction with the regular class name jqPuzzle.

The resulting puzzle has 3 rows (-r3) and 3 cols (-c3), its hole is located at position 3 (-h3). Three flags (-NDE) indicate that the numbers and the moves/seconds-display are initially hidden.

Note that there is id="sheep" defined which is used for CSS styling.

This style sheet also works without the default theme (jQuery.jqPuzzle.css) attached.

#sheep {
    padding: 10px;
    padding-bottom: 12px;
    border: 3px dotted #FFFFFF;
    background-color: #7B8B29;
}

#sheep .jqp-wrapper {
    padding: 2px;
    border: 1px dotted #FFFFFF;
    background-color: #454509;
}

#sheep .jqp-piece {
    border: 1px dotted #FFFFFF;
    font-size: 45px;
}

#sheep .jqp-piece:hover {
    border-style: solid;
    opacity: 0.8;
}

#sheep.jqp-solved .jqp-piece:hover {
    border-style: dotted;
    opacity: 1.0;
}

#sheep .jqp-controls a {
    margin-top: 10px;
    margin-right: 8px;
    padding: 3px 30px;
    border: 1px dotted #FFFFFF;
    background-color: #454509;
    color: #FFFFFF;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    float: left;
}

#sheep .jqp-controls a:hover {
    background-color: #5B8F08;
}

#sheep .jqp-controls a.jqp-toggle,
#sheep .jqp-controls a.jqp-down {
    margin-top: 6px;
    padding: 7px 30px;
    background-color: #1A1408;
}

#sheep .jqp-controls a.jqp-disabled {
    border-color: #555519;
    background-color: #6B7B19;
    color: #555519;
}
mussels 
<img src="mussels.jpg" alt="mussels" class="jqPuzzle jqp-fr-r4-c4-h4-s1-BC" />

This example uses the CSS micro format, which is a specially formed class name applied to the image tag. It is used in conjunction with the regular class name jqPuzzle.

The interface elements are displayed in French (-fr). The resulting puzzle has 4 rows (-r4) and 4 cols (-c4). The hole is located at position 4 (-h4) and the puzzle is shuffled in one single round (-s1). The two flags (-BC) indicate that both the 'Original' and 'Numbers' buttons are not displayed.

Note that in this example we use the full micro format jqp-fr-r4-c4-h4-s1-BC for styling.

The CSS only redefines/resets the style properties which differ from the default theme.

.jqp-fr-r4-c4-h4-s1-BC {
    padding: 10px;
    border: 4px double #333333;
    background-color: #A9A17A;
}

.jqp-fr-r4-c4-h4-s1-BC .jqp-wrapper {
    border-color: #333333;
    background-color: #6F6A53;
}

.jqp-fr-r4-c4-h4-s1-BC .jqp-piece {
    border-color: #333333;
}

.jqp-fr-r4-c4-h4-s1-BC .jqp-piece:hover {
    border-color: #EEEEEE;
    border-style: solid;
}

.jqp-fr-r4-c4-h4-s1-BC .jqp-controls a {
    border-color: #555555;
    background-color: #6F6A53;
}

.jqp-fr-r4-c4-h4-s1-BC .jqp-controls a:hover {
    background-color: #4F411D;
}

.jqp-fr-r4-c4-h4-s1-BC .jqp-controls span,
.jqp-fr-r4-c4-h4-s1-BC .jqp-controls span.jqp-disabled {
    padding: 1px 10px;
    border: 1px dotted #555555;
    color: #333333;
}

.jqp-fr-r4-c4-h4-s1-BC .jqp-controls span:hover {
    background-color: #C9C19A;
}

.jqp-fr-r4-c4-h4-s1-BC.jqp-solved .jqp-controls span {
    padding: 1px 10px;
    border: 1px dotted #555555;
    border-color: #0F8F08;
    background-color: #C9C19A;
    color: #0F8F08;
}

.jqp-fr-r4-c4-h4-s1-BC .jqp-controls span input,
.jqp-fr-r4-c4-h4-s1-BC .jqp-controls span.jqp-disabled input {
    background-color: #A9A17A;
    color: #444444;
}

.jqp-fr-r4-c4-h4-s1-BC.jqp-solved .jqp-controls span input {
    background-color: #C9C19A;
    color: #0F8F08;
}

.jqp-fr-r4-c4-h4-s1-BC .jqp-controls span:hover input {
    background-color: #C9C19A;
}

Get full control – The jQuery plugin syntax

This is me 
<img id="portrait" src="portrait.jpg" alt="This is me" />

The HTML shows a regular image tag with id="portrait" which will be used to select the image with jQuery. The id is also used for CSS styling.

The jqPuzzle()-method is called on a selection $('#portrait') which identifies the image. The only argument of the method is a settings object that is used to customize the puzzle.

<script type="text/javascript">
    $(document).ready(function() {
        $('#portrait').jqPuzzle({
            shuffle: true,
            control: {
                shufflePieces: false,
                toggleNumbers: false,
                toggleOriginal: false,
                counter: false,
                timer: false
            },
            style: {
                gridSize: 0,
                overlap: false,
                backgroundOpacity: 0
            }
        });
    });
</script>

This style sheet also works without the default theme (jQuery.jqPuzzle.css) attached.

#portrait {
    background-color: #221111;
    border: 5px outset #FF0000;
    padding: 20px;
    padding-bottom: 0px;
}

#portrait .jqp-wrapper {
    padding: 0px;
    border: 2px inset #FF0000;
    background-color: #442222;
}

#portrait .jqp-piece {
    border: 2px outset #333333;
    color: #FFFFFF;
    font-size: 30px;
    line-height: 30px;
    text-align: right;
    font-family: Georgia, "Times New Roman", Times, serif;
}
Gasometer, Leipzig/Germany 
<img id="gasometer" src="gasometer.jpg" alt="Gasometer, Leipzig/Germany" />

The HTML shows a regular image tag with id="gasometer" which will be used to select the image with jQuery. The id is also used for CSS styling.

The jqPuzzle()-method is called on a selection $('#gasometer') which identifies the image. The method has two arguments that are used for customization: A settings object and a texts object { secondsLabel: 'Sek.' }. The settings object includes a callback function which is called when the puzzle has been solved.

<script type="text/javascript">
    $(document).ready(function() {
        $('#gasometer').jqPuzzle({
            cols: 5,
            hole: 16,
            numbers: false,
            language: 'de',
            success: {
                callback: function(results) {
                    alert('Gelöst in ' + results.moves + ' Zügen und ' +
                        results.seconds + ' Sekunden.');
                }
            },
            animation: {
                shuffleRounds: 1,
                slidingSpeed: 100,
                shuffleSpeed: 200
            },
            style: {
                gridSize: 0,
                overlap: false,
                backgroundOpacity: 0
            }
        }, {
            secondsLabel: 'Sek.'
        });
    });
</script>

This style sheet also works without the default theme (jQuery.jqPuzzle.css) attached.

#gasometer {
    padding: 15px 110px;
    border-style: none;
    border-top: 6px solid #D19D00;
    border-bottom: 6px solid #D19D00;
    background-color: #000000;
    font-family: Georgia, "Times New Roman", Times, serif;
}

#gasometer .jqp-wrapper {
    padding: 1px;
    border: 1px solid #D19D00;
    background-color: transparent;
}

#gasometer .jqp-piece {
    border: 1px solid #000000;
    color: #FFC105;
    font-size: 60px;
    line-height: 68px;
    text-align: center;
}

#gasometer .jqp-piece:hover {
    border-color: #856300;
    opacity: 0.9;
}

#gasometer .jqp-piece:hover span {
    padding: 3px;
    padding-top: 0px;
    background-color: #FFC105;
    color: #FFFFFF;
}

#gasometer .jqp-controls a {
    margin-top: 15px;
    margin-right: 5px;
    padding: 3px 16px;
    border: 3px double #000000;
    background-color: #D19D00;
    color: #FFFFFF;
    font-size: 16px;
    float: left;
}

#gasometer .jqp-controls a:hover {
    background-color: #FFC105;
}

#gasometer .jqp-controls a.jqp-toggle,
#gasometer .jqp-controls a.jqp-down {
    padding: 2px 15px;
    border-width: 4px;
    background-color: #856300;
}

#gasometer .jqp-controls a.jqp-disabled {
    background-color: #333333;
    color: #666666;
}

#gasometer .jqp-controls span {
    margin-top: 0px;
    padding: 2px;
    padding-top: 0px;
	padding-left: 0px;
    background-color: transparent;
    color: #CCCCCC;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    float: left;
}

#gasometer .jqp-controls span.jqp-disabled {
    color: #777777;
}

#gasometer.jqp-solved .jqp-controls span {
    padding: 2px;
    padding-top: 0px;
    padding-left: 0px;
    border-style: none;
    background-color: #0E7F07;
    color: #FFFFFF;
}

#gasometer .jqp-controls span input {
    margin: 0px 3px;
    padding: 1px 2px;
    border: 0px none;
    background-color: #222222;
    color: #EEEEEE;
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    text-align: right;
}

#gasometer .jqp-controls span.jqp-disabled input {
    color: #777777;
    font-weight: normal;
}

#gasometer.jqp-solved .jqp-controls span input {
    background-color: #59BF53;
    color: #FFFFFF;
}

« Home page

Valid XHTML 1.0 Strict jQuery JavaScript Library (Almost) Valid CSS :-)
This page uses syntax highlighting by Chili and flag icons by famfamfam.
Sliding puzzles are also known as n-puzzles, sliding block puzzles, slide puzzles, slider puzzles, and sliding tile puzzles.

If you enjoy jqPuzzle and feel generous, I would gladly accept a donation via my Amazon wish list.

a 2meter3 project