Create a custom Picasa slideshow in Blogger

In creating a website within Blogger, one of our first real challenges was developing a way to provide a slideshow within the website that was fully customized to the needs of the design, but also could be managed by the site owners without needing to know HTML. The "embed slideshow" provided by Picasa didn't cut it for a number of reasons (limited customization, auto-start issues, didn't loop, was Flash, etc.), the widgets that people had created were also as problematic and both provided too many features that we didn't want while also not providing the features we did want.

We embarked on the quest to create the perfect slideshow, the slideshow that could be easily customized, but still contained easy to use management functionality so it could be handled by a non-technologist.

In our coding adventures we have created 5 types of slideshows, all managed by Blogger and/or Google products:

  1. converted a standard LinkList widget into a slideshow manager with each URL being the URL of the image in the slideshow and the title field being the optional caption (example)
  2. used a Google Docs spreadsheet as the content (caption, image url, target url) for generating a slideshow
  3. generated a slideshow from a specified RSS feed from the blog itself, using the first image of each post as the slideshow image (example)
  4. dynamically re-organized all images within a blog post into a slideshow (example)
  5. used a Picasa album's RSS feed to generate a managed slideshow (example)

For this tutorial we're going to be demonstrating and providing sample code for example #5, using a Picasa web album (the default place where your Blogger blog's images are stored) and some RSS feed manipulation (similar to the recent Hangout on Air and post) as the means of managing all content aspects of the slideshow, then having CSS and Javascript variables handle the placement, style, and effects within the code.

Step #1: create your Picasa album

Nothing like a simple step to get the process started. Create your album, preferably with a simple name, no special characters, and no spaces if it can be helped. Add photos to the album.


Step #2: manage your photos

Give your images captions by clicking on the "add caption" link below each of the photos.


Step #3: change the permissions of the album

In order for the Picasa album to generate the RSS feed we need to change the album from its default permission of "private" to "public on the web". In the photo from Step #1, towards the top right corner, there is a lock icon that says "only you" with an edit link next to it. Click on the edit link and the following display window appears:


Change the "visibility" to be "public on the web" and hit Save changes.

Step #4: arrange the images

