WEBINAR: On-demand webcast
How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >
Let's say you have a cooking site, and you want pictures of the five most recent meals that you've featured to rotate in the banner. Or, let's say you have a real estate site and you want pictures of your 10 most recent listings to rotate in a specific spot on all of your pages. To add functionality, you want each image to link to a different page. All of this is no problem with the following code.
First, you need to get organized. Collect all of your images into the same folder and make sure they are the same size. If they are not the same size and you don't want to distort them, then simply resize the canvas of each image and do not resize the image itself. That way, the placeholder where the images appear won't change shape as each new image appears.
Second, collect all of the links that you want associated with the images and save them somewhere convenient so you can copy and paste them later.
If you only want four images to rotate, then simply delete one of the item rows. If you want to add one, then copy and paste and update items to items and so on.
You've now laid the ground work for adding this image rotator to your site. But there is one more step you need to do for your images to appear on the page. Figure out where you want the images to appear on the page and copy in:
<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>That's all there is to it. When I first started working on adding an image rotator to my site, it wasn't as easy as copying and pasting. I went through several different examples of code that I found online. Most of them did not work. This above code didn't work either, but then I made a few tweaks here and there and managed to get it working. I did the hard part for you. Now all you have to do is update your images and links, do a little copying and pasting, and away you go.
If you decide to use this image rotator on several different pages within your site and then later you need to change the images and content you can do so from one location. However, this does require some planning ahead. Let's go back to the example of a real estate site. When you save the images, I recommend using the same convention for each image, for example, "House1.jpg" and "House2.jpg" and so forth. Then, when you want to showcase a new series of houses, simply name the new images using the same file names as before. That way, all of your pages will show the new images after the browser clears the cache or you refresh the page.
The same works for each of the links. My recommendation is to name each .htm file, "House1.htm" and "House2.htm" and so forth. This way, all you have to do is update the content within the .htm files and the links in the image rotator will automatically point to the new content.
Doing it this way will save you countless time in going to back to each and every single page with the image rotator and having to update the image source and URLs.
Of course, you will lose the content that you just overwrote, but if you plan ahead, you can rename the prior content to something new and place it in your archives or whatever is appropriate.