Dawn Pedersen. What is JavaScript? JavaScript is the basis for both jQuery and Spry applications...
12
Extending a Website with jQuery Dawn Pedersen
-
Upload
david-woods -
Category
Documents
-
view
219 -
download
1
description
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)
Transcript of Dawn Pedersen. What is JavaScript? JavaScript is the basis for both jQuery and Spry applications...
Extending a Website with
jQueryDawn Pedersen
What is JavaScript?JavaScript is the basis for both jQuery and
Spry applicationsJavaScript is referred to as a client-side
scripting languageIt 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 loadedJavaScript is not the same as Java, which is a
server-side programming language.
JavaScript CaveatsBecause 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)
JavaScript Script LocationsLike CSS, JavaScript can be placed
inline with content on the pagein the head of the page (internal)in an external file ending with .js
Like CSS, external files are preferredto keep our markup cleanto have access to the script from any page
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 wantput files in the right placesadd links to the scripts in your markupmake a few changes to your existing markup
Lightbox IntroLightbox 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.
Lightbox ExerciseDownload and extract the Lightbox .zip file
from the Lightbox2 website: http://www.huddletogether.com/projects/lightbox2/
I will provide some directions on the next slides, but you can also get them from the website.
Lightbox Exercise1. Start by downloading our starter gallery:
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.
Lightbox Exercise5. In index.html, add links to the three .js files within
your <head> element: <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript"
src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script>
6. Add the link to the CSS file in the <head> element: <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Be sure the paths are correct to those files. 7. 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.
Lightbox Exercise8. To enable the Lightbox, add some markup to the <a> 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!
More on jQueryIf 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.
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.