Going back to the main album page, click on the link for Organize to set the image order within your slideshow. You can set the order of the images in your album by a default order (such as by date or filename, or you can click and drag images to set your own order. Once done hit the Done button to save the order.


Step #5: the code

There is a lot of code here so unlike our normal practice of including it we're just pasting the clean version.

The code is comprised of 3 parts: the JQuery/Javascript and includes, the CSS styling for the two div elements, then the HTML div elements for where the slideshow and captions will be targeted. What we're doing in this code is establishing two div containers, one for the image slideshow and one for the image captions. Using JQuery, we're grabbing a RSS/JSON feed from Picasa of the album, then we're parsing out the received content into 4 arrays (slides, captions, heights, widths). Using these arrays, we then grab the first entry and set the containers with the first image and first caption. The CSS attribute of "background-size" is used to make the image fill the container on its largest axis (height or width). After the first image, we kick off the interval slideshow using the remainder of the images in the arrays. The javascript and CSS should go into your template before the </head> tag.

Using the divs of "slideshow" and "caption", you can place them anywhere within your page template and customize their dimensions using the CSS that is provided (or your own CSS). Change the heights and widths to suit your needs and the slideshow information will automatically fill them out properly. This information goes below the <body> tag but before the </body> tag, just about anywhere in your template.

Enjoy!

Questions or comments, please feel free to leave them in the comments below. If we make updates to the script we will post them here.

Additions!

2012-09-27: Per request we have added a random sort feature to the slideshow! Here is the code.

2012-09-29: Per request we have transformed the script into a function call! This allows you to place all of the script information into the template, but then place the style, divs, and executing script into a static page or blog post, and to set different albums for different pages within the site! Here is the code.

2012-10-30: If you're having an issue with the page jumping back to the top this is because the slideshow needs to be within a fixed container with specified height and width CSS attributes. You would make your divs look something like:

<div id='container' style='height: 600px; width: 500px;'>
<div id='slideshow'/>
<div id='caption'/>
</div>

Comments

  1. sorry i must be a real dummy,do i really paste all that code into the blogger html?

    ReplyDelete
    Replies
    1. In a sense, yes. But, like our other scripts, you will likely want to use if statements to say "only display on this page" or place those divs into the page in places that you want the slideshow to appear by using HTML widgets in your template.

      (make a backup of your blog template before attempting!)

      Delete
  2. Hi, 2 questions:
    1. Is there a way to shuffle the images with this method? I want the slideshow to display images in the album in random order.
    2. I want to create slideshow using my default blogger album, which I add images to with every new blogger post I make, and I want the slideshow to grab all images in the album. Do I still have to set the variable var picasaResults? If I currently have 100 images in my album, can I set the var to 1000 so I don't have to edit the code every time I add a new image to the album?

    ReplyDelete
    Replies
    1. Do you want each slide to be random, or a random sort of the initial array so that it goes once through and then repeats in the same order?

      Delete
    2. Hi Alvis, please give this code a try: http://pastie.org/4829507

      Added a "randomness" feature :)

      Yes, you can set the var to 1000 so you don't have to edit the code.

      Delete
  3. Just thought I would let you know that I am getting an error (Your HTML cannot be accepted: Tag is not closed: DIV) when I first paste the code into the blogger dynamic view HTML edit post. I haven't gone any further. Is anyone else getting this error?

    ReplyDelete
    Replies
    1. You're pasting all of the javascript into the template before /head and the divs into the post body, correct?

      if:
      < div id="slideshow" />
      < div id="caption" />

      is not working, try:
      < div id="slideshow">< /div>
      < div id="caption">< /div>

      Delete
    2. It may be that this code is not intended to be into into an actual post? I'm confused... Is this code to be used for the complete site? In other words, added to the site template? I'm using Dynamic Views and am not sure if I can add it.

      Delete
    3. Correct, not within a post, within the template.

      Delete
    4. Hi Enrique, please check out our new variation on the script which allows you to execute it from a page or post as well as place the div containers within the page/post.

      Delete
  4. Two or three questions:

    1. Is this only for the dynamic views or does it work on classic blogger too?

    In case it does apply in the classic view:

    2. Can I use it in posts etc.? For an example, I like to make posts including a slide show each with different pictures.

    From my little experience, I feel that some part of the code, goes into the template, (which stays to serve all the slideshows to follow), and the other part goes into the post (html editor). In that case which part of the code you have posted, goes where?

    Thank you in advance.

    I really like the slideshow on http://www.pinchgallery.com/

    ReplyDelete
    Replies
    1. Hi Nikos, per request we have transformed the script into a function call! This allows you to place all of the script information into the template, but then place the style, divs, and executing script into a static page or blog post, and to set different albums for different pages within the site! Here is the code.

      Delete
  5. OMG! Thank you very much! It's perfect! It's all I want in my blog.

    ReplyDelete
  6. This tutorial is fabulous. Simple and practical. I only wish it were not necessary to put the album open to the public, but limited, because would not that my photos were found by other users picasa or ending up in Google. Also would like to know how to insert navigation arrows to the slideshow, it would be very interesting. Thank you!

    ReplyDelete
    Replies
    1. Hi John, putting an album in Picasa as public is no different than the normal action of adding a photo to a blog post; both are public at that point. This script is just one example of a slideshow; you can populate any type of slideshow (the internet has tons of different scripts with different features).

      Delete
    2. By convention all photos of Blogger posts are archived in the picasa albums with limited visibility. It would be very difficult to implement this in code? I understand very little of javascript and most of the tutorials I see on the web are little explanation and it is frustrating for anyone and lay the matter. If you tell me how to put arrows or controller to navigate through the photos would be excellent. Thank you!

      Delete
    3. Another idea I've been thinking is to generate square images in slide-based tutorial that you've taught. Is that possible? Thanks for the quick response

      Delete
    4. Hi John, please consider commissioning us to build this functionality for you if it is something that you want for your website. It is a bit too specific for what we're posting to this site as we're trying to build tutorials that also contain generic examples/scripts/tips.

      Delete
  7. I don't know many about codes, Just doing trial and error, I paste the code as HTML and give my picasa Id and album name but it isnt showing any slide show only black blank and when i click it turns to a blue not more than that can you give me some hints.
    Thank you

    ReplyDelete
    Replies
    1. Where in your site are you placing the slideshow so that I can see the code in action?

      Delete
    2. for now I have just placed it above the my blog post. I have given the name as "slide".I paste the code with randomness function, If I paste the code with your gmail ID and album name as given in link should I see your album sliding Just for confirmation. It doesn't show even i put my Id and album name.

      Thanks

      Delete
    3. Hi Sagar, can you please provide a LINK to the post/site where you're having the trouble? Because of the way that the page is loaded you need to place the code into your TEMPLATE, not into a Gadget/Widget or the post page. Place it into your template before the < /head> tag.

      Delete
    4. I’m really enjoying the design and layout of your blog. It’s a very easy on the eyes which makes it much more pleasant for me to come here and visit more often. Did you hire out a developer to create your theme? Excellent work!

      Delete
    5. Hi Miguel, thank you! We are a web design and web development firm based in Massachusetts. You can see some examples of our work on Blogger as well.

      Delete
  8. Thank you very much now I understand, as you mentioned I was trying it as a Gadget.now it worked , But can i place it on the sidebar instead of the top of the blog or not??

    ReplyDelete
    Replies
    1. Sure, create a sidebar gadget with the div containers in it, but then have the javascript in the template.

      Delete
  9. Hi David,

    Thanks for the wonderful article but I seem to be getting a "Your HTML cannot be accepted: Tag is not closed: SCRIPT". Any idea where I might have gone wrong?

    I'm posting this into a page.

    On a side note, I've been spending 2 frustrating days trying to get a proper slideshow on my site!

    ReplyDelete
    Replies
    1. Hi Noah, please link me to the page? Did you put the script into the template as instructed and then REFERENCE the script from the static page? did you close your script tag with a < /script>?

      Delete
    2. This is the website http://electricdreamsdenimjeans.blogspot.com/

      I'm trying to embed the slideshow into a post or page.

      Ah, I must've missed that out on putting in the template first. You mean after pasting it on the template I re-paste the whole theme unto the static page again?

      Thanks for your time

      Delete
    3. Hi Noah, please visit this code.

      Place lines 1-71 into your template before < /head>

      Lines 73-88 go into the page or post that you want to add the slideshow. Customize as necessary in the function call of line 88.

      Delete
  10. Great work guys! This is amazing.

    I've loaded this as a simple home page entry.

    I take photos as a hobby and I'm not charging anyone for them. All I want is for people to view them on my Blog so I want to make the Blog experience as close as possible to the Picasaweb experience.

    The problem is volume.

    I've written a simple PHP script to take a Picasa username with album name and drop out simple HTML code that can be dropped into the Blogger Post. The end result being something like http://www.who-els.co.za/2012/10/nvsd-show-time-2012.html but the obvious page size is the problem.

    Ideally one would want to do something like your script, but allow the visitor to Facebook, Google+ or Twitter the single photos of there child out to the family, bringing them back to the Blogger site.

    ReplyDelete
    Replies
    1. Hi Johan, I'm not sure I fully understand what you're trying to do; please email me at david@confluentforms.com and we can discuss further!

      Delete
  11. Oh this is awesome. I've been looking for something that could give me a clean slideshow for a website I'm designing. I do have a couple questions, since I'm not very familiar with javascript and all. Where would I adjust things to change the speed at which the slides change and making it to where it doesn't fade out completely when it changes slides? And how can I get a border added around it that also doesn't disappear when the images themselves fade out? Because I can add a border, but when the image fades out, the border goes along with it. This is the site that I'm testing it all on as of right now. http://mytesteverythingblog.blogspot.com/

    Thank you so much!

    ReplyDelete
    Replies
    1. Hi Amanda,

      I'd like to encourage you to read the code. In the first few lines we have variables such as speedIn, speedOut and pauseShow. Those are the speed variables.

      The slide show is meant to fully fade out before the next one fades in; that will not be easily changed.

      To get a border around the area that doesn't fade in/out, set a CSS border on your slide show's container div, not the image.

      Delete
  12. Oh, and the other question... when I scroll down on that page, whenever the slide changes to the next image, it forces me back up to the top of the page and it does that with each slide. Is there a way around that? Especially if I wanted to add content underneath the slideshow, viewers wouldn't be able to go and read the content without being bumped back up to the top of the page because of the slides changing.

    Thanks again.

    ReplyDelete
    Replies
    1. In your CSS you need to specify a height for your slide show container div, such as 500px. It's forcing you back up because, without that height specified, the page is resetting.

      Delete
    2. I apologize, I guess I am confused- I do already have a height of 500px set since that is what your coding listed generically. You must be talking about a different area?

      Delete
    3. Hi Amanda, what is the URL of your slideshow?

      Delete
    4. Hello-
      It's https://picasaweb.google.com/110355952828884571367/TestAlbum?authuser=0&feat=directlink

      Delete
    5. Hi Amanda, I meant the url within you blog.

      Delete
    6. http://mytesteverythingblog.blogspot.com/

      Should have gone with my first thought and sent this! Here ya go, and thank you.

      Delete
    7. If you're having an issue with the page jumping back to the top this is because the slideshow needs to be within a fixed container with specified height and width CSS attributes. You would make your divs look something like:

      < div id='container' style='height: 600px; width: 500px;'>
      < div id='slideshow'/>
      < div id='caption'/>
      < /div>

      Delete
    8. You are amazing! That fixed it. Thank you so much for your valuable information.
      When I officially make that site live, and blog about it, I will certainly write about the great code & help I got from you!
      Thanks again!

      Delete
  13. These are great tips! I've been using Picasa and this Web Album that I'm using now. They are both great and easy. Thanks for sharing the trick on this custom slideshow widget.

    ReplyDelete
  14. Superb, Mr. David. You have done a great job. I would love to watch your hangouts.

    Keep Rocking

    Cheers
    MAYO

    ReplyDelete
  15. Happy New Year David.
    I found your article when I was trying to showcase my google/picasa album.

    I do not know what I'm doing wrong. I just can't seem to even get the script to work.

    Here is my link if you don't mind looking at the code to see how or where I messed up;
    http://www.dealerelements.com/photo.html

    Kind regards,

    ReplyDelete
    Replies
    1. Hi Sam, remove the following from your html, it's likely escaping the entire javascript:

      //

      Delete
    2. Replace everything from script to /script with the following: http://pastie.org/5608342

      Delete
  16. Great script! As a Google Apps school that uses iPads, we have been in real need of something like this. Unfortunately, we use WordPress (for now). Is there any reason this shouldn't/couldn't work in WP? (I gave it a quick try and it failed, but it may be because of security settings against scripts in posts.)

    ReplyDelete
  17. Hi Brady, it should work just fine, you just need to include a Google JSAPI key/script along with your JQuery library.

    ReplyDelete
  18. Really struggling to come to terms with an overload of information.

    Am trying to show driving test passes on my website at www.richardharper.net but using picassa photo via google, not showing in anything other than laptops......here's the code embedded into my website.



    Any advice would be gratefully accepted.
    Richard Harper

    ReplyDelete
  19. Hi Richard, it seems you're referring to Picasa's standard Flash slideshow, which is not what we're doing with this code on this tutorial. That slideshow that you're using will only work on devices that can play Flash videos, so for example it might not work on your iPhone. At the same time, that code does not look right; I'd go back to your Picasa album and make sure you've got the right code.

    ReplyDelete
  20. Although the slideshow works in blog posts as promised, when uploading a new post, the slideshows in earlier posts disappear, leaving only a blank space - unless each individual post is loaded from the ARCHIVE list in the right hand column on its own "page". Is this correctable? See < barcelona052013.blogspot.com > for an illustration of the problem. Also at the bottom of each slideshow there appears to be an empty space that I would like to eliminate if possible.

    Thanks for the code. It provides exactly what I was looking for! (And I guess I can always simply suggest folks load posts from the ARCHIVE list...)

    ReplyDelete
  21. Hi Lee,


    The reason why the older slideshow is showing blank is because when you're initiating the slideshow via the function calls, you have the same target objects in the function. In both cases you've put it as #slideshow and #caption. If you have multiple items in your DOM with the same ID, the function will only change the 1st instance of that ID. Change the div ids, and change the target ids in the function call to match.

    ReplyDelete
  22. DAVID -


    Thanks for your help! All works fine now. I had tried changing the div ids and the target ids earlier but missed the first set in the series until you pointed out the need to alter all three instances.


    Now I can sit back and actually enjoy posting all the images I'll be creating starting next week in Barcelona!


    LEE

    ReplyDelete
  23. Hi, please help. I tried to apply the RSS feed on blog itself, but the slide isn't working, it only displays the images horizontally

    ReplyDelete
  24. I am not familiar with coding period. I'm confused as to what to do. I posted the code before the but it's just blank. Do I just post my email and album name? Do I need to delete the instructions?

    ReplyDelete

Post a Comment