Join Ray Villalobos for an in-depth discussion in this video Showing an image, part of iOS 4 Web Applications with HTML5 and CSS3.
Now we're ready to program showing and hiding an image. It's a lot like showing the overlay, with a couple of differences. When we want to animate, showing and hiding of an element with certain transformations, we need to use a timeout function. I'm also going to show you how to create new HTML elements as well. The first thing we need to do is to tell our program where the high-resolution versions of our images are. You can see that I have an SRC tag right here that shows where the thumbnails are, but I need to add information to this image tag to show the program where the high-resolution versions of the images are.
So I'm going to replace this code, and in this new version, you can see that I have added a new tag to each list element image tag-- you see another one right here. And it's essentially just where the high-resolution versions of the image is. I have named them exactly the same as the low-resolution versions, except without the _tn. Now before, I was executing this function called showImage, and I wasn't really passing it any information. Since now we want to pass the information about the high-resolution versions, we're going to add the keyword "this" on each showImage to make sure that we pass the information about which item was clicked.
So when we click on each one of these thumbnails, it's going to let the program know which thumbnail we clicked on. So we'll need to come here to our showImage function and add a variable that will catch which thumbnail was clicked on, and pass the information about the high-resolution version of the image. We will store the name of the high-resolution version of the image in a special variable. You can see that we can tell the program to get an attribute from within an element.
So as we're passing the entire information about the image tag through this originalImage variable here, over here we're accessing an attribute within that image tag. So we can actually access any attribute within an image tag, or any other tag, by using this getAttribute method. Just as before, with overlay, we need to tell the program where we want the image to be. So we're storing the location of where we want the image to go inside this variable.
We want the location to be the overlay. So it's going to put an image inside this overlay that we've created. Here we're creating an HTML element from scratch. We're using the method called createElement to add an IMG tag to our document. We're also setting the SRC tag of this image element to be the location of the high-resolution image.
In this piece of code, we're adding the new element that we've created to the document. Just because you create an element doesn't mean that it goes anywhere on the page. We need to make sure that we append our element to the insertLocation to make sure that the program knows where in the document the element is going to go. As you can see, when we click on an element, it shows the element. If we click on it again, it hides it. However, if we click on an element more than one time, you'll see that more than one element comes up.
That's because we're not getting rid of elements; we are just continuing to add them to the document. So we need to make sure we write something to get rid of the elements once they're clicked on in the overlay. The place in our program where we are getting rid of the overlay, we're also getting rid of the new image by removing the element that we created at the insertLocation where we've placed it.
Now when we click on elements more than once, it won't continuously add them to the document. It'll get rid of them as soon as the overlay is destroyed. We want to make the appearing and disappearing of the images a little more interesting, so we're going to add some styles. So we have added three styles to our document. One for the image when it's inside the overlay. That way it won't affect the thumbnails.
This has a transition and a transformation to make sure that it animates, and it sets the opacity of the original image at 0.5, which is very, very transparent. Next, when somebody clicks on the image, we're going to apply this style that shows the image. So it's going to scale to it 100% of its original size, and it's going to make it totally opaque. Then when we click on it again, we want to go back and scale it to nothing and change the opacity again. So these are just three styles that will help us when we want to show the image after the overlay appears, and hide it after we are done with it.
Now when we add the image, we've changed here the className of the image to show it. However, if you click on the image, it's not really going to use that transformation, because of the way the image is loading in the browser. It's actually loading it way too quickly for that animation to be viewable. So we need to add a timeout function that will delay the showing of the image, so that it has time for the animation to play. So here is what a Timeout function looks like. It looks at a normal method with a function inside it.
In this function, we are telling the browser that we want to hold off in showing the image to 100 milliseconds, and after that 100 milliseconds, we're going to apply that style to it. That should be just enough time to show the animation happening. So as you can see, the animation for showing the image is happening now. However, when you click on the image to hide it, that animation doesn't play. So we'll need to take care of that as well.
We're going to replace the part where the overlay gets clicked on to handle that hiding of the image by adding a similar piece of code to the showing of the image. Here we're applying the className of hideit to the image, and setting up a Timeout function that slows down the removal of the image. In this case, we're actually slowing down the removal of the image, not the showing of it. Because if we don't put this Timeout function here, the image will be removed before it has time to play the animation.
As you can see, now the images show the two animations. Now I'm going to do a last bit of cleanup here, because we are really no longer worried about clicking on the overlay. We have images that we can target when they show up here. So I'm going to change this piece of code that checks to see if the overlay has been clicked on to just check to see if an image has been clicked on. It's a little bit easier to read, too, and it works in a very similar way.
We've learned a lot of important concepts here: how to create elements dynamically and how to work with delaying animations in order to show them properly. Now we're ready to start working on building a gallery.
- Building a basic HTML page structure
- Making HTML5 backwards compatible
- Working with opacity
- Building transitions with CSS
- Triggering transitions with gestures
- Animating with keyframes
- Using custom fonts
- Targeting devices and orientations
- Displaying images
- Playing and controlling audio
- Playing video
- Generating dynamic content
- Using geolocation