jQuery puzzle - интересный плагин для создания пазлов RUDEBOXСозданный сайт можно использовать не только как средство донесения полезной информации для пользователя, а как инструмент для развлечения, к примеру — существует множество сайтов с различными играми реализованными с помощью jquery или html. А теперь проверка на возраст, если вы с поколения 90х, то вы наверняка помните увлекательную игру под названием «пятнашки». В данном уроке мы рассмотрим нечто похожее с помощью небольшого плагина jQuery.

 

Основная задумка плагина в том, что он позволяет разбить изображение на определенное количество квадратов, кроме этого существует возможность передвигать эти детали для соединения в единое целое. И так, приступим.

Шаг 1. HTML

Так как мы будем использовать плагин jquery.puzzle то его, и вспомогательные фреймворки, необходимо подключить к документу:

Разметка достаточно простая, нам необходимо указать изображение с желаемым соотношением сторон  и с атрибутом puzzle.

Следует заметить, что стили практически отсутствуют, по этому на их рассмотрении мы не будем останавливаться.

jQuery puzzle - интересный плагин для создания пазлов | RUDEBOX

Шаг 2. JavaScript

Далее нам необходимо инициализировать сам плагин:

В демонстрации вы можете ознакомится с различными вариантами разбиения сетки изображений.

Вот и все. Готово!

Читайте также: