Javascript and its close relative Jquery are responsible for much of the fun [footnote] and serious [/footnote] stuff that we see on the web. These tools often are used to turn a static webpage into something much more dynamic. Just like CSS, Javascript and Jquery often are contained in distinct files and have to be added to a webpage in order for it to function properly.
Download slideshow.zip from free.mynmi.net. Once it’s unzipped take a look inside the slideshow folder. Pretty messy huh? Remind you of your closet? [footnote] hopefully not 🙂 [/footnote] Similar to the last exercise, your job is to turn this mess into a fully functional slideshow by creating folders, naming them correctly, and placing the appropriate files into the folders.
To accomplish this goal, open index.html with your browser, view source, and look at the code. Check out lines 8-12 to get an idea of where to put the javascript files [footnote] the ones with a .js suffix [/footnote] and the CSS file that controls the structure of the slideshow. By the way, on line 10, note that the code points to a javascript file named jquery.min.js that lives on the web on one of Google’s servers. You don’t have to worry about that one.
Once the .js and .css files are in place, turn your attention to the image files. You can easily figure out where they go by delving a little more deeply into the index.html document.
Now test your document by opening index.html in a browser. Have a slide show? See dogs? If not, keep trying.