Skip to main content

Clear Lens - JQuery Plugin


This is my New jQuery Plugin.  You can find the working example at http://jsfiddle.net/ajai/k8Ube/
Hope it will be useful to some one.... 

I have used "pixastic" for image processing. 

To implement the plugin you have to include the pixastic library. and call the plugin in $(window).load event, Beacuse for image processing first the image should be loaded. Hope you all know $(window).load will be triggered after all the assets are loaded.

DEMO

Fork this on GitHub

How to use?

It is very simple to implement the plugin
1. include you jQuery 
2. include Pixastic Library
3. include the plugin code
4. Add attribute fitler="blur" for images that you want to apply
5. on $(window).load Event call the following code

$('img').blurLens();
or
$('img').blurLens({
    width: 200,
    height: 200,
    blur: 5
});

width - Width of lens
height - Height of lens
blur - Blur Amount

JQuery 

(function ($) {
    $.fn.blurLens = function (lensproperty) {

        return $(this).each(function (ind, elm) {
            if ($(elm).attr('filter') == 'blur') {
                var w = 50;
                var h = 50;
                var blur = 2;

                if (lensproperty && lensproperty.width) w = lensproperty.width;
                if (lensproperty && lensproperty.height) h = lensproperty.height;
                if (lensproperty && lensproperty.blur) blur = lensproperty.blur;

                $(elm).wrap('
'); var wrapper = $('
').width($(elm).width()).height($(elm).height()); wrapper.appendTo($(elm).parent()); var lens = $('
').css('background', 'url(' + $(elm).attr('src') + ') no-repeat 0 0').width(w).height(h); lens.appendTo(wrapper); var endL = $(wrapper).width() - w; var endT = $(wrapper).height() - h - 3; $(wrapper).on('mousemove', function (e) { lens.show(); var l = e.pageX - $(this).offset().left; var t = e.pageY - $(this).offset().top; lens.css({ left: l + 'px', top: t + 'px', 'background-position': '-' + l + 'px -' + t + 'px' }); }); $(wrapper).on('mouseout', function (e) { lens.hide(); }); $(elm).parent().css('visibility', 'visible'); $(elm).pixastic("blurfast", { amount: blur }); } }); } })(jQuery);

CSS

.blur {
    visibility: hidden;
    position:relative;
}
.blur .lens-wrap {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:200;
    overflow:hidden;
}
.blur .lens {
    display:none;
    width:50px;
    height: 50px;
    border:1px solid rgba(0, 0, 0, 0.5);
    box-shadow:0px 0px 10px #333;
    position:absolute;
    top:0;
    left:0;
    /*border-radius:100%;*/
    z-index:100;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
[filter="blur"] {
    visibility:hidden;
}

Popular posts from this blog

2D Reflection

#include <stdio.h> #include <stdlib.h> #include<graphics.h> #include<conio.h> #include<math.h> void draw2d(int,int [],int [],int,int); void main() { int gd=DETECT,gm; int x[20],y[20],x1[20],y1[20],tx=0,ty=0,i,fs; initgraph(&gd,&gm,""); printf("No of sides : "); scanf("%d",&fs); printf("Co-ordinates : "); for(i=0;i<fs;i++) { printf("(x%d,y%d)",i,i); scanf("%d%d",&x[i],&y[i]); } draw2d(fs,x,y,tx,ty); printf("translation (x,y) : "); scanf("%d%d",&tx,&ty); while(1) { clrscr(); cleardevice(); printf("1. X Reflection\n\n2. Y Reflection\n\n3. Exit"); draw2d(fs,x,y,0,0); switch(getche()) { case '1': for(i=0;i<fs;i++) { x1[i]=(tx+((x[i]-tx)*cos(M_PI))-((y[i]-ty)*sin(M_PI))); y1[i]=y[i]; } break; case '2': for(i=0;i<fs;i++) { x1[i]=x[i]; y1[i]=(tx+((y[i]-ty)*cos(M_PI))+((x[i]-tx)*sin(M_PI))); } break; case '3': close…

Simple Animation Using C

Here i have used fillpoly function to draw the object body and used fillellipse function to draw tier.
animation is done by looping through the objects x & y position until user hits a key. Keypress event is achived  by using kbhit function. Smoothness of animation is controlled by delay function.

Change the delay values to change the animation speed

Source:

#include<stdio.h> #include<conio.h> #include<graphics.h> #include<dos.h> void main() { int gd=DETECT,gm,i=-300,j; int poly[16]={100,100,250,100,250,50,300,50,325,90,325,140,100,140,100,100}; int tpoly[16]={100,100,250,100,250,50,300,50,325,90,325,140,100,140,100,100}; initgraph(&gd,&gm,""); getch(); while(!kbhit()) { for(j=0;j<16;j+=2) { poly[j]=tpoly[j]+i; } fillpoly(8,poly); setfillstyle(5,7); bar(275+i,60,295+i,85); setfillstyle(5,8); fillellipse(140+i,140,20,20); fillellipse(280+i,140,20,20); setfillstyle(1,0); fillellipse(140+i,140,10,10); fillellipse(280+i,140,10,10); setcolor(…

Personal Diary - A Mini Project Written in Turbo C With Graphical Interface

A Simple Personal Diary written in Turbo C with Graphical User Interface

Features,
Birthday ReminderNotesAddress Book The main part of the project is UI

'GUI.h' header file includes texbox, message-box and more custom graphical functions 
' Dairy.h' header file includes functionality of Personal Dairy
' Dairyload.c' includes loadingscreen, login screen, installation check etc
'Dairy.c' - execution stats here