You might have seen prettyPhoto plugin effects.
Because i needed some lightweight solution that help user to get rid off opening the image as in a new window and to come back to image containing page, they have to hit backspace or back button.
This Solution worked fine, user doesnot need to navigate from the page and can see the large image in a wraped box that too fixed and beautiful.

If you havent seen this yet, Click on any images in my posts.

To add this to your blog or website, you will have to follow simple steps below.

In your template or page's source code, find </head>  (Press Ctrl+F and Search this).
Add below lines just before that </head>  tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type='text/javascript'></script>
<script src='http://aslamise.googlecode.com/files/prettyPhoto.js' type='text/javascript'></script>
<link href='http://cdn.jsdelivr.net/prettyphoto/3.1.5/css/prettyPhoto.css' media='screen' rel='stylesheet' type='text/css'/>


If there is jQuery already called in your page or template, then remove first line of the above code.
So it will be

<script src='http://aslamise.googlecode.com/files/prettyPhoto.js' type='text/javascript'/></script>
<link href='http://cdn.jsdelivr.net/prettyphoto/3.1.5/css/prettyPhoto.css' media='screen' rel='stylesheet' type='text/css'/>


Now, Find the </body> tag in your page.
Then Insert this script just before that tag.

<script charset='utf-8' type='text/javascript'>
 jQuery(document).ready(function($) {
$('a > img').parent().attr('rel', 'prettyPhoto');
 });
jQuery("body").on("click", "a[rel^='prettyPhoto']", function() {
    jQuery.prettyPhoto.open(jQuery(this).attr("href"),"","");
    return false;
})
</script>

The above script says the browser to add a "rel='prettyPhoto()'" attribute to the parent <a> tag where there is an <img > tag available.
For example
I have this code which shows an image ,and if we click on it ,it will guide you to the Fullsize image.
To know how to easily call the thumbnail of blogger hosted image, use search box.

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlzwh8_uDtK3JneMECI8NZeqldOQKbV3EHSh_0kBk0ycY9wXUFJBKs31t0wUrETDI2vrRMuk96yFABGf-Wxj-9QP1n5AhLhkHkegB6kHq9BPew2TE8MnmLADAxJXn_Rz1klTZP52aKkuSk/s1600/Beautiful-Rose-Flowers-Pictures-And-Wallpapers74.j.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlzwh8_uDtK3JneMECI8NZeqldOQKbV3EHSh_0kBk0ycY9wXUFJBKs31t0wUrETDI2vrRMuk96yFABGf-Wxj-9QP1n5AhLhkHkegB6kHq9BPew2TE8MnmLADAxJXn_Rz1klTZP52aKkuSk/s320/Beautiful-Rose-Flowers-Pictures-And-Wallpapers74.j.jpg" width="246">

</a>

Thats the all code i have inserted from my side.
now, after included this script, it will turn into this.

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlzwh8_uDtK3JneMECI8NZeqldOQKbV3EHSh_0kBk0ycY9wXUFJBKs31t0wUrETDI2vrRMuk96yFABGf-Wxj-9QP1n5AhLhkHkegB6kHq9BPew2TE8MnmLADAxJXn_Rz1klTZP52aKkuSk/s1600/Beautiful-Rose-Flowers-Pictures-And-Wallpapers74.j.jpg" rel="prettyPhoto"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlzwh8_uDtK3JneMECI8NZeqldOQKbV3EHSh_0kBk0ycY9wXUFJBKs31t0wUrETDI2vrRMuk96yFABGf-Wxj-9QP1n5AhLhkHkegB6kHq9BPew2TE8MnmLADAxJXn_Rz1klTZP52aKkuSk/s320/Beautiful-Rose-Flowers-Pictures-And-Wallpapers74.j.jpg" width="246"> </a>

<a href='FULL-SIZE-IMAGE-URL'>

<img src='THUMBNAIL-OF-THE-ABOVE-IMAGE'></img>

</a>

NOW,the last step.
insert this code just after the above code.

<script charset='utf-8' type='text/javascript'>
jQuery(document).ready(function(){
jQuery("a[rel^='prettyPhoto'], a[rel^='lightbox']").prettyPhoto({
theme: 'dark_rounded', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
animation_speed: 'fast', /* fast/slow/normal */
slideshow: 5000, /* false OR interval time in ms */
autoplay_slideshow: false, /* true/false */
opacity: 0.80, /* Value between 0 and 1 */
show_title: true, /* true/false */
allow_resize: true, /* Resize the photos bigger than viewport. true/false */
default_width: 500,
default_height: 344,
counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
horizontal_padding: 20, /* The padding on each side of the picture */
hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
wmode: 'opaque', /* Set the flash wmode attribute */
autoplay: true, /* Automatically start videos: True/False */
modal: false, /* If set to true, only the close button will close the window */
deeplinking: true, /* Allow prettyPhoto to update the url to enable deeplinking. */
overlay_gallery: true, /* If set to true, a gallery will overlay the fullscreen image on mouse over */
keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */
changepicturecallback: function(){}, /* Called everytime an item is shown/changed */
callback: function(){}, /* Called when prettyPhoto is closed */
ie6_fallback: true
});
jQuery(".toggle_content").hide();
});
</script>


Thats All.. you have successfully set up prettyphoto.

To know more about Configuring and making the prettyPhoto more beautiful, please continue reading.
The last code block is where you can configure the prettyPhoto display and functions

• theme

you can change theme of prettyphoto gallery with this option.
In above version, there are 6 themes available.

1. pp_default 
2. light_rounded
3. dark_rounded
4. light_square
5. dark_square
6. facebook

1. pp_default - default theme if you have not set any.
2. light_rounded - This PrettyPhoto theme comes up with a light rounded gallery which holds the picture. to set it as default, Simply Call it in the configuration as   theme: 'light_rounded'
3. dark_rounded - This PrettyPhoto theme comes up with a Dark rounded gallery which holds the picture. to set it as default, Simply Call it in the configuration as   theme: 'dark_rounded'
4. light_square - This PrettyPhoto theme comes up with a light square gallery which holds the picture. to set it as default, Simply Call it in the configuration as   theme: 'light_square'
5. dark_square - This PrettyPhoto theme comes up with a dark square gallery which holds the picture. to set it as default, Simply Call it in the configuration as   theme: 'dark_square' 
6. facebook - This PrettyPhoto theme comes up with old facebook like gallery which holds the picture. to set it as default, Simply Call it in the configuration as   theme: 'facebook'

• animation_speed

This is the option to control the speed of prettyphoto animation effect. there are 3 options available.

1. fast - When this Animation speed control option is set, animation will be fast.
2. slow - When this Animation speed control option is set, animation will be slow.
3. normal - When this Animation speed control option is set, animation will be normal.

• slideshow

If you want to enable or disable slideshow of the images in page,this option will be useful

1. false - Set to false if you don't want to allow slideshow.
2. interval time in ms - if you want to enable slideshow, type the value of interval time in milliseconds. for example, 5000.

• autoplay_slideshow

This is where you can control whether the slideshow to be auto-played or not.

1. true - If you want to auto play the slideshow without user clicking on slideshow, just enable it by setting the value to true.
2. false - Else if you don't want o play slideshow automatically,then set the option to false

• opacity

Use this option to set the opacity of background,where our prettyphoto pops up.

1. Value between 0 and 1 - example : 0.8

• show_title

With this prettyphoto configuration option, you can hide or show the title content of the image .

1. true
2. false

• allow_resize

Resize the photos bigger than viewport,If you want to allow resizing the prettyphoto opened window, set it as true, else,t o to false.

1. true
2. false

• default_width

 defaultwidth of the prettyphoto gallery

• default_height

default height of prettyphoto gallery

• counter_separator_label

Use this option  for changing  the separator for the gallery counter 1 "of" 2. example : /  or \ or | 

• horizontal_padding

The padding on each side of the picture

• hideflash

Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto

• wmode

Set the flash wmode attribute

• autoplay

Automatically start videos: True/False 

• modal

If set to true, only the close button will close the window

• deeplinking

Allow prettyPhoto to update the url to enable deeplinking.

• overlay_gallery

If set to true, a gallery will overlay the fullscreen image on mouse over

• keyboard_shortcuts

Set to false if you open forms inside prettyPhoto

• changepicturecallback

Called everytime an item is shown/changed 

• callback

 Called when prettyPhoto is closed

Thats the all option you can change.Please dont change anything if you dont know what you are doing, and if any help needed, ask in comments.

Extras


If you want to enable lightbox only inside specific divs , then

Change This
$('a > img').parent().attr('rel', 'prettyPhoto');
TO
$('.class-name a > img').parent().attr('rel', 'prettyPhoto');

Where .class-name is the name class of the div.
If you want to add prettyphoto plugin inside only in blog POSTS,
The code will be

$('.post-body a > img').parent().attr('rel', 'prettyPhoto');



If you are experiencing problems Please view a working example here  ->

http://jsfiddle.net/Aslamise/gXkDu/