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
you can change theme of prettyphoto gallery with this option.
In above version, there are 6 themes available.
- pp_default
- light_rounded
- dark_rounded
- light_square
- dark_square
- facebook
- pp_default - default theme if you have not set any.
- 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'
- 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'
- 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'
- 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'
- 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'
This is the option to control the speed of prettyphoto animation effect. there are 3 options available.
- fast - When this Animation speed control option is set, animation will be fast.
- slow - When this Animation speed control option is set, animation will be slow.
- normal - When this Animation speed control option is set, animation will be normal.
If you want to enable or disable slideshow of the images in page,this option will be useful
- false - Set to false if you don't want to allow slideshow.
- interval time in ms - if you want to enable slideshow, type the value of interval time in milliseconds. for example, 5000.
This is where you can control whether the slideshow to be auto-played or not.
- true - If you want to auto play the slideshow without user clicking on slideshow, just enable it by setting the value to true.
- false - Else if you don't want o play slideshow automatically,then set the option to false
Use this option to set the opacity of background,where our prettyphoto pops up.
- Value between 0 and 1 - example : 0.8
With this prettyphoto configuration option, you can hide or show the title content of the image .
- true
- false
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.
- true
- false
defaultwidth of the prettyphoto gallery
default height of prettyphoto gallery
Use this option for changing the separator for the gallery counter 1 "of" 2. example : / or \ or |
The padding on each side of the picture
Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto
Set the flash wmode attribute
Automatically start videos: True/False
If set to true, only the close button will close the window
Allow prettyPhoto to update the url to enable deeplinking.
If set to true, a gallery will overlay the fullscreen image on mouse over
Set to false if you open forms inside prettyPhoto
Called everytime an item is shown/changed
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/
