 |
|
Плагин фотоохоты дает Вам возможность преобразовывать любую выделенную область на веб-странице в фотоснимок, это все происходит при помощи видоискателя.
Использование
Во-первых необходимо загрузить плагин на сервер (это нужно для того чтобы сохранить структуру папок), а также включить таблицу стилей и файл JS на страницу, где Вы хотите его показать.
| <link rel="stylesheet" type="text/css" href="photoShoot/jquery.photoShoot-1.0.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="photoShoot/jquery.photoShoot-1.0.js"></script> |
Плагин написан под версию jQuery 1.3.2, но он также будет прекрасно работать и с более новыми версиями.
После этого Вы сможете преобразовывать любую выделенную область на странице с помощью .photoShoot().
| document.ready(function(){ var config = { image : 'picture.jpg', } $('#selector').photoShoot(config) }); |
Вы можете передать дополнительные параметры с объектом config согласно таблице представленной ниже.
Параметры
Поддерживаются следующие параметры:
| Параметры |
Значение по умолчанию | Описание |
| image | “” | Обязательный параметр. Укажите URL изображения, которое будет показано. |
| blurLevel | 4 | Чем больше значение, тем более размытое изображение. |
| opacity | 0.92 | При понижении прозрачности фон за видоискателем становится более темным. |
| viewFinder | { width:300, height:200, img:” } | Ожидание объекта со значением ширины, высоты и изображением – img. С помощью объекта Вы сможете изменить размер и рисунок видоискателя. |
| onClick | function(){} | Функция выполняется после нажатия. Объект передается в качестве параметра. См. ниже. |
Функция onClick
Данная функция выполняется после нажатия. Происходит имитирование вспышки камеры и вставка сделанного кадра в левый нижний угол изображения.
| document.ready(function(){ var config = { image : 'picture.jpg', blurLevel : 6, opacity : 0.8, onClick : alertPosition } function alertPosition(param){ alert("The viewfinder is located at: "+param.left+"x"+param.top); } $('#selector').photoShoot(config) }); |
Источник урока: http://tutorialzine.com
Данный урок подготовлен для Вас командой сайта http://web-master4ree.com/
