1 / 12

Extending a Website with jQuery

Extending a Website with jQuery. Dawn Pedersen. 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)

opal
Download Presentation

Extending a Website with jQuery

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Extending a Website with jQuery 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 jQueryplugin—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/ • I will provide some directions on the next slides, but you can also get them from the website.

  8. Lightbox Exercise • Start by downloading our starter gallery: http://blulob.com/ai/mm2203/docs/gallery.zip. • Extract this file to your Desktop. • Create a new folder in this site called “js”. • 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 • 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> • 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. • 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 • 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!

  11. More on jQuery • If Lightbox or other jQueryplugins 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 jQueryplugins can be downloaded from http://plugins.jquery.com/. Take a few minutes and check some of the demos out.

  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.

More Related