INTRODUCTION
This document is located at http://bit.ly/38abJ2
AJAX is a catch-all name for CSS and javascript (shorthand for asynchronous JavaScript + XML). Javascript accesses the DOM (document object model) to modify what we see in an html page within the web browser.
The DOM?
Document Object Manager. It's the layer in the web browser that lets you assess the elements of the HTML/CSS web page using javascript. Since the early browser days, different browsers had many different implementations of the DOM through proprietary versions of javascript - hence browser incompatibilities. Since then, they have moved closer to web standards.
"a well formed HTML document is XML document. and by accessing the DOM you can rewrite any part of the XML" (and change appearance).
Javascript is a scripting language that functions slightly differently on each browser.
There have been libraries of that establish a framework for many of the effects we see in pages that employ AJAX
script.aculo.us
prototype
MooTools
jQuery
etc.. for a full list see http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
What it means for us? These piece together fragments of javascript code to create shortcuts. And eliminate cross browser incompatibilities.
A good one to use jQuery. jQuery has been adopted by big companies (M$ is one) so there are a lot of developers who are there.
LIGHTBOX EFFECT
The first version of the lighbox was created by Lokesh Dhakar
http://www.huddletogether.com/projects/lightbox/
the second version of his script used the Script.aculo.us library.
Since then lots of different versions focusing on different apexes
List of all lightbox clones:
http://planetozh.com/projects/lightbox-clones/
We'll use 'Shadowbox', script
* standalone (or can be used with any of the libraries)
* supports images, galleries, swf, flv, quicktime, wmv, iframes, html, youtube and flash
* larger, so may take more time to load.
* resizes the image within the lightbox window to fit the image to the size of the user's screen
* not open source. pay for commercial use. fine to use for your portfolio
You can find Shadowbox download and helpful tips here - http://www.shadowbox-js.com/index.html
OK LETS BUILD A PAGE WITH A SHADOWBOX GALLERY
1. Start with the example from your HTML book, a simple unstyled page with some images and text:
Download these files
http://dl.dropbox.com/u/2884639/downloads/barcelonas_market.zip
http://dl.dropbox.com/u/2884639/downloads/shadowbox.zip
Unzip each folder. Put the 'Shadowbox' folder within 'barcelonas_market"
2. Open the 'start.html' document in a text editor. We need to add the location of the javascript and css files, as well as the command to run shadowbox.
go here - http://www.shadowbox-js.com/usage.html
copy the following text:
and place it within the tags, right above the ending tag.
Reload. Nothing different, but the page is now loading the shadowbox javascript on page load.
3. Add links around the thumbnail images on your page with the REL attribute set to "shadowbox". This lets the javascript know you want the link to invoke the shadowbox gallery.
Copy the following and add these LINKS around each in the document
Save and reload. clicking the images should now display the lighbox effect individually.
Notice that the title attribute is displayed in the shadowbox.
4. A nice way to show off the images on your page would be to show them in a gallery, In the 'rel' attribute add square brackets within the quotes with the name of your gallery It can be anything as long as every item you want in the gallery is the same. Let's choose [foodgallery] here:
Make sure each REL attribute now looks like this: rel="shadowbox[foodgallery]"
...
Reload. Click on the imageYou should have a lightbox with navigation at the bottom for the links in your gallery.
5. Let's say you wanted to add a video of the Barcelona Market
Shadowbox is unique among the lighboxt scripts in that it lets you use Flash, Quicktime and WMV videos, but you must first tell it you plan to use these options. The default initialization covers the tag only. To add the other options, select the code you put in the header that initialized the code in your HTML document, within the head
And replace with:
What we've done is to place the following variables inside the parenthesis of the Shadowbox.init();
{language: 'en', players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']}
Notice we are setting english as a language option, and spelling out what players to use. Let's go crazy and tell it to use them all: img, html, frame, qt, wmp, swf and flv. (YouTube and Vimeo are covered by the SWF option).
6. Download the a quicktime movie about the Barcelona Market:
http://dl.dropbox.com/u/2884639/Lightbox_example_files/barcelona_video.mp4.zip
Unzip the movie and place it within your 'barcelonas_market" folder
7. Let's add a link to the quicktime movie to the video, and make the link accessible as the third item in the gallery. Above the end tag and below the last bit of content on the page lets add:
Reload. Click on the imageYou should have a lightbox with navigation at the bottom for the links in your gallery.
5. Let's say you wanted to add a video of the Barcelona Market
Shadowbox is unique among the lighboxt scripts in that it lets you use Flash, Quicktime and WMV videos, but you must first tell it you plan to use these options. The default initialization covers the