gallery

app.js

// exports.viewItemDetails = function(data){
	
	//Parent Window
	var win = Titanium.UI.createWindow({  
		title:'Client',
		backgroundColor:'#fff',
		layout: 'vertical'
	});
	
	var images = [];
	var prefix = 'http://grin.hq.nasa.gov/IMAGES/SMALL/GPN-2000-0000';
	var start = 38;
	for (var c=0;c<30;c++)
	{
		var name = prefix + (start+c) + '.jpg'; 
		images[c]= {image:name, width:225, height:225};
	}
	//Single Image View.
	var item_image = Ti.UI.createImageView({
		image:images[0].image,
		height:150,
		width:320,
		top:0,
		backgroundColor:'#000',
		hires:true
	});
	
	//Gallery View (Normal View)
	var gallery_view = Ti.UI.createView({
		height:85,
		width:Ti.UI.FILL,
		top:0,
		backgroundColor:'green'
	});
	
	//Create ScrollView with width FILL and contentWidth auto
	var galleryScroll = Ti.UI.createScrollView({
		backgroundColor:'yellow',
		height:85,
		width:Ti.UI.FILL,
		contentWidth:'auto',
		layout:'horizontal'
	});
	
	//Create a series of imagesviews and add it the scrollview
	for(var a = 0; a <images.length; a++){
		var view = Ti.UI.createImageView({
			left:3,
			right:3,
			height:75,
			width:80,
			image:images[a].image,
			backgroundColor:'#000',
			strImage:images[a].image,
			hires:true
		});
		view.addEventListener('click', function(e){
			Ti.API.info(e.source);
			if(e.source.strImage != null){
				Ti.API.info("inside if(e.source.strImage != null){");
				item_image.animate({opacity:0, duration:750}, function(){
					item_image.image = e.source.strImage;
					item_image.animate({opacity:1, duration:750});
				});
				Ti.API.info(e.source.strImage);
			}
		});
		galleryScroll.add(view);
	}
	//Add the scrollview to a view.
	gallery_view.add(galleryScroll);
	//Add the single image view to the parent window
	win.add(item_image);
	
	//add the view with the scrollview containing imageViews to the parent window. 
	win.add(gallery_view);
	win.open();
	
	
// }