jqPuzzle: face puzzle din imagini!


Mi-am amintit astăzi de un plugin jQuery care mi s-a părut atrăgător: jqPuzzle. I-am dedicat vreo 10 minute şi am rămas foarte impresionat: webmasterii (şi de fapt oricine are un sit) pot foarte uşor să construiască o mică pagină cu puzzle-uri precum cel de mai jos. Nu este un puzzle din acelea cu margini neregulate şi pe care să le tragi la poziţia corectă, ci acel joc pe care îl aveam într-o carcasă de plastic cu pătrate ce glisau (cu numere am avut eu).

img278

Ce este formidabil este că din câteva linii de cod o imagine (sau toate dintr-o pagină! atenţie cum folosiţi scriptul) poate să devină un puzzle. Da, la modul simplist trebuie să adăugaţi doar trei linii (scriptul jquery, scriptul jqPuzzle, CSS-ul de la jqPuzzle) dar cum avem pretenţii, vom avea şi mai multe linii. Baza este deci:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jqpuzzle.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css" />

Apoi ajunge de exemplu să scriem o astfel de linie

<img src="tes.jpg" class="jqPuzzle" />

iar imaginea indicată va fi puzzle! Se poate mai simplu? Nu cred. Şi acum pretenţiile. Am vrea ca puzzle-ul să aibă "butoanele" cu textele în limba română. Am vrea ca imaginea să fie împărţită în n linii şi m coloane. Am vrea culorile altele. Am vrea mesajul de final să fie în română. Şi câte nu am mai vrea. Nici o problemă, se poate, dar pentru aceasta trebuie parcursă documentaţia. Vă invit să vedeţi această pagină făcută de mine cu patru exemple şi parcurgând sursa nu cred că veţi avea probleme de înţelegere a codului. Dacă vreţi să descărcaţi exemplele vedeţi această arhivă zip.

Singurul „cost” al acestui script gratuit este că afişează textul jqPuzzle şi un click acolo duce pe pagina autorului scriptului. Mi se pare normal.

Revenire: Autorul scriptului mi-a semnalat probleme cu scriptul său în Internet Explorer. A dezvoltat o nouă versiune, am actualizat şi eu paginile şi arhiva, şi acum totul merge perfect în IE. Eu testasem doar în FF. Acum scriptul este chiar perfect! Poate vor mai urma şi alte jocuri cu jQuery.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *