Join Paul Trani for an in-depth discussion in this video Using unlimited images, part of Creating a Slideshow with Edge Animate.
Now what I have is a pretty straight forward gallery of five images giving me full control over the animation and the transitions. This works out great for smaller galleries like I have, but what happens if you need to go from five images to 20 to 50? How do you do that? Do you have to start adding to the timeline? Well, after a while this gets to be unmanageable. Just too much going on. So we'd want to actually dynamically load in images when you click on the buttons, and that's what I want to do now.
Take these from five images to 20. So in my library panel, I'm just going to right click on photo_5 and show in finder where those images are. So you can see those five. And in the assets folder, I want to take these additional 14 images, copy them, and paste them right in here. because these are the images I want to click through now. All right, with that done, going back into Animate, you can see all the images are right here, and I want to dynamically load them in at run time, if you will.
So when you actually play this page, all right. So I don't need a lot of this content. In fact, what I'm going to do is I'm going to jump in here. For photos two through five I'm just going to click delete. And, in fact, not only removing those transitions, I'm going to delete those particular photos. Okay. So I've removed all the photos and really everything in the timeline. I don't need it. I'm not going to use the timeline. I'm going to dynamically load in content. So selecting everything in the timeline, clicking delete, and now I can start to take a look at what I have going on here.
Now, photo_1 I left because this is really going to be my place holder. In fact, it's not going to be photo_1 anymore, so we're going to remove that. In fact, it's not even going to be a div, so I want to change this to img. All right? Because I'm going to change the image source from photo_1 to whatever I want. Okay? And that's going to happen when you click these buttons. So I'm selecting this next button. I'm going to go over here and open up the actions for it. 'Kay? So I don't need this play function, and if I take a look at the code snippets, you really won't find anything that's going to allow you to load in images.
You're just going to have to write it, but you know what? It's only going to take one line of code. In fact, I just need to say, sym, dollar sign, because this is going to be pointing to the main timeline. So in quotes, I need to point to this particular photo. So, typing in, that name photo, and I need to change the attribute. Attr. Okay? So, for the attribute, I want to, it's going to have a couple parameters actually, it's going to have source.
So that's what I want to do. I want to change the source to any source I point to. So I can say, images/photo_2.jpg. All right? So change the source attribute to this particular photo when you click on the next button. I'm going to copy this line. And for the button back, opening up that action. And instead of that playReverse, I'm going to replace that with this same line and in this case we'll toggle back to photo_1, dynamically loading in these images.
Now I'm going to run it. You can see as I click, photo two. Photo one. Back and forth. So I'm dynamically loading in those images, but now we need to go from two images to 20 images. So let's do that, because how we're going to do that is we're going to create a variable that's going to be the image number. And then we're either going to add or subtract from that image number. Now, this variable's going to be on the stage. Okay? So, for the stage, I can select right there.
I can open up the actions for it if I want to, just like I was doing with my buttons. And I can say, hey, on compositionReady, when all the graphics have loaded in, then we need to do something. So right in here, getting rid of that comment. And at this point, I'm going to create a variable, and I'm just going to call this imageCount and I'm going to set it equal to one. All right? ImageCount is going to be equal to one. Copying this name, all right, that variable name.
Now keep in mind, that's right here on the stage. Okay? And I get to it right up here as well, like I've been doing. But now, for this button, with it selected, I go into the actions for that button. And right here, instead of that being photo_2, I'm going to, concatenate or add to this path name, imageCount. So whatever number we're at, go ahead and add that image in. Now, the last thing we need to do is, keep adding to that number.
So initially it's going to be one, but if I do imageCount, two plus signs, it's going to add image count, it'll be two, it'll be three, it'll be four, each time you click on this button. All right? So we need to do, go in back over here to this button back. Jumping in here to that line of code and it's a matter of doing the same thing, imageCount. In this case it's going to subtract that number. So it's subtract when you click button back, add to when you click the button next.
Now, as I run this in a browser, we've gone from two images to 20 images. Pretty easy, pretty straightforward. All done, really with only a couple lines of code.