Photo Browser

This component will help you displaying one or more images with nice native photo engine.

Furthermore, user will be able to swipe between pictures and zoom in/out with pinch gesture

Javascript API

app.photoBrowser({
{
    // background color of Photo Browser
    bgcolor: "#000000",
    // all images
    images: [
        {
            caption: "texte de l'infobulle",
            thumbnail: "http://www.play3-live.com/screens/ps3/fairy-fencer-f/mini/fairy-fencer-f-fairy-fencer-f201305-15-13007-1368682447@2x.jpg",
            url: "http://www.play3-live.com/screens/ps3/fairy-fencer-f/fairy-fencer-f-fairy-fencer-f201305-15-13007-1368682447.jpg",
        },
        {
            caption: "",
            thumbnail: "http://www.play3-live.com/screens/ps3/fairy-fencer-f/mini/fairy-fencer-f-fairy-fencer-f201305-15-13006-1368682444@2x.jpg",
            url: "http://www.play3-live.com/screens/ps3/fairy-fencer-f/fairy-fencer-f-fairy-fencer-f201305-15-13006-1368682444.jpg",
        },
        {
            caption: "texte de l'infobulle",
            thumbnail: "http://www.play3-live.com/screens/ps3/fairy-fencer-f/mini/fairy-fencer-f-fairy-fencer-f201305-15-13005-1368682442@2x.jpg",
            url: "http://www.play3-live.com/screens/ps3/fairy-fencer-f/fairy-fencer-f-fairy-fencer-f201305-15-13005-1368682442.jpg",
        },
        {
            caption: "",
            thumbnail: "http://www.play3-live.com/screens/ps3/fairy-fencer-f/mini/fairy-fencer-f-fairy-fencer-f201305-15-13004-1368682440@2x.jpg",
            url: "http://www.play3-live.com/screens/ps3/fairy-fencer-f/fairy-fencer-f-fairy-fencer-f201305-15-13004-1368682440.jpg",
        },
        {
            caption: "",
            thumbnail: "http://www.play3-live.com/screens/ps3/fairy-fencer-f/mini/fairy-fencer-f-fairy-fencer-f201305-15-13003-1368682437@2x.jpg",
            url: "http://www.play3-live.com/screens/ps3/fairy-fencer-f/fairy-fencer-f-fairy-fencer-f201305-15-13003-1368682437.jpg",
        },
        {
            caption: "",
            thumbnail: "http://www.play3-live.com/screens/ps3/fairy-fencer-f/mini/fairy-fencer-f-fairy-fencer-f201305-15-13002-1368682435@2x.jpg",
            url: "http://www.play3-live.com/screens/ps3/fairy-fencer-f/fairy-fencer-f-fairy-fencer-f201305-15-13002-1368682435.jpg",
        },
        {
            caption: "",
            thumbnail: "http://www.play3-live.com/screens/ps3/fairy-fencer-f/mini/fairy-fencer-f-fairy-fencer-f201305-15-13001-1368682434@2x.jpg",
            url: "http://www.play3-live.com/screens/ps3/fairy-fencer-f/fairy-fencer-f-fairy-fencer-f201305-15-13001-1368682434.jpg",
        }
    ],
    // start by display image 2
    startIndex: 2
});

Complete Example

<html>
<head>
	<title>AppDeck</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<meta name="viewport" content="width=device-width">
	
	
	<script type="text/javascript" src="//appdata.static.appdeck.mobi/js/fastclick.js"></script>
	<script type="text/javascript" src="//appdata.static.appdeck.mobi/js/appdeck.js"></script>

function openPhotoBrowser()
	{
		var tmp = "?tmp="+Math.random().toString(36).substring(2, 15);
		app.photoBrowser(
{
    bgcolor: "#000000",
    bgalpha: "0.8",
    images: [
                {
            caption: "This photo have comment, next will not",
            thumbnail: "http://appdata.static.appdeck.mobi/images/image1_small.jpg",
            url: "http://appdata.static.appdeck.mobi/images/image1.jpg"+tmp,
        },
		{
            thumbnail: "http://appdata.static.appdeck.mobi/images/image2_small.jpg",
            url: "http://appdata.static.appdeck.mobi/images/image2.jpg"+tmp,
        },
		{
            caption: "This photo have comment, previous will not",
            thumbnail: "http://appdata.static.appdeck.mobi/images/image3_small.jpg",
            url: "http://appdata.static.appdeck.mobi/images/image3.jpg"+tmp,
        },
		{
            caption: "This image 4",
            thumbnail: "http://appdata.static.appdeck.mobi/images/image4_small.jpg",
            url: "http://appdata.static.appdeck.mobi/images/image4.jpg"+tmp,
        },
		{
            caption: "Last Photo.",
            url: "http://appdata.static.appdeck.mobi/images/image5.jpg"+tmp,
        }
    ],
    startIndex: 2
});

}

</script>

<body>

<h1>Photo Browser</h1>

<button class="ui-button" onClick="javascript:openPhotoBrowser();">Open Photo Browser</button>

</div>

</div>

</body>
</html>