Этот плагин к jQuery написал Ralf Stoltze. Мне очень понравилось – можно немного отдохнуть и расслабиться. И самое интересное – легко и просто можно подставить любую картинку, да хоть свою фотографию…

В общем расслабьтесь и поиграйте пока, а все пояснения потом, когда отдохнете.

Для того, чтобы сделать эту игрушку на своем сайте необходимо будет скачать библиотеку jQuery и плагин jqPuzzle.

В примере, исходный код которого Вы можете скачать на моем сайте, плагин jqPuzzle уже есть.

В раздел HEAD страницы надо файлов javascript, вот так:

<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" />

Дальнейшая настройка возможна тремя различными способами:
Способ первый, самый простой.
Просто добавляем на страницу понравившуюся картинку

<img src="image.jpg" alt="Моя картинка" class="jqPuzzle" />

и указываем имя класса class=»jqPuzzle». Это все! Пятнашки будут работать! Правда все настройки будут установлены по умолчанию и Вам придется довольствоваться надписями на кнопках на английском языке.

Способ второй, настройка с использованием CSS микроформатов.
Этот способ позволит настроить наиболее важные возможности. По сути, Вы просто добавляете второе (дополнительное) имя класса к уже существующему имени в тэге IMG, соблюдая следующий синтаксис:

jqp[-LANGUAGE]-rROWS-cCOLS[-hHOLE][-sSHUFFLE_ROUNDS][-FLAGS]

Здесь необходимо заменить символы в верхнем регистре реальными значениями. Все, что заключено в квадратные скобки можно не использовать. Приведу список возможных значений и примеры.

LANGUAGE: код языка. По умолчанию – английский (en). Доступные языки – fr, de, pt и я дописал для русского – ru (это если использовать исходный код с моего сайта).
ROWS: количество строк (от 3 до 9)
COLS: количество столбцов (от 3 до 9)
HOLE: позиция свободного места (от 1 до ROWS*COLS). По умолчанию – последняя позиция, в правом нижнем углу.
SHUFFLE ROUNDS: количество циклов перемешивания. По умолчанию установлено 3.
FLAGS: дополнительные опции с помощью которых можно настроить вид игрушки при загрузке страницы (перечислены ниже). Можно использовать любое количество флагов, в любом порядке.
S: картинка будет перемешана при загрузке страницы.
N: при загрузке цифры будут скрыты.
A: скрывает кнопку «Перемешать».
B: скрывает кнопку «Оригинал».
C: скрывает кнопку «Цифры».
D: скрывает количество перемещений.
E: скрывает количество секунд.

Несколько примеров, чтобы стало совсем понятно.

Пример 1: 3 строки, 5 колонок, «дырка» в позиции 5.

<img src="image.jpg" alt="Моя картинка" class="jqPuzzle jqp-r3-c5-h5" />

Пример 2: язык – немецкий, 5 строк, 5 колонок.

<img src="image.jpg" alt="Моя картинка" class="jqPuzzle jqp-de-r5-c5" />

Пример 3: язык – русский, 3 строки, 3 колонки, «дырка» в позиции 5, загружается со скрытыми цифрами и не отображается количество перемещений и время.

<img src="image.jpg" alt="Моя картинка" class="jqPuzzle jqp-ru-r3-c3-h5-NDE" />

думаю, что смысл здесь вполне понятен.

Способ третий, использование синтаксиса jQuery. 

<script type="text/javascript">
    $(document).ready(function() {
        $("img").jqPuzzle();
    });
</script>

это простейший пример, с настройками по умолчанию, который сделает пятнашки из всех тэгов img на странице. Понятно, что это для примера, реально Вы можете использовать любой селектор. Вообще же jqPuzzle() может принимать два аргумента, первый из которых содержит настройки, а второй – надписи на кнопках. Выглядеть это может вот так:

<script type="text/javascript">
$(document).ready(function(){
  var myTexts = {
    shuffleLabel: "Перемешать",
    toggleOriginalLabel: "Оригинал",
    toggleNumbersLabel: "Цифры",
    confirmShuffleMessage: "Перемешать?",
    movesLabel: "перемещений",
    secondsLabel: "секунд"
  }
  var settings = {
    rows: 4,
    cols: 4,
    hole: 16,
    shuffle: false,
    numbers: true,
    language: en
  }
  $(".jqPuzzle").jqPuzzle(settings, myTexts);
});
</script>

Что касается стилевого оформления – можно подправить все на свой вкус и цвет, естественно не трогая названий классов.

Согласитесь, прикольная игрушка?

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal