Booking.com

If you are interested in photography like me, you may find this is a good idea to have a mini slidebox to show off your pictures in your blog, like the one you see in the right-hand sidebar here in this blog. All the pictures rolling in the slidebox were in fact drawn from my Picasa Album. Whenever you browse a new page in this blog the slidebox may refresh itself with different album. Sometimes it shows my pictures taken in India, sometimes in Japan, and sometimes in China. I have full control on the characteristic of my slideshow, like its size, if I allow visitors to find my Picasa Album by clicking on it, which pictures in my Picasa Album to include in the slideshow, if there is a pause, play, forward and backward button on it ... etc. In this article I'll show you how to create this mini slidebox in your blog.

Step 1, you have to tell Picasa which pictures you want to include in your slideshow. Login to Picasa, browse to one of the picture in your album, and you can see a 'Tags' option in the right side panel, like the one shows in the screen dump below.



You can put a tag on a picture by clicking the '+' button, and enter your tag in the prompted textbox. You can put the same tag on pictures in different album, and you can put multiple tags on the same picture. Each tag represents a photo series that you may later present in your slideshow. For example, the slideshow that you see in this blog comes from three tags, 'zzj_horz' stand for the pictures that I took in Zhangjiajie in China, 'kansai_horz' represent my pictures in Kansai Japan, and 'india_horz' tagged for my pictures in India.

After you finished all tagging, go back to the 'All Album' view in Picasa, and note the total number of pictures you selected in each tag, as shows in the screen dump below. You need this number later when you prepare the Picasa feed and javascript in your blog.



Step 2, now login to blogger, go to Layout => Edit HTML, and in the Edit Template box, search for the tag <head>. Under the <head> tag insert the following codes (only the red lines):

...<head>
<!--gfslideadd-on START-->
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script src='http://www.google.com/uds/solutions/slideshow/gfslideshow.js' type='text/javascript'/>
<!--gfslideadd-on END-->
<b:include data='blog' name='all-head-content'/>...



Step 3, go to Page Elements, and in the Layout panel under the title 'Add and Arrange Page Elements', click one of the 'Add a Gadget' link and in the pop-up page, select to add a HTML/ JavaScript gadget. In the pop-up configuration box, enter any title that you like to call your slidebox, and put the following script in the content box:

  1. <style type="text/css">
  2. .gss a img {border:none; padding:0;}
  3. .gss img {border:none; padding:0;}
  4. .gss {
  5. width: 213px;
  6. height: 142px;
  7. color: #dddddd;
  8. background-color: #cccccc;
  9. padding: 1px;
  10. }
  11. </style>
  12. <script type="text/javascript">
  13. function load() {
  14. var randomnumber=Math.floor(Math.random()*4);
  15. switch (randomnumber){
  16. case 0: {
  17. var samples = "http://photos.googleapis.com/data/feed/base/user/youralbum?kind=photo&alt=rss&tag=zzj_horz" + "&max-results=74";
  18. var options = {
  19. displayTime: 2000,
  20. transistionTime: 600,
  21. numResults : 74,
  22. scaleImages : true};
  23. break }
  24. case 1: {
  25. var samples = "http://photos.googleapis.com/data/feed/base/user/youralbum?kind=photo&alt=rss&tag=kansai_horz" + "&max-results=52";
  26. var options = {
  27. displayTime: 2000,
  28. transistionTime: 600,
  29. numResults : 52,
  30. scaleImages : true};
  31. break }
  32. default: {
  33. var samples = "http://photos.googleapis.com/data/feed/base/user/youralbum?kind=photo&alt=rss&tag=india_horz" + "&max-results=85";
  34. var options = {
  35. displayTime: 2000,
  36. transistionTime: 600,
  37. numResults : 85,
  38. scaleImages : true
  39. };
  40. break }
  41. }
  42. new GFslideShow(samples, "slideshow", options);
  43. }
  44. google.load("feeds", "1");
  45. google.setOnLoadCallback(load);
  46. </script>
  47. <div id="slideshow" class="gss">Loading...</div>

The line numbers serve explanation purpose only and you don't need to enter them into the content box. To save you from the re-editing work, you may download a copy of all the codes presented in this article, without the line numbers, from the Skydrive link below.



This is the entire code content that will display 3 series of photo from my Picasa Album. The code in line 14 generates a random number from 0 to 3, and if the number is zero the slidebox will display my photo tagged with zzj_horz (line 16). If the number is 1, photos tagged with kansai_horz will be displayed (line 24), and if this is 2 or 3, my photo tagged as india_horz will be display (line 32). This result in a bit higher chance to show off my pictures in India that I took recently.

You should note the syntax that I used to draw the feed from my Picasa Album, in line 17, 25 and 33. You have to replace the red parts of the expression, like 'youralbum' with the name of your own Picasa Album, 'zzj_horz' with your assigned tag name, and the number behind the codes "max-results=.." with the number of pictures included in the tag (remember the 2nd screen dump above?). The same number has to be specified in line 21, 29 and 37. There are many ways you can configure your Picasa feed expression. You may find more information from the Reference Guide of the Picasa Web Albums Data API. Other popular online photo albums like Flickr, PhotoBucket support similar feed expression, and you can also apply the feed in this slideshow API.

In case you don't like the complication of displaying multiple albums, you can eliminate the switch/case logics by deleting the green colored codes. In case you find it confusing, I also included a single album version of the code in my Skydrive link as mentioned above.

If you want to bring your visitors to your Picasa Album when they click on the slidebox, you can add the following code into the 'var options' definition (after line 21):
linkTarget : google.feeds.LINK_TARGET_BLANK,
Beware of the comma at the end of each line.

You may add navigation buttons like play, pause, forward, backward on the slidebox by adding the following code in the var options definition (after line 21):
fullControlPanel : true,
Again, beware of the comma at the end of each line.

The other configurations like width, height, display time, transistion time ... etc are self-explanatory. You may find full details of the slidebox configuration from the Developer Guide of the Google AJAX Feed API.

Okay, now suppose you setup your slideshow in the sidebar, how about if you want to include another slideshow in your post, like this post that describe my trip in Gulmarg. Your new slideshow may have different size, and draws different pictures from Picasa.

Step 4, while you are editing your post, you may switch to 'Edit HTML' view, and paste the following code in the appropriate position in your post.

  1. <style type="text/css">
  2. .gss1 a img {border:none; padding:0;}
  3. .gss1 img {border:none; padding:0;}
  4. .gss1 {width: 390px;    
  5. height: 260px;    
  6. color: #bbbbbb;    
  7. background-color: #aaaaaa;    
  8. padding: 1px;}
  9. </style>
  10. <script type="text/javascript">  
  11. function load1() {    
  12. var samples1 = "http://photos.googleapis.com/data/feed/base/user/youralbum?kind=photo&alt=rss&thumbsize=800&tag=gulmargonroad";    
  13. var options1 = {      
  14. displayTime: 2000,      
  15. transistionTime: 600,      
  16. numResults : 9,      
  17. scaleImages : true};    
  18. new GFslideShow(samples1, "slideshow1", options1);  
  19. }
  20. google.setOnLoadCallback(load1);
  21. </script>
  22. <div id="slideshow1" class="gss1">Loading...</div>

Like the slidebox you setup in the sidebar, you have to modify the name of you album, the tag name (line 12), and the number of pictures included in that tag (line 16). I need higher picture resolution in this slidebox, so I specified 'thumbsize=800' in the Picasa feed expression. Please note the thumbsize cannot be any number. The only valid numbers are 94, 110, 128, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, and 1600.

That's all about this blogger slidebox tutorial. Hope you'll enjoy it.