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.

picasa

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…

Share

    You may also like...

    • 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 ????

    • Rod75

      Hopefully Google will go for a full repair; Not much point having a slideshow that only plays to some people. As I understand the history of this it is like a school yard fight with lots of hurt feelings. Steve Jobs went to Adobe for a flash version for Apple products and Adobe refused thinking that it was too small a market or some other reason, so Apple developed their own.  Well we all know how big Apple has become; and they in turn now refuse to accept Flash. Well maybe Mr Cook at the head of Apple can now sort this out. Come on boys kiss and make up, I am purposely not buying Adobe products at the mo even though Im looking at CS5 for Mac at a whopping 590 pounds sterling, whats the point of putting out flash product when all iPads (25 million), iPod touch (60 million), and iPhones (200 million) can’t see it. PS thanks I have been looking for a work around for some time.

    • Freelander51

      works a charm thanks mate

    • lisaluna

      This sounds good – but it doesn’t seem to work for me. I replaced the quotes – and it calls up a smaller version of the full size, unfortunately, and puts it in the wrong area. How can I target the slideshow to display where the flash based one plays now? Do I have to target=”” something to get it to show up in the center div? Any advice is much appreciated.

    • Ilene Wendy

      I see I’m late to these postings but would live to understand this more. I embedded a Picasa slideshow into a post using my desktop iMac and now realize there’s a big blank space on the iPad for iPad users. Any help would be appreciated.

    • Charles Paul

      Your method works great. How can I make it work for an Android phone?

    • Deshdaaz

      Hi,

      I only see a black bordered square on iphone but not actual images. Can someone please review the code below and help point out an issue? Thank you.

      if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)))
      {
      document.write(”);
      }
      else
      {
      document.write(”);
      }