Плагин для увеличения изображения на 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 параметра:
- Увеличение (в сколько раз)
- Толщина рамки лупы
- Цвет рамки лупы
Параметры по умолчанию: увеличение в 2 раза, рамка 2px серая.
Вот и все, что хотел рассказать. Если есть вопросы или предложения по работе плагина, пишите в комментарии.