This Photo Gallery made in Adobe Edge is very simplistic mainly because Adobe has not released all the features yet.  This Gallery uses edge actions to swap out the jpgs from the images folder. No cool transitions, just plain old image swapping. But this gives you a good idea on how to use global JavaScript variables inside of Adobe Edge using actions.

EXAMPLE Simple Adobe Edge Photo Gallery
There are 3 things on the stage, a jpg we want to switch out, and two buttons that are just transparent png arrows that take up half the screen.

There are also three Edge actions that make the photo gallery work. Click on the little actions icon to open up actions for a specific element.

STAGE> defining Global Variables
These variables will be used so the gallery knows which image to start with and how many total jpgs there are in the images folder.

//Start at .jpg number
this.i = 1;

// Set the total number of jpgs in the images folder
this.t =5;

BUTTON_NEXT> replacing the photo on stage with the next jpg from the images folder

// insert code for mouse clicks here

if (this.i > this.t-1)
{
this.i=0
}

 this.i = this.i+1;
$(this.lookupSelector("photo")).attr("src","images/"+this.i+".jpg");

BUTTON_BACK> replacing the photo on stage with the previous jpg from the images folder

// insert code for mouse clicks here

 this.i = this.i-1;
if (this.i == 0)
{
this.i=this.t
}
$(this.lookupSelector("photo")).attr("src","images/"+this.i+".jpg");

Adobe Edge Simple Photo Gallery Source (just swap out the jpgs in the images folder, make sure they are 800×450 or you will have to change the buttons and stage size)

Similar Posts:

• Flash Photo Gallery
• Adobe Edge – HTML 5 WYSIWYG
• 1st Night Learning After Effects – Yay
• Easy Flash Menu
• Basic After Effects Tutorial