HomeGuideCrea il tuo puzzle personalizzato con JQuery!

Crea il tuo puzzle personalizzato con JQuery!

Credo che tutti conosciate il gioco del 15, ovvero quel puzzle a tessere scorrevoli incastonate inil logo di webinblack, come si presenterebbe nel gioco delle mattonelle una cornice quadrata, che compongono una sequenza numerica e/o una immagine. Ciò che forse non sapevate è che realizzarne una versione personalizzata da giocare online è più facile di quanto non immaginate.

Grazie ad uno script basato sul frameworks JQuery, in pochi passaggi e con gran semplicità, il buon Ben Nadel (per chi non lo conoscesse: un autentico DRAGO di JavaScript), sul suo blog personale  ci da le indicazioni su come fare. Per tutti quelli che tra voi non hanno ancora “socializzato con la lingua d’oltremanica”, ecco una spiegazione pratica (e tricolore) a riguardo.

Mi rendo conto che l’argomento in oggetto non sia proprio il top in quanto ad utilità, ma si tratta di un qualcosa che è quantomeno d’effetto.

Addentriamoci.

Premesso che se vi inoltrerete nella ricerca per “puzzle jQuery“, troverete altre valide alternative, ho preferito parlarvi di questa particolare versione anche per via del sito su cui trovate lo script, molto carino e comunicativo.

Per cominciare creiamo una cartella all’interno della quale copiare gli script “jquery.puzzle.js” e “jquery-latest.pack.js“, e salvare il file in cui verrà coordinato il tutto e -ovviamente- una immagine.

questo indirizzo, potrete trovare una spiegazione e le relative snippet di codice, ma il mio consiglio (yeti-style) è quello di scaricare la pagina Demo per intera, quindi ricavare i files sopraindicati e successivamente incollare il seguente codice all’interno di un file vuoto, che salverete in formato html.

[spoiler show=”Mostra codice HTML” hide=”Nascondi codice HTML”]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html>

<head>

<title>jQuery Demo: Creating A Sliding Image Puzzle</title><script type=”text/javascript” src=”jquery-latest.pack.js”></script>

<script type=”text/javascript” src=”jquery.puzzle.js”></script>

<script type=”text/javascript”>// When the document is ready, hook up the puzzle

// functionality to the targeted DIVs.

$(

function(){

$( “div.puzzle, p” ).puzzle( 100 );

}

);

</script>
</head>
<body>

<h1>
Grazie WebinBlack!
</h1>

<p>
All’interno del DIV, si comporrà il puzzle.
</p>

<div
class=”puzzle”
style=”float: left ; margin-right: 50px ;”>

<img
src=”./il/link/alla/vostra/immagine”
width=”333″
height=”500″
alt=”Il  mio puzzle!!”
/>

</div>

</div>

</body>
</html>[/spoiler]

E’ assodato che se i files non si dovessero trovare nella stessa cartella della pagina che li richiama, il path relativo ad essi andrà corretto opportunamente(più lungo a dirsi che a farsi). Altro fattore da tenere a mente è che lo spazio deve essere proporzionato alla vostra immagine, e a tal riguardo, andranno compilati i  parametri  (width ed height) relativi ai lati del file che avrete scelto (non dimenticate di indicare anche il path!). A questo punto, salvo errori di battitura, la vostra pagina sarà pronta…il gioco è fatto (è il caso di dirlo).

Troppo facile, no?

Luigi Lacquaniti
Luigi Lacquaniti
Tecnico e Web designer freelance.

Ultime dal Blog