Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
We're going to set the HTML, beginning and ending parentheses, a semicolon. Inside of here, we are going to set a string literal, image, source, equals, two quotes, forward slash, end bracket. And inside there, we're going to put a letter x. So what we're going to do is take the preload area and put an image tag in that area. Let's grab photo_preview variable, select the X, hit Delete, two tick marks, two Plus signs.
We're going to concatenate the string, photo_preview. On the next line, I am going to copy the declaration, picking that div. So we're going to say Dollar sign, .gallery_ preload_area img, so we are going to target all images that are inside the preload area, which we just added one on the line above. Now, we're going to use imgpreload.
This is the name of the actual function that's part of the far In image preload tool. Beginning and ending parentheses, then a semicolon. So this statement, this is the name of the plug-in. So once we hooked in the farinspace into our page, we can call this just like any other function and this will actually perform a preload on all of the images that are inside of preload area. Inside of here, let's add a function, beginning and ending parentheses, beginning and ending bracket.
This function is callback function, and it's only going to run after all the preload has happened. So let's open this up a little bit. So these are all of the things we want to have happen only after the preload has taken place. So, let's cut all this to the clipboard, put our cursor inside here, and let's paste all of this inside here. I will tab some of this in, so we can see the structure. So now when our full script happens, the anchor tags get clicked. We prevent the default.
We set the states of the thumbnails. We defined variables based on the thumbnail you clicked, which is this statement. We created a photo_preview URL because we don't actually use that in our HTML. We set the gallery_caption to slide up, we fade out the picture. Then we take the preload area, we put an image tag in it, then we run a preload on that to make sure that's been loaded. Then we update the HTML for the preview, update the HTML for the caption, and then we show the preview and show the caption. Let's hit File > Save. Let's come out to our operating system.
Let's double-click index.html, Command or Ctrl to reload. Now when I click on these images, the preload will happen and the type will fade up. Now, open this window up a little bit, and if we put this up on a web server where we have maybe a little bit of a slower Internet connection, or we put a really heavy preview file, a file with a big file size, we will actually see the preload happening. But also notice down here I have the image preload area, which is where the first image tag is getting written.
So as I click these, notice that on the right-hand side when the image fades out, we see the picture down below switch, and then we get the fade-up. So now what we need to do is set a CSS rule that hides that particular div. Let's come back over to Dreamweaver. Let's create a new CSS rule. This is going to be a class. We're going to set .gallery_preload_ area, click OK, Block properties, set the Display to None--we don't want the user to ever see that.
Let's choose File > Save All. Let's go back to our browser. We will hit Reload. Now, I can click on the images. The image will get written into that area we just set to be hidden with CSS, the preload happens, and then the content will fade back up. Now that our preload is working, now we want to add in our lightbox plug-in and set our overlay links.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99232 Viewers
56 Video lessons · 112510 Viewers
71 Video lessons · 81310 Viewers
131 Video lessons · 39039 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.