Forum | Appery.io

Steven,
I'll look for a solution.

Hello!

1) You would need to create sprite using http://spritegen.website-performance....

Should be something like this:

there can be more pictures with numbers (for example from 0 to 200)

2) In JS (Create New - JavaScript) add line
code
var outsCounter = 0, oneImageWidth = 163;/code
outsCounter - counter for outs field
oneImageWidth - width of one img in sprite

3) For counter add Panel component with type=div. Set it's size to one image size and set created sprite as a background. For example, add to this Panel class divForOuts and add to CSS this code:

code.divForOuts{
width: 113px;
height: 124px;
background: url('../image/spritename.png') no-repeat top left;
} /code

4) On Click on "+" sign run JS:

codeoutsCounter++;
if(outsCounter>8){
outsCounter=0;
}
Tiggzi('outsDiv').css('background-position', '-'+oneImageWidth*(outsCounter)+'px 0');/code

Here is an example http://project.tiggzi.com/mobile-fram...

Marina,
How did you get your images to maintain the proper order in your zip file?

SS

Also, what do I do if my images are not all the same width?

SSq

Hi, images were named according to namber on picture (image with number 1 - image1, image with number 2 - image2)

There are two ways:

1) make all images the same size;

2) change JS in part 4 (we were suggested you) to check with JS images width