{"action":"opened","issue":{"url":"https://api.github.com/repos/NativeScript/NativeScript/issues/1249","labels_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/1249/labels{/name}","comments_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/1249/comments","events_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/1249/events","html_url":"https://github.com/NativeScript/NativeScript/issues/1249","id":122025708,"number":1249,"title":"\"Photos\" app image carrousel control","user":{"login":"oscar-78","id":8981863,"avatar_url":"https://avatars.githubusercontent.com/u/8981863?v=3","gravatar_id":"","url":"https://api.github.com/users/oscar-78","html_url":"https://github.com/oscar-78","followers_url":"https://api.github.com/users/oscar-78/followers","following_url":"https://api.github.com/users/oscar-78/following{/other_user}","gists_url":"https://api.github.com/users/oscar-78/gists{/gist_id}","starred_url":"https://api.github.com/users/oscar-78/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oscar-78/subscriptions","organizations_url":"https://api.github.com/users/oscar-78/orgs","repos_url":"https://api.github.com/users/oscar-78/repos","events_url":"https://api.github.com/users/oscar-78/events{/privacy}","received_events_url":"https://api.github.com/users/oscar-78/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-12-14T11:36:00Z","updated_at":"2015-12-14T11:36:00Z","closed_at":null,"body":"Any ideas on how to implement a image carrousel as used in the standard iOS Photos app? I would like to have the same gap between the photos when swiping but snapping on the photo. For fast performance I would like to load the selected photo first and cache the left and right photo. So when thumbnail 4 is tapped it shows full screen and photo 3 and 5 are preloaded.\r\n\r\nWhat I have now:\r\n```\r\n<Page xmlns=\"http://www.nativescript.org/tns.xsd\" navigatedTo=\"pageNavigatedTo\">\r\n\t<GridLayout columns=\"*\" swipe=\"itemSwipe\">\r\n\t\t<ScrollView col=\"0\" orientation=\"horizontal\" ios.pagingEnabled=\"true\" id=\"scrollView\">\r\n\t\t\t<Repeater items=\"{{ items }}\">\r\n\t\t\t\t<Repeater.itemsLayout>\r\n\t\t\t\t\t<WrapLayout itemWidth=\"{{ previewWidth }}\" itemHeight=\"{{ previewHeight }}\" />\r\n\t\t\t\t</Repeater.itemsLayout>\r\n\t\t\t\t<Repeater.itemTemplate>\r\n\t\t\t\t\t<GridLayout columns=\"*\">\r\n\t\t\t\t\t\t<Image src=\"{{ previewSource }}\" stretch=\"aspectFit\" itemIndex=\"{{ _index }}\" tap=\"itemTap\" col=\"0\" />\r\n\t\t\t\t\t\t<StackLayout height=\"44\" verticalAlignment=\"top\" id=\"navigationBar\" col=\"0\">\r\n\t\t\t\t\t\t\t<DockLayout stretchLastChild=\"true\" row=\"0\" cssClass=\"action-bar\" visibility=\"{{ currentPage !== 2 ? 'visible' : 'collapse' }}\">\r\n\t\t\t\t\t\t\t\t<Image src=\"~/images/icons/close.png\" width=\"24\" height=\"24\" dock=\"left\" cssClass=\"action-bar-item\" tap=\"backTap\" />\r\n\t\t\t\t\t\t\t\t<GridLayout columns=\"*\">\r\n\t\t\t\t\t\t\t\t\t<Label text=\"{{ name }}\" cssClass=\"title\" col=\"0\" horizontalAlignment=\"center\" />\r\n\t\t\t\t\t\t\t\t</GridLayout>\r\n\t\t\t\t\t\t\t</DockLayout>\r\n\t\t\t\t\t\t</StackLayout>\r\n\t\t\t\t\t</GridLayout>\r\n\t\t\t\t</Repeater.itemTemplate>\r\n\t\t\t</Repeater>\r\n\t\t</ScrollView>\r\n\t</GridLayout>\r\n</Page>\r\n```\r\n\r\n```\r\nvar application = require(\"application\");\r\nvar frameModule = require(\"ui/frame\");\r\nvar gestures = require(\"ui/gestures\");\r\nvar platformModule = require(\"platform\");\r\nvar viewModelModule = require(\"../shared/view-model\");\r\nvar viewModel = new viewModelModule.ViewModel();\r\nvar itemViewModelModule = require(\"../shared/item-view-model\");\r\nvar pt = require(\"../shared/models/pt\");\r\n\r\nexports.pageNavigatedTo = function(args) {\r\n    var iosFrame = frameModule.topmost().ios;\r\n    if (iosFrame) {\r\n        iosFrame.navBarVisibility = \"never\";\r\n        var controller = iosFrame.controller;\r\n        controller.view.window.backgroundColor = UIColor.colorWithRedGreenBlueAlpha(0.13, 0.16, 0.20, 1);            \r\n        controller.navigationBarHidden = true;\r\n    }\r\n    var page = args.object;\r\n\tvar scrollView = page.getViewById(\"scrollView\");\r\n\tviewModel.items = page.navigationContext.items;\r\n\tviewModel.currentPage = pt.Page.file;\r\n\tvar selectedIndex = null;\r\n\tfor (var i = 0; i < page.navigationContext.items.length && selectedIndex === null; i++) {\r\n\t\tvar item = page.navigationContext.items[i];\r\n\t\tif (item.id === page.navigationContext.item.id) {\r\n\t\t\tif (i > 0) {\r\n\t\t\t\tpage.navigationContext.items[i - 1].previewLoadEnabled = true;\r\n\t\t\t}\r\n\t\t\titem.previewLoadEnabled = true;\r\n\t\t\tif (i < page.navigationContext.items.length - 1) {\r\n\t\t\t\tpage.navigationContext.items[i + 1].previewLoadEnabled = true;\r\n\t\t\t}\r\n\t\t\tselectedIndex = i;\r\n\t\t}\r\n\t}\r\n\tviewModel.previewSelectedIndex = selectedIndex;\r\n\tpage.bindingContext = viewModel;\r\n\tsetTimeout(function() {\r\n\t\tscrollView.scrollToHorizontalOffset(viewModel.previewWidth * selectedIndex, false);\r\n\t\tscrollView.animate({\r\n\t\t\topacity: 1,\r\n\t\t\tduration: 500\r\n\t\t});\r\n\t});\r\n\tapplication.on(application.orientationChangedEvent, function(e) {\r\n\t\tvar orientation = UIDevice.currentDevice().orientation;\r\n\r\n        if (!e.ios || orientation != UIDeviceOrientation.UIDeviceOrientationPortraitUpsideDown) {\r\n        \tviewModel.previewWidth = platformModule.screen.mainScreen.widthPixels / platformModule.screen.mainScreen.scale;\r\n        \tviewModel.previewHeight = platformModule.screen.mainScreen.heightPixels / platformModule.screen.mainScreen.scale;\r\n        }\r\n    });\r\n}\r\nexports.backTap = function(args) {\r\n\tviewModel.backTap();\r\n}\r\nexports.itemTap = function(args) {\r\n\tconsole.log(\"Tap\");\r\n}\r\nexports.itemSwipe = function(args) {\r\n\tconsole.log(\"Swipe\");\r\n}\r\n```"}}