jQuery: Puzzle na stronę

Dodał Lisu w Trochę jQuery, Webmaster dnia 11 lipca 2009 | 6 Komentarzy

Jeśli chcesz urozmaicić swoją stronę internetową o układanki, to ten skrypt powinien Cię zainteresować. jqPuzzle oparty jest o bibliotekę jQuery. Jest prosty zarówno w instalacji, jak i w użytkowaniu. W rozwinięciu tego posta krok po kroku wytłumaczę jak użyć go na własnej stronie.

  1. Na sam początek należy pobrać bibliotekę jQuery. Możecie to zrobić na tej stronie (po pobraniu na razie nic z tym nie róbcie).
  2. Następnie trzeba ściągnąć pliki potrzebne do tego efektu. Znajdziecie je tutaj.
  3. Kiedy mamy już potrzebne materiały możemy je przygotować do użycia. W tym celu nazwę pliku z biblioteką (tego pierwszego) zmieniamy na po prostu jquery.js (będzie nam wygodniej niż jakby było jquery-1.3.2.min.js). Z paczki, którą pobraliśmy z drugiego linku, plikowi jquery.jqpuzzle.full.js zmieniamy nazwę na jquery.jqpuzzle.js.
  4. Teraz plik jquery.js i wszystkie pliki z drugiego katalogu wrzucamy do jednego folderu. Tworzymy tam też plik html, który będzie odpowiadał nam za wyświetlanie efektu (można również zastosować to na CMS’ach, ale trzeba potem pamiętać, aby dać odpowiednie odnośniki). W jego nagłówku (sekcja <head>) musimy dodać następujące linijki: 
    <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" />
  5. Aby wyświetlić układankę, w dowolnym miejscu na stronie dodajemy: 

    <img src="adres_naszego_obrazka" alt="jego_nazwa" class="jqPuzzle" />

    W miejscu gdzie pisze „adres_naszego_obrazka” podajemy link do obrazka, który ma być w puzzlach. Tam gdzie jest napisane „jego_nazwa” podajemy jego tytuł. Klasa jqPuzzle odpowiada za efekt. Jeśli chcemy ustawić ilość kolumn, wierszy i pozycję pustego miejsca to do klasy jqPuzzle dopisujemy np. jqp-r3-c5-h5, gdzie „r” oznacza liczbę wierszy, „c” ilość kolumn, a „h” wolne miejsce. Oto przykład:

    <img src="adres_naszego_obrazka" alt="jego_nazwa" class="jqPuzzle jqp-r3-c5-h5 " />
  6. W przypadku, gdy chcemy zmienić standardowe ustawienia musimy otworzyć plik jquery.jqpuzzle.js.

W całości nasz plik HTML powinien wyglądać mniej więcej tak:

<html>
<head>
	<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" />
</head>
<body>
	<img src="adres_naszego_obrazka" alt="jego_nazwa" class="jqPuzzle" />
</body>
</html>

Demo tego efektu możecie zobaczyć tutaj.

Enjoy!

6 Komentarzy »

  1. Domon mówi:

    O puzzle z mojego bloga :D

    comment-bottom
  2. Lisu mówi:

    Faktycznie :D

    comment-bottom
  3. Magnetic mówi:

    Fajne te puzzle :D ale łatwe przydałoby się więcej elementów

    comment-bottom
  4. Lisu mówi:

    @Magnetic widocznie nie przeczytałeś:

    „Jeśli chcemy ustawić ilość kolumn, wierszy i pozycję pustego miejsca to do klasy jqPuzzle dopisujemy np. jqp-r3-c5-h5, gdzie “r” oznacza liczbę wierszy, “c” ilość kolumn, a “h” wolne miejsce.”.

    comment-bottom
  5. Domon mówi:

    No Magnetic! I nie waż mi się na EF napisać, że ktoś nie potrafi czytać! Bo sam nie potrafisz jak widać :D

    comment-bottom

RSS z komentarzami do tego posta. TrackBack URL

Zostaw komentarz