# iPad / iPhone html5 based slideshow plugin



## miroperez (May 10, 2011)

I'm finishing up a plugin which will generate the following slideshow for iPad and iPhone 

http://miroperezphotography.com/sample

It has the following features:

* swipe gesture to move between photos
* supports device orientation changes
* configuration of slide show via LR web engine plugin
* various slide transitions like fade, cube, flip, slide
* mobile device iOS interface
 If you add this to as a home screen bookmark, it will behave much like a native application.

This is completely written in html5/CSS so anyone with an iPhone or iPad can view it.

Miro


----------



## Bruce J (May 10, 2011)

Miro - I can't view your slideshow from my PC, so I'll ask the questions here.  Does it support adding a border to the image and applying text/metadata to the border?  Does it allow variations in the timing of each image or do they all have to be on screen for the same time?

And, if it's completely built in HTML5/CSS, why does it require Safari for viewing?


----------



## miroperez (May 10, 2011)

Actually it requires a webkit browser to be more precise. IE and Firefox (not sure about IE9 or FF4) are not fully webkit compliant so they will not work. This is meant to be viewed only on an iPad/iPhone or Safari (possibly Chrome) which happens to be a webkit browser. I've actually seen it work on a few newer Android phones but it's hit and miss because some Android based hardware is just under powered and have varying versions of the webkit code. I'm currently using different css to drive the borders at the moment but could add that variability to it. The plugin allows for timing of a constant duration between slides at the moment.  If I wasn't generating it via LR then the timing between slides is easy but I'm not sure where you would put that data for LR to consume at the moment. I'd have to investigate where I can place that data within the bounds of access the plugin has. 

I had a version which allowed you to pick a metadata field and star rating to go under the thumbnail but temporarily took it out because I wanted to make it work with the iphone too. 

When you are in the Web module, I display a message in the preview area if you are not running Safari or a Webkit browser. It'd be nice if LR allowed to you pick the browser for mobile devices.  I'll post an screen capture from the simulator this evening.


----------



## miroperez (May 11, 2011)

Here's a movie from the iPad simulator

http://www.miroperezphotography.com/sample/sampleGallery.mov

The moving between slides is a single swipe gesture left or right.


----------



## Bruce J (May 11, 2011)

miroperez said:


> Actually it requires a webkit browser to be more precise. IE and Firefox (not sure about IE9 or FF4) are not fully webkit compliant so they will not work. This is meant to be viewed only on an iPad/iPhone or Safari (possibly Chrome) which happens to be a webkit browser. I've actually seen it work on a few newer Android phones but it's hit and miss because some Android based hardware is just under powered and have varying versions of the webkit code. I'm currently using different css to drive the borders at the moment but could add that variability to it. The plugin allows for timing of a constant duration between slides at the moment.  If I wasn't generating it via LR then the timing between slides is easy but I'm not sure where you would put that data for LR to consume at the moment. I'd have to investigate where I can place that data within the bounds of access the plugin has.
> 
> I had a version which allowed you to pick a metadata field and star rating to go under the thumbnail but temporarily took it out because I wanted to make it work with the iphone too.
> 
> When you are in the Web module, I display a message in the preview area if you are not running Safari or a Webkit browser. It'd be nice if LR allowed to you pick the browser for mobile devices.  I'll post an screen capture from the simulator this evening.


 
OK, I see.  It would be nice if one could preview the slide show on a PC before syncing it to the mobile device.  Do you sync it to the mobile device for viewing, or do you just access it over the net?


----------



## miroperez (May 12, 2011)

Bruce J said:


> OK, I see.  It would be nice if one could preview the slide show on a PC before syncing it to the mobile device.  Do you sync it to the mobile device for viewing, or do you just access it over the net?



Unfortunately since most of the features of this slideshow rely on webkit features you'd have to either Export the gallery then preview it in Safari or Chrome which are webkit browsers which will give you a fairly true rendition of what it will look like on a mobile device OR set either one of these browsers as your default browser.  Personally I use FireFox on my mac all the time but left Safari as the default browser so it just works in LR but I completely understand not wanting to use either Chrome or Safari as your default browser. Unfortunately there are no mobile devices that use the Gecko engine (FireFox) and most mobile devices that I know of use webkit as their layout engine.  I could render an approximation for other browsers while in preview but that seems like double work for something that isn't going to be behave the same way in a mobile browser. 

The upside to using webkit is you can do a lot of cool css, the downside is what you are seeing with the mainstream desktop browsers like IE and FF.

In regards to your question, you just access the gallery over the net. This way anyone with a compatible mobile device can view it.


----------



## DonRicklin (May 12, 2011)

OT, but related to the statements on browsers. I use Safari for view my SmugMug Galleries, Mindfull Eye, and my Blogs. Otherwise I use Camino for all other browsing. I am very use to the short cuts in Camino and I like that even if Force Quit all open Windows and Tabs come back on restart and I typically have MANY! 5 or 6 windows with 2 to 6 Tabs open in each.

YMMV

Don


----------



## miroperez (May 12, 2011)

DonRicklin said:


> OT, but related to the statements on browsers. I use Safari for view my SmugMug Galleries, Mindfull Eye, and my Blogs. Otherwise I use Camino for all other browsing. I am very use to the short cuts in Camino and I like that even if Force Quit all open Windows and Tabs come back on restart and I typically have MANY! 5 or 6 windows with 2 to 6 Tabs open in each.
> 
> YMMV
> 
> Don


I hadn't heard of camino before but it looks like hey wrapped the gecko engine and added other user features kinda cool.

I'm just trying gauge interest in a true mobile device ui. I understand there will be issues with preview in the desktop env but I'm not sure that can be avoided short of not using webkit stuff .


----------



## Bruce J (May 12, 2011)

@Miro - Thanks for the explanation.  Interesting App, but I don't think it will be useful for my needs.  Perhaps others will have more use for it.  I try very hard to stick w/ standards that work across all platforms.  Not always successfully, but it is the goal.  Good luck to you,

@Don - Way too complicated for a simple guy like me.  I have a hard enough time remembering what I'm doing w/ one browser.  But then, I'm just a PC user; no Macs in my life for a very long time.  Cheers,


----------



## clee01l (May 12, 2011)

Bruce J said:


> OK, I see.  It would be nice if one could preview the slide show on a PC before syncing it to the mobile device.  Do you sync it to the mobile device for viewing, or do you just access it over the net?


 Both Chrome and Safari are available for the PC.  The website works well on a desktop with either a mouse or a touchpad.  I've tried it in both Chrome (my default browser) and Safari.  Anyone wanting to create their own websites should have a variety of web browsers installed for testing since not all are compliant with the latest web standards.  I think the OP's website with a pop up message for IE9 Opera and Firefox4 makes a reasonable effort at this for a Web App designed to run exclusively on an iPad/iPhone


----------



## miroperez (May 12, 2011)

clee01l said:


> Both Chrome and Safari are available for the PC.  The website works well on a desktop with either a mouse or a touchpad.  I've tried it in both Chrome (my default browser) and Safari.  Anyone wanting to create their own websites should have a variety of web browsers installed for testing since not all are compliant with the latest web standards.  I think the OP's website with a pop up message for IE9 Opera and Firefox4 makes a reasonable effort at this for a Web App designed to run exclusively on an iPad/iPhone


 
The idea is to give the best user experience for the device. If I was integrating this into my website I'd have two versions - a desktop version and mobile. This is getting to be fairly common.  The site would allow you to switch between the two.


----------



## neelin (Sep 15, 2012)

Your presentation works for me:
Chrome on on W7 desktop PC
Chrome on Google Nexus 7 Android tablet


----------

