Today,i would like to introduct to you about lightBox for jquery,I had tried to made such a effect,but it was not so perfect,or i did not find the suitable plugin,but i will record one that adapted to me here now.
I find the plugin by searching ‘lightbox for jquery‘,i it is really good.Just one jquery file,one simple css file and the required images.
You can use it by this way:

$(function() {
$(‘#gallery a’).lightBox();
});

There are a few options to set to customize your own favourite style,include

"overlayBgColor": Background color to overlay;
"overlayOpacity":Opacity value to overlay;
"fixedNavigation":Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface;
"imageLoading":Path and the name of the loading icon;
"imageBtnPrev":Path and the name of the prev button image;
"imageBtnNext":Path and the name of the next button image;
"imageBtnClose":Path and the name of the close btn;
"imageBlank":Path and the name of a blank image;

There are alse shortcut for you to use this plugin,for example:to close the interface with letter “c”,to show the previous image with letter “p”,to show the next image with letter “n”.
See a demo ,click here.This plugin lightbox for jquery is really simple,i wish you would like it.