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.
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…
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.
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.
Thanks for your feedback. I’ll check out the widget.
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
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
Sorry, 2 times posted. And i see that le line ‘<img src=”[URL to an image from the slideshow]” width=”600″ />’) changed alone.
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
Your are welcome.
Hey Stan, Can you detail this process a bit more? Especially the stuff about the gadget wrapper and the RSS feed? Thanks!
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 ????
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.
works a charm thanks mate
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.
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.
Your method works great. How can I make it work for an Android phone?
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(”);
}