create image slider in titanium appcelerator

Question

I need to create an image slider like this, where the image in a specific image needs to be bigger and in the foreground, but I don't know how to do this. I know how to create a slider with a ScrollView but how can I create the effect of bringing the image to front and increase the image?

I'm developing the app in Appcelerator Titanium in classic mode.

Edit:

this is how I create my images:

for (var i = 0; i < 10; i++) {
        (function() {

            var viewImage = Ti.UI.createView({
                height : "70%",
                width : deviceWidth * 0.2857,
                zIndex : 0,
                isOpen : false,
                borderColor : "transparent",
                layout : "vertical"
            });

            scrollView.add(viewImage);
            require("resizeImage").resizeImage("/images/carro.jpeg", 0.35, 0.385, viewImage, deviceHeight, deviceWidth);

            if (i == 0) {
                viewImage.borderColor = "#0000aa";
                viewImage.zIndex = 100;
                scrollView.children[1].animate(a);
                scrollView.children[1].isOpen = true;
                lastPosition = 1;
            }
        })();
    }

I set the zIndex of my first image to 100 and the others to 0 but the image stays behind the image that is on its right.

Answer 1

Have a look at Ti.UI.Animation . There are some examples on how to scale images. With that you can create this effect.

 var matrix = Ti.UI.create2DMatrix()
 matrix = matrix.scale(2, 2);
 var a = Ti.UI.createAnimation({
    transform : matrix,
    duration : 2000,
 });
 img.animate(a);

You might need to change the zIndex from time to time

Full example:

index.js

var matrix = Ti.UI.create2DMatrix()
matrix = matrix.scale(2, 2);
var a = Ti.UI.createAnimation({
    transform: matrix,
    duration: 500,
});

function onClickBox(e) {
    $.box1.zIndex = 0;
    $.box2.zIndex = 0;
    $.box3.zIndex = 0;
    $.box4.zIndex = 0;
    $.box5.zIndex = 0;

    if (e.source != $.box1) $.box1.transform = Ti.UI.create2DMatrix().scale(1, 1);
    if (e.source != $.box2) $.box2.transform = Ti.UI.create2DMatrix().scale(1, 1);
    if (e.source != $.box3) $.box3.transform = Ti.UI.create2DMatrix().scale(1, 1);
    if (e.source != $.box4) $.box4.transform = Ti.UI.create2DMatrix().scale(1, 1);
    if (e.source != $.box5) $.box5.transform = Ti.UI.create2DMatrix().scale(1, 1);

    e.source.zIndex = 100;
    e.source.animate(a);
}

$.box1.addEventListener("click", onClickBox);
$.box2.addEventListener("click", onClickBox);
$.box3.addEventListener("click", onClickBox);
$.box4.addEventListener("click", onClickBox);
$.box5.addEventListener("click", onClickBox);

$.index.open();

index.xml

<Alloy>
    <Window class="container">
        <ScrollView id="scroller">
              <View id="box1" class="box"/>
              <View id="box2" class="box"/>
              <View id="box3" class="box"/>
              <View id="box4" class="box"/>
              <View id="box5" class="box"/>
        </ScrollView>
    </Window>
</Alloy>

index.tss

".container" : {
    backgroundColor: "white"
}
".box" : {
    width: 100,
    height: 100,
    borderWidth: 4,
    borderColor: "#0f0",
    backgroundColor: "#000"
}
"#box1" : {
    left: 0
}
"#box2" : {
    left: 110
}
"#box3" : {
    left: 220
}
"#box4" : {
    left: 330
}
"#box5" : {
    left: 440
}
"#scroller" : {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    scrollType: "horizontal"
}