DataLife Engine > Версия для печати > mlens: jQuery-плагин для создания привлекательного увеличительного стекла

03.09.2013
Datalife Engine

Интерфейсы с использованием увеличительного стекла очень удобны, так как пользователи могут увеличивать изображения, чтобы рассмотреть их в деталях.mlens – это миниатюрный jQuery-плагин (~1кб в сжатом виде), который упрощает создание функционала увеличительного стекла.Плагин поставляется с несколькими параметрами вроде формы линзы (окружность или квадрат), размер линзы, а также опции оформления вроде рамки.На одной странице можно использовать несколько увеличительных стекол с разными параметрами. Также следует отметить наличие WordPress-плагина.

Требования: jQuery

Совместимость: все современные браузеры

Подключение файлов

Вы должны подключить у себя последнюю версию JQuery и уменьшенную версия mlens:

HTML

Вам нужно всего лишь изображение. Наш имидж имеет ID (green_monster) и параметр, называемых данных, который содержит путь к разрешением версии изображения:

green monster graffiti by Kotzian

CSS (опционал)

Вы можете укладывать изображение по выбору, наш имидж (green_monster), завернутый в DIV (green_wrapper) с такими характеристиками:

#green_wrapper {
        position: relative;
        width: 640px;
        height: auto;
        margin: 0 auto;
        border: 12px solid #fff;
        border-radius: 10px;
        box-shadow: 1px 1px 5px rgba(50,50,50 0.5);
        float: left;
}

JQuery

линза должна выводиться прямо на изображении (green_monster) и настраиваемые параметры показаны здесь:


$(document).ready(function()
{
        $("#green_monster").mlens(
        {
                imgSrc: $("#green_monster").attr("data-big"),       // path of the hi-res version of the image
                lensShape: "circle",                          // shape of the lens (circle or square)
                lensSize: 180,                                  // size of the lens (in px)
                borderSize: 4,                                  // size of the lens border (in px)
                borderColor: "#fff",                          // color of the lens border (#hex)
                borderRadius: 0                                 // border radius (optional, only if the shape is square)
        });
});

Исходники находятся в архиве.

Метки: