adsPlace_1

Войти или Зарегистрироваться

adsPlace_3

Плагин для увеличения изображения на jQuery

Представляю Вашему вниманию интересный плагин для увеличения изображения на jQuery. Автором плагина являюсь я сам.

Забегая на перед, сражу скажу — он не идеален, но в большинстве случаев он будет полезен. Простая интеграция и малый размер скрипта(~2,5кб).

Как всегда, я расскажу как его подключить. Для примера, будем использовать демо к плагину.

Для того, что бы он работал, нужна библиотека jQuery. Подключаем библиотеку и файл скрипта между тегами <head></head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="jquery.zoomimage.js"></script> <!-- Наш плагин -->
<script src="scripts.js"></script> <!-- Файл с настройками (нужно создать отдельно) -->

Вот сами наши картинки:

<img id="first_image" src="metro.jpg" style="border: 5px solid gray" width="600" height="450"/>
<img id="second_image" src="image1.jpg" style="border: 5px solid silver" width="800" height="650"/>

В файле с настройками ( у меня scripts.js) выбираем наши изображения:

$('#first_image').zoomimage(); //Для изображения с id=first_image - стандартные настройки
$('#second_image').zoomimage({zoom: 5, borderSize: 10, borderColor: 'red'}); //Для изображения с id=second_image - пользовательские настройки

И получаем результат как в демо!

Плагин может принимать 3 параметра:

  1. Увеличение (в сколько раз)
  2. Толщина рамки лупы
  3. Цвет рамки лупы

Параметры по умолчанию: увеличение в 2 раза, рамка 2px серая.

Вот и все, что хотел рассказать. Если есть вопросы или предложения по работе плагина, пишите в комментарии.

Последние из рубрики

Комментарии(0)

  • Комментариев еще нет. Будь первым!

    Оставь свой отзыв

    Для вставки кода используйте кнопки php, html, javascript, css, sql

    * - поля обязательны к заполнению