Create a photo gallery slideshow on your blog using jQuery. This can be used to showcase your amazing photographs as a slideshow. Separate titles, descriptions can be given. Sharing buttons are also possible with this popup show.

Implement photogallery on blogger

Photo blogs and review blogs always need slideshows to showcase their work. Implementing slideshow is very easy with jQuery library. This article is about one of the most brilliant jQuery lightbox for photo galleries.
This is not limited to photos alone. We can showcase our videos, photos, codes, iframe(loading other websites inside your website) and many others. We can intermix videos, photos and others and see them in a single window as a slideshow.
View the demo below. This is a two image slideshow. Click any one of the below button. A popup box will appear. There are navigation buttons in popup box for the use of slideshow.
pic1 and pic2
More demos are there on this page.

First turn off the Blogger default Lightbox effect by going Settings > Posts and comments, under posts there is that option to turn it off.

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 click on the arrow to expand the code. 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 a rel='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 below picture for illustration. From there, you will get both thumbnail links(lowest size) and full resolution(highest size) image links.

image link picasa
Get the link from picasa
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[1]' should be same for all the pictures in a gallery. If you want another gallery in the same post, change theĀ  prettyPhoto[1] to prettyPhoto[2] or another name.

Additional configurations

In default, sharing buttons will be there with popup box. You can disable it by adding below 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.

How to make it work on Older post images

If you have large number of posts, you cannot edit your old posts to add rel tag for each and every images. Instead use this simple jquery function in your template. It will add the rel tag to all image links.. Find $(document).ready(function(){ in your Template and add below code just after it.

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

Check it. All done. If you are lazy enough to add rel tag in your posts, this script do that too. That means for future and past. Enjoy..


Get free updates in your mailbox..

Share this article