This article is continuation of previous artcle. jqImgBlurEffects plugin is supports svg shapes - circle, ellipse, rectangle for mouse over and click event. You can define delay time to hide displayed shape. Observe below hml markup and this is sample html markup
<img src="https://lh3.googleusercontent.com/-zJ3ijSNpElc/VyGE80Uo5PI/AAAAAAAADk4/w2cGycz0gIoGz5HDci02WU70uXqJnhYAgCCo/s912/inNature.JPG" class="myImg" width="750px">
Import jquery and jqImgBlurEffects
<script src="jquery-1.11.3.min.js"></script>
<script src="jqImgBlurEffects/jqImgBlurEffects.js"></script>

Circle - MouseOver

var myOptns = {
    stdDeviation : 7,
    smouseover : {
        circle : {
            r : 100
        }
    }
};

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

Ellipse - MouseOver

var myOptns = {
    stdDeviation : 7,
    smouseover : {
        ellipse : {
            rx : 100,
            ry : 50
        }
    }
};

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

Rectangle - MouseOver

var myOptns = {
    stdDeviation : 4,
    smouseover : {
        rectangle : {
            width : 180,
            height : 60
        }
    }
};

$(".myImg").jqImgBlur(myOptns);
These below examples are for click event. Open demo and click on the blurred image 

Circle - Click

var myOptns = {
    stdDeviation : 7,
    smouseover : {
        circle : {
            r : 100
        }
    }
};

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

Ellipse - Click

var myOptns = {
    stdDeviation : 7,
    smouseover : {
        ellipse : {
            rx : 100,
            ry : 50
        }
    }
};

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

Rectangle - Click

var myOptns = {
    stdDeviation : 4,
    smouseover : {
        rectangle : {
            width : 180,
            height : 60
        }
    }
};

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

0 comments:

Blogroll

Follow this blog by Email

Popular Posts