How to implement this plugin on Blogger
This plugin can be implemented in any websites including blogger. To implement on blogger follow the below procedure. First go to Template and then Edit HTML.Find
]]></b:skin> and add the following code just after the above code.(#)<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<link charset='utf-8' href='http://bloggerhow.googlecode.com/hg/prettyPhoto.css' media='screen' rel='stylesheet' type='text/css'/>
<script charset='utf-8' src='http://bloggerhow.googlecode.com/hg/jquery.prettyPhoto.js' type='text/javascript'/>
If you have already the jQuery library in your Template, skip the red colored code.Before going to next step, we need to check whether
$(document).ready(function(){ is present in your template or not. If it is there add following code just after the above code.(#)$("a[rel^='prettyPhoto']").prettyPhoto();
If the $(document).ready(function(){ is not present in your template, then find <body> add the following code just below.(#)<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
Now save the template. You are ready to use this plugin.How to use this plugin
From now on you can use this plugin. This can be used with any link. Only condition is you should add arel='prettyPhoto' tag with link. I am giving you some examples on how to use this plugin in your posts.Using with an inline link
Demo for this type is available in my blog. You can see many (#) links. These are pictorial illustration of tutorial. Below is an example. This method has an disadvantage. Title for each image is not possible in this method. But we can give individual descriptions.<a href="IMAGE ADDRESS HERE" rel='prettyPhoto' title='ADD DESCRIPTIONS OF THE PICTURE HERE'>LINK TEXT</a>
Using for image gallery with title and descriptions
For this we need thumbnail of each picture. If you are using Picasa for uploading pictures, this is very easy. See the link for a pictorial illustration(#). From there, you will get both thumbnail links and full resolution image links.
Don't use the full resolution picture link for creating link. If you have many pictures in your post, the loading will increase.
Use the following format to implement a photo gallery in your blog.<a href="fullscreen_image_1.jpg" rel="prettyPhoto[1]" title="Description to pictures.."><img src="thumbnail_image_1.jpg" width="width of thubmnail" height="some height" alt="Heading for image 1" /></a>
<a href="fullscreen_image_2.jpg" rel="prettyPhoto[1]" title="Description to pictures.."><img src="thumbnail_image_2.jpg" width="width of thubmnail" height="60" alt="Heading for image 2" /></a>
<a href="fullscreen_image_3.jpg" rel="prettyPhoto[1]" title="Description to pictures.."><img src="thumbnail_image_3.jpg" width="width of thubmnail" height="60" alt="Heading for image 3" /></a>
Replace the red colored text with thumbnail links and green colored with full resolution links. rel='prettyPhoto[something]' should be same for all the pictures in a gallery. If you want another gallery in the same post, change the something to another name.Additional configurations
In default, sharing buttons will be there with popup box. You can disable by adding green colored code inside the bracket as below.<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
});
</script>
There are many customizations are available. See this page for a full list. If you have any doubt in customization, let me know.
No comments:
Post a Comment