Skip to content
jQuery Plugin For SVG Blur Effects On Image
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
jqImgBlurEffects
LICENSE
README.md
demo_circle.html
demo_circle_click.html
demo_circle_mouseover.html
demo_ellipse.html
demo_ellipse_click.html
demo_ellipse_mouseover.html
demo_introduction.html
demo_path.html
demo_polygon.html
demo_rect.html
demo_rect_click.html
demo_rect_mouseover.html
jquery-1.11.3.min.js

README.md

jqImgBlurEffects

jQuery Plugin For SVG Blur Effects On Image

Implementation

This plugin was created on the concept un-blurring a part of image using SVG. Read [this article] (http://blog.sodhanalibrary.com/2016/04/unblur-part-of-image-using-svg.html) for detailed expanation

Quick Demo

[Click here] (http://demo.sodhanalibrary.com/jqImgBlurEffects/demo_introduction.html) to see demo. You will understand, what you can do with this plugin ###Import jQuery

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

###Import jqImgBlurEffects JS & CSS

<link rel="stylesheet" href="jqImgBlurEffects/jqImgBlurEffects.css" />
<script src="jqImgBlurEffects/jqImgBlurEffects.js"></script>

###HTML markup

<img src="https://lh3.googleusercontent.com/-INnJOJVc12I/VyGFAq6JAWI/AAAAAAAADlA/oz5-_fc85_A26pvDD2rNk26_gr-WqoqCgCCo/s825/paypal-mafia.jpg" class="myImg" width="800px"/>

###JS Code Observe below syntax. You will get better idea after seeing examples

var myOptns = {
     stdDeviation:<blur factor - positive integer>,
		   brightness : <to increase and decrease of brightness of blurred part - float value - between 0 to 1>,
     sintros:{
       intromode:<must be true for step by step introduction. false will not allow introduction mode>,
       delay:<delay time from one step to another step>,
       transitionDelay:<animation time for transition>,
       srectangles:<array of rectangle objects>,
       scircles:<array of circle objects>,
       sellipses:<array of ellipse objects>,
       spaths:<array of path objects>,
       spolygons:<array of polygon objects>,
       stexts:<array of text objects>
     },
     srectangles:<array of rectangle objects>,
     scircles:<array of circle objects>,
     sellipses:<array of ellipse objects>,
     spaths:<array of path objects>,
     spolygons:<array of polygon objects>,
     stexts:<array of text objects>,
     smouseover : {
	      circle : <circle object>,
	      ellipse : <ellipse object>,
	      rectangle : <rectangle object>
     },
     sclick : {
	      circle : <circle object>,
	      ellipse : <ellipse object>,
	      rectangle : <rectangle object>
     }
};

$(".myImg").jqImgBlur(myOptns);

##Un-Blur In A Shape This plugin supports svg shapes - circle, ellipse, polygon, path , rectangle. Read this article for detailed explanation ###Examples

  1. Circle - [DEMO] (http://demo.sodhanalibrary.com/jqImgBlurEffects/demo_circle.html)
  2. Ellipse - [DEMO] (http://demo.sodhanalibrary.com/jqImgBlurEffects/demo_ellipse.html)
  3. Rectangle - [DEMO] (http://demo.sodhanalibrary.com/jqImgBlurEffects/demo_rect.html)
  4. Path - [DEMO] (http://demo.sodhanalibrary.com/jqImgBlurEffects/demo_path.html)
  5. Polygon - [DEMO] (http://demo.sodhanalibrary.com/jqImgBlurEffects/demo_polygon.html)

##Un-Blur On Mouse Over This plugin supports svg shapes - circle, ellipse, rectangle for mouse-over functionaliy. Read this article for detailed explanation ###Examples

  1. Circle - [DEMO] (http://demo.sodhanalibrary.com/jqImgBlurEffects/demo_circle_mouseover.html)
  2. Ellipse - [DEMO] (http://demo.sodhanalibrary.com/jqImgBlurEffects/demo_ellipse_mouseover.html)
  3. Rectangle - [DEMO] (http://demo.sodhanalibrary.com/jqImgBlurEffects/demo_rect_mouseover.html)

##Un-Blur On Click This plugin supports svg shapes - circle, ellipse, rectangle for click functionaliy. Read this article for detailed explanation ###Examples

  1. Circle - [DEMO] (http://demo.sodhanalibrary.com/jqImgBlurEffects/demo_circle_click.html)
  2. Ellipse - [DEMO] (http://demo.sodhanalibrary.com/jqImgBlurEffects/demo_ellipse_click.html)
  3. Rectangle - [DEMO] (http://demo.sodhanalibrary.com/jqImgBlurEffects/demo_rect_click.html)

##Introduction To Parts Of Image This plugin supports svg shapes - circle, ellipse, rectangle for this functionaliy. Read this article for detailed explanation ###Examples

  1. Circle - [DEMO] (http://demo.sodhanalibrary.com/jqImgBlurEffects/demo_introduction.html)
You can’t perform that action at this time.