#ViewScrollr by Mode54

A Custom Titanium Scrollable View Module

##About

This module is a custom wrapper around the Ti.UI.ScrollableView object to provide extra features. The two main features are auto scrolling and custom paging controls.

Visit our Titanium blog for more code, tips & tricks. You can also checkout Mode54.com for our products and services. Code Strong!

##Usage

Here is a quick example of how to use ViewScrollr

var ViewScrollr = require("ViewScrollr");

var Banner = ViewScrollr.create({
	top        : 0,
	height     : 180,
	auto       : true,
	navigation : {
		selectedColor   : "#fff",
		color           : "#000",
		backgroundColor : "#000"
	},
	panels : [
		{ image : "/images/sunset_houses.jpg" },
		{ image : "/images/beach.jpg" },
		{ image : "/images/lizard.jpg" },
		{ image : "/images/cove.jpg" },
		{ image : "/images/bermuda.jpg" }
	]
});

win.add(Banner);

Configuration

The create() method can take a number of parameters to customize the appearance and behavior of the ViewScrollr.

• top, bottom, left, right [OPTIONAL] Position of ViewScrollr relative to the parent. Same as Ti.UI.View properties.
• width, height [OPTIONAL] Size of ViewScrollr in platform-specific units. Same as Ti.UI.View properties. (default: Ti.UI.FILL)
• backgroundColor [OPTIONAL] The background color of the container. If your view or image is smaller then the width or height then you will see this color in the background. (default: #000)
• auto [OPTIONAL] Enable/Disable auto scroll feature. (default: false)
• delay [OPTIONAL] Delay between panel auto scroll in milliseconds. (default: 4000)
• alpha [OPTIONAL] Alpha (opacity) value of navigation background. (default: 0.5)
• navigation [OPTIONAL] Navigation (page control) settings. Settings object is required to display navigation.
  • onTop [OPTIONAL] Move navigation (and captions) to top of ViewScrollr
  • style [OPTIONAL] Set navigation style. Either ViewScrollr.NAV_STYLE.CIRCLE or ViewScrollr.NAV_STYLE.BLOCK (default: ViewScrollr.NAV_STYLE.CIRCLE)
  • selectedColor [REQUIRED] Color of the selected page indicator.
  • color [REQUIRED] Color of page indicators.
  • showBorder [OPTIONAL] Enable/Disable page indicator borders.
  • borderColor [OPTIONAL] Color of page indicator borders.
  • backgroundColor [OPTIONAL] Background color of navigation & caption. (default: #000)
• panels [REQUIRED] Panel object settings. These are required for this module to function. I'd recommend more then one.
  • view [REQUIRED] A Ti.UI.View object. This is only required if image is not set.
  • image [REQUIRED] A string with the path/url to an image. This is only required if view is not set. If both exist then image takes priority.
  • caption [OPTIONAL] The text to display as a caption for this panel.
  • maxZoomScale [OPTIONAL] If this is set then the image is wrapped in a Ti.UI.ScrollView with this maxZoomScale. This allows zooming. (see Ti.UI.ScrollView)

Video Preview

Sources and Credits

I've used the following images from kansasphoto's photostream on Flickr via Creative Commons Search tool.

• Beach
• Bermuda HDR
• Jobson's Cove
• Jamaican Anole
• DSC_0243_4_5

ViewScrollr Pro Version

We released a pro version to this module with some cool extra features like animated content blocks and video slides. Download it here!

Got Bugs?

Log them in the Issues section. Please provide details and reproducible test cases if possible.