1. Dawn Pedersen

2. What is JavaScript? JavaScript is the basis for both jQuery and Spry applications JavaScript is referred to as a client-side scripting language It does not need to be parsed by the server like PHP and ASP do (these are server-side scripts) It is interpreted and rendered by the browser (the client) after the page is loaded JavaScript is not the same as Java, which is a server- side programming language.

3. JavaScript Caveats Because it is run on the client end, it is subject to all the quirks of various browsers (just like CSS) JavaScript should not be used for mission-critical functionality, because the user can turn it off JavaScript should degrade elegantly (if users turn it off, the page will still work)

4. JavaScript Script Locations Like CSS, JavaScript can be placed inline with content on the page in the head of the page (internal) in an external file ending with.js Like CSS, external files are preferred to keep our markup clean to have access to the script from any page

5. What is jQuery? jQuery is a method of using a JavaScript library which is already scripted for you. jQuery scripts can do all kinds of fancy things on your site. You simply: download the library you want put files in the right places add links to the scripts in your markup make a few changes to your existing markup

6. Lightbox Intro Lightbox is a set of JavaScript scripts—a jQuery plugin—that will allow you to have images (or other content) open with an animation in an overlay window. It provides a nice interface for viewing images.

7. Lightbox Exercise Download and extract the Lightbox.zip file from the Lightbox2 website: http://www.huddletogether.com/projects/lightbox2/ http://www.huddletogether.com/projects/lightbox2/ I will provide some directions on the next slides, but you can also get them from the website.

8. Lightbox Exercise 1. Start by downloading our starter gallery: http://blulob.com/ai/mm2203/docs/gallery.zip. http://blulob.com/ai/mm2203/docs/gallery.zip 2. Extract this file to your Desktop. 3. Create a new folder in this site called “js”. 4. Grab a few files from the extracted Lightbox folder: Move the 3.js files into your gallery’s “js” folder. Move the lightbox.css file into your gallery’s “css” folder. Move the image files into your gallery’s “images” folder. We’re done with the Lightbox folder. Future steps will refer to your gallery site folder only.

9. Lightbox Exercise 5. In index.html, add links to the three.js files within your element: 6. Add the link to the CSS file in the element: Be sure the paths are correct to those files. 5. If you have another CSS file to load be sure it comes after the lightbox.css file, so that any CSS you have written will override the styles for Lightbox.

10. Lightbox Exercise 8. To enable the Lightbox, add some markup to the tags on index.html: Add the rel= " lightbox " attribute. Putting [group name] will put the photos in a group so that you can click next or previous to scroll through them. Adding a title= " caption name " attribute will display a caption below the picture. That’s it. Assuming your links to the support files are correct, it should work. Test it!

11. More on jQuery If Lightbox or other jQuery plugins are not working, it can often be attributed to a conflict with other JavaScript being run on the page. There are a number of other scripts available that do much the same as Lightbox, built with different libraries, or with slightly different functionality. A whole catalog of jQuery plugins can be downloaded from http://plugins.jquery.com/. Take a few minutes and check some of the demos out.http://plugins.jquery.com/

12. What is Spry? Spry is Dreamweaver’s version of JavaScript libraries. Spry effects alter the look of a page element—or of the whole page itself—when a particular event occurs.