#javascript-code-07-load.js / js
// Keep track of which image we're current looking at var curImage = null; // Wait for the document to finish loading before modifying // or traversing the DOM window.onload = function() { /* * Create the following DOM structure: * <div id="overlay"></div> * <div id="gallery"> * <div id="gallery_image"></div> * <div id="gallery_prev"><a href="">« Prev</a></div> * <div id="gallery_next"><a href="">Next »</a></div> * <div id="gallery_title"></div> * </div> */ // Create the overall gallery holder var gallery = document.createElement("div"); gallery.id = "gallery"; // And add in all the organization divs gallery.innerHTML = '<div id="gallery_image"></div>' + '<div id="gallery_prev"><a href="">« Prev</a></div>' + '<div id="gallery_next"><a href="">Next »</a></div>' + '<div id="gallery_title"></div>'; // Add the gallery into the DOM document.body.appendChild( gallery ); // Handle support for which the next and previous links // are clicked within the gallery id("gallery_next").onclick = nextImage; id("gallery_prev").onclick = prevImage; // Locate all the galleries on the site var g = byClass( "gallery", "ul" ); // Go through all of them for ( var i = 0; i < g.length; i++ ) { // And locate all the links to the slideshow images var link = tag( "a", g[i] ); // Go through each of the image links for ( var j = 0; j < link.length; j++ ) { // Make it such that, when clicked, they display the // image gallery instead of going to the imagae link[j].onclick = function(){ // Show the gray background showOverlay(); // Show the image, in the gallery showImage( this.parentNode ); // Make sure that the browser doesn't go the // image, like it normally would return false; }; } // Add the slideshow navigation to the gallery addSlideShow( g[i] ); } };
(C) Æliens 20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.