Please read carefully, ( and don't send me a stupid example of http://www.photoswipe.com )
I need a slideshow for MOBILE ( iphone / ipad / android or any other devide where doesn't work Flash player .)
Project must work on iphone on versions 4 / 4s / 5 and on every iPad ( of course includind the iPad mini )
This slideShow must be somethink like this one:
Please use iPad or iPhone to see this website. If you use a browser on PC you see a different version. ( they check your browser info )
If using the iPhone enter in normal version ( not mobile version )
I think it use jquery.
Please see www.flickr.com/photos/batiks/8424104062/lightbox/ with iPad / iPhone
This Flickr Example is almost perfect ( what we need is simpler... as we don't need the text at bottom, and at top there is ONLY the button to CLOSE )
So at beginning there is an icon animated GIF of loading.
It preload the first image and after with a fade in effect it show the image.
And every 3 second it change image... with fade out and fade in.
If clicking somewhere it appear an X at top right to close this slideShow...
The X is inside a bar at top, that if nothink is touch it disappear after 5 seconds...
Of course if the X is clicked the slideshow close. - it's obvious but better to say it :)
So let's say there is a page called index.html that have many other stuff in it...
but a button where by clicking it, it start this slideshow fullscreen ( i mean fullscreen browser, so using 100% of the area available from the browser. - on ipad for example the browser always use 40 pixel at top of screen for TABS, url and so on... )
5) IMPORTANT... SWIPE
More than what you see there must be the possibility to SWIPE the image to the next one.
This SWIPE is that if i'm on picture 1 i can click when i want from right area clicking and going on left, that the picture will change and going on number 2°
( see swipejs.com with an ipad just to see what i mean... you don't have necessary use this swipejs.com )
On rotation of iPad / iPhone and other devide must work correctly...
Every time the image must be FIT inside... with black ( #000000 ) background.
So if on iPad, and the area of the browser is 1000x600 pixel and the image is 1200x800, the image is FIT to stay inside, that mean that it will be Somethink like 820x600 pixel...
with right and left empty in black...
The photo must ALWAYS keep the aspect ratio. So if the image is vertical it will keep to be vertical.
So there is no any type of CROPPING. But is stretched to the maximum possible. is a kind of FIT inside....
The picture has no border.
8) NO Auto loop.
When at at the end of pictures ( example there are 20 pictures and the slide show arrive at the 20° if swipe there is an effect of RESISTAND BOUNDS )
So it seems that there is resistance to slide, making it obvious you have reach the end. As well on the first image if swipe left.
This slideshow must accept a parameter where there is the array of the images ordered ... I mean in html there is:
When there a SWIPE the counter of the 3 seconds of the play is RESTARTING from zero...
So the PLAY is always ON, but if i SWIPE the counter of this 3 seconds restart... so if swipe it takes other 3 seconds to go to the next pictures automatically.
11) the project must be nice graphically.
Is not made for that but it MUST work on every broser in general
on computers like chrome, safari, explorer 8-9-10
( it will run here only if there isn't Flash player )