Skip to content

How to make Picasa flash-based slideshow iPhone-friendly

If you embed Picasa’s flash-based slideshow on your blog, your iPhone/iPad visitors won’t see anything but the now famous broken plugin icon.

Broken Flash Plugin

It’s a shame as Picasa is very user-friendly when accessed from an iPhone/iPad. A few lines of codes can indeed fix that:

—
<script language=javascript>
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)))
{
document.write(‘<a href=”[URL to slideshow link]“><img src=”[URL to an image from the slideshow] width=”600″ /></a>’);
}
else
{
document.write(‘[Code provided by Picasa - Click on "Embed Slideshow" link]‘);
}
</script>
—

Exemple here below. On the iPhone, just click on the picture…

Be Sociable, Share!

    Posted in Blog, Techno.

    10 comments

    By Pascal – June 4, 2010

    • Stan Shaw

      Great idea, however, I’m afraid it doesn’t work inside Google Sites. Flash support is a real problem on iPads that I doubt will be resolved soon. Hopefully Picasa Web will move quickly over to full support for HTML5.

    • Stan Shaw

      After a bit of hunting I found a workaround for Google Sites.  You can insert a gadget wrapper that uses an RSS feed from a Picasa web folder. This will display the slideshow correctly in iPads and PC’s.  Hopefully Google will fix the Picasa problem soon so that we don’t have to use either workaround.

    • Anonymous

      Thanks for your feedback. I’ll check out the widget.

    • Denis2vol

      Hello
      I had some difficulties to add this code, so I just precise some things to help the people who will need it:

      1 – When we Copy and Paste the code, we have to write again symbols like ” and ‘ which are a bit modified.
      2 – In the code above, one ” is missing:
      img src=”[URL to an image from the slideshow]
      After the URL and before width
      3 – The symbols [] are just here to say something. Also, do not put the when adding the links.

      So, i changed this things, and here is it:

      if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)))

      {

      document.write(‘‘);

      }

      else

      {

      document.write(‘[code in case of other device]');

      }

      Thank tou very much for this code !
      Denis2vol

    • Denis2vol

      Hello
      I had some difficulties to add this code, so I just precise some things to help the people who will need it:

      1 – When we Copy and Paste the code, we have to write again symbols like ” and ‘ which are a bit modified.
      2 – In the code above, one ” is missing:
      img src=”[URL to an image from the slideshow]
      After the URL and before width
      3 – The symbols [] are just here to say something. Also, do not put the when adding the links.

      So, i changed this things, and here is it:

      if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)))

      {

      document.write(‘‘);

      }

      else

      {

      document.write(‘[code in case of other device]');

      }

      Thank tou very much for this code !
      Denis2vol

    • Denis2vol

      Sorry, 2 times posted. And i see that le line ‘<img src=”[URL to an image from the slideshow]” width=”600″ />’) changed alone.

    • Mike

      Pascal;

      Thanks for the code. Worked like a charm for me (and thanks to Denis2vol for pointing out the copy/paste quote issues).

      Interestingly, I couldn’t get the slideshow link to fire directly in iPhone/Safari. I suspect it has something to do with how frames are setup in the page I was working on. Luckily, it doesn’t really matter for me with this application, so I added 

      target=”_blank”

      to the URL as a workaround so it would pop open in a new page. Good enough for what I’m doing.

      Mike

    • Denis2vol

      Your are welcome.

    • Anonymous

      Hey Stan, Can you detail this process a bit more? Especially the stuff about the gadget wrapper and the RSS feed? Thanks!

    • Etty

      I put the link and from some reason it get me to a screen asking to log in to google plus. When I try the slideshow link from desktop browser, there is no problem (meaning – I did share the album/slideshow to public). any ideas ????

    « »