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);
Thanks for sharing informative content…Find noida software company to know more and Contact us on given no.…
ReplyDelete