Images slider with zoom in out functionality in IOS

Posted By : Siddharth Dixit | 25-Feb-2015

titanium

In this blog I have implemented image slider which contains set of images. Each image ha the zoom in/out feature.The image when zooms out to the size less than actual size then the image retains its original size .When the particular image gets zoomed in and then scrolled, it will automatically get its original size.The UI contains a button on the opening window, and once it has clicked then slider window will be opened containing set of images and we can perform scrolling, zoom in/out with each image contained in the slider.

Now place the code in the app.js :

var childWin = null;
var parentWin = Ti.UI.createWindow();
var openSlider = Ti.UI.createButton({
	title : "Open slider",
	bottom : 10,
	color : "green",
	backgroundColor : "blue",
	height : 50,
	width : "90%"
});
parentWin.add(openSlider);
function sliderOfImages() {
	var galleryImages = [];
	var scrollViews = [];
	var imageViews = [];
	var currentIndex;
	var count = 1;
	for (var i = 1; i <= 5; i++) {
		galleryImages.push({
			photo_url : "/images/image" + i + ".jpg"
		});
	}
	Ti.API.info(galleryImages);
	childWin = Ti.UI.createWindow({
		backgroundColor : "#000",
	});
	var windowView = Ti.UI.createView({
		height : Ti.UI.FILL,
		width : Ti.UI.FILL
	});
	var scrollableView = Ti.UI.createScrollableView({
		showPagingControl : false,
		top : 0,
		disableBounce : true,
	});

	windowView.add(scrollableView);
	childWin.add(windowView);
	for (var i = 0; i < galleryImages.length; i++) {
		var scrollView = Ti.UI.createScrollView({

			contentHeight : Ti.Platform.displayCaps.platformHeight,
			contentWidth : Ti.Platform.displayCaps.platformWidth,
			minZoomScale : 1,
			maxZoomScale : 2.5
		});
		var imageView = Ti.UI.createImageView({
			width : Ti.UI.SIZE,
			height : Ti.UI.SIZE,
			image : galleryImages[i].photo_url
		});
		scrollView.add(imageView);
		imageViews.push(imageView);
		scrollViews.push(scrollView);
	}
	scrollableView.views = scrollViews;
	scrollableView.currentPage = 0;
	currentIndex = 0;
	scrollableView.addEventListener('scroll', function(e) {
		currentIndex = scrollableView.currentPage;
		if ((currentIndex - 1) >= 0)
			scrollViews[(currentIndex - 1)].zoomScale = 1;
		if ((currentIndex + 1) < scrollViews.length)
			scrollViews[(currentIndex + 1)].zoomScale = 1;

	});
	scrollableView.addEventListener('longpress', function(e) {
		childWin.close();
		childWin=null;
	});
	childWin.open();

}

openSlider.addEventListener('click', function(e) {
	sliderOfImages();
});
parentWin.open();