Adobe Edge Photo Gallery

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)

Download Source File

  • Amos

    Nice and useful tutorial. By the way, how can one embbed the photo gallery in Drupal or wordpress?

    • admin

      Amos, You could add the meta tags to the template head you are using but you would have to swap out all of the images manually every time you want a new photo gallery. I would not think it was worth the time, especially since Adobe Edge only produces HTML5 content that is not compatible with older browsers. WordPress and Drupal both have wonderful Photo Gallery plugins that are pretty easy to use.

  • Alka

    Hi,

    Packt Publishing is looking for Technical Reviewers on “Learning Adobe Edge” If interested in reviewing this book, contact [email protected]

  • aaron

    I am trying to add more then 5 images and I changed “this.t =5;” to “8” but it still only views 5 images. I placed the my other images in the same images folder and renamed them to 6, 7, 8.

    thanks in advance