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…

You may also like...

16 Responses

  1. Stan Shaw says:

    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.

  2. Stan Shaw says:

    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.

  3. Anonymous says:

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

  4. Denis2vol says:

    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

  5. Denis2vol says:

    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

  6. Denis2vol says:

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

  7. Mike says:

    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

  8. Denis2vol says:

    Your are welcome.

  9. Anonymous says:

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

  10. Etty says:

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

  11. Rod75 says:

    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.

  12. Freelander51 says:

    works a charm thanks mate

  13. lisaluna says:

    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.

  14. Ilene Wendy says:

    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.

  15. Charles Paul says:

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

  16. Deshdaaz says:

    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(”);
    }

Leave a Reply

Your email address will not be published.