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.
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 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 below picture for illustration. From there, you will get both thumbnail links(lowest size) and full resolution(highest size) image links. |
| 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..
If you enjoyed this post, share this with your friends..
its awesome thanks for sharing!!!great work
ReplyDelete@JeewanthaRukmal
nice blog looks cool
ReplyDeletei was looking the same one like this.. damn it, it takes me hundres hours to find these tutorials, im using blogger standard view but now i was thinking about changing it to this prettyPhoto - it's kinda #lightWeight i guess.. :D
ReplyDeleteThanx a bunch!
i got a problem here, i don't know why but i guess it wont show and still the images are still using the blogspot style and suddenly all my images are back to square one.. i need help here..
ReplyDeleteFirst turn off Blogger default lightbox effect. Go to Settings and disable it.
DeleteHey man, I have a weebly website. If you could explain how to implement this technique into the 'photo element' on weebly, I will finally be able to implement alt-tags with the photo galleries on my photography website, thus increasing my traffic because my pictures will show up in image searches. I'm using the 'Photo Gallery' element on my website to create galleries which does not work with alt_tags...
ReplyDeleteStephen Williams
Everything same except first step. Add that lines of code after <head>. All things after that is same. This is similar to all websites.
Deletehi, i followed your tutorial and it works! thanks :)
ReplyDeleteit just that why other image in the same post is not viewable in the same lightbox? i mean there is no 'next' 'previous' option?
really need your help.. thanks :))
Refer the "Using for image gallery with title and descriptions" section.
DeleteIf you want to put two pictures as a gallery, their rel tag should be like prettyPhoto[something]. You can put anything instead of "something", but should be same for both pictures. So these two pictures becomes a gallery, that means you can use prev and next buttons. And also you can create multiple galleries in the same post, but the value in square should be different from other gallery values.
thanks u so much for ur feedback..
Deletemeaning, its not possible for older image in same blog post to appear as gallery? i mean automatically appear as 1 gallery without manually adding the rel tag? :))
You can make them gallery, refer last topic. Use prettyPhoto[1] instead of prettyPhoto. Problem is, now you don't have any control over gallery. Every picture in the same post become the part of a single gallery.
DeleteThanks
ReplyDeleteWould there be a way to make the images that pop up in the slideshow hyperlinks to another website?
ReplyDeleteThank for sharing this. Can you provide the live demo?
ReplyDeleteNice blog and this article is really fantastic.
ReplyDeletehttp://infomedicalblog.blogspot.com
This comment has been removed by the author.
ReplyDeleteI have read sooo many different sites for solutions ... yours did it! THank you!!
ReplyDeletegood job men,thanks araba oyunları
ReplyDeleteooh very useful information.thank you so much.
ReplyDeleteGoogle has changed something in Blogger last night and script did not work anymore!?
ReplyDeleteIt is an update to the Template Editor. Update doesn't cause any problem for this plugin. Go ahead.
DeleteI agree-- mine worked beautifully until Blogger's update. Now it's not working. I'm searching for a fix. (http://designbychristi.blogspot.com/p/portfolio.html)
DeleteYou are using jQuery v1.8. For this plugin, you need the 1.7.2 also. Add the first line, the jQuery.
DeleteThanks for looking at it. I had jquery twice, so I tried taking off the older version to see if that would get it working again. I put the 1.7.2 back, but it still isn't working. It had been working though, so I'm not sure what changed. (http://designbychristi.blogspot.com/p/portfolio.html)
DeleteTry to redo the installation.. Still you can't work it out, send the template to me.. Mail me at basheer(at)bloggerhow.com
Deletegreat info thanks for share
ReplyDelete