Javascript Image Gallery Modified

File directory:

Of these, only Showpic2.js & gallery2.html & gallery2.css & images are required

Gallery2.html:

<! DOCTYPE html>
　　
GALLERY2.CSS:
body{font-family: "Helvetica", "Arial", "serif"; color: #333; Background-color: #ccc; margin:1em 10%;} H1{color: #333; background-color:transparent;} A{color: #c60; background-color:transparent;font-weight:bold;text-decoration:none;cursor:pointer;} ul{padding:0;} Li{float:left;padding:1em;list-style:none;} Img{display:block;clear:both;}
　　
Showpic2.js:
Window.onload = Preparegallery;function Preparegallery () {if (!document.getelementsbytagname) return false;if (! document.getElementById) return false;if (!document.getelementbyid ("Imagegallery")) return False;var gallery = document.getElementById ("Imagegallery"); var links = gallery.getelementsbytagname ("a"); for (var i = 0;i < links.length;i++) {Links[i].onclick = function () {return showpic (this) False:true;}}} function Showpic (whichpic) {if (!document.getelementbyid ("placeholder")) return False;var Source = Whichpic.getattribute ("href"); var placeholder = document.getElementById ("placeholder"); if (placeholder.nodename! = " IMG ") return False;placeholder.setattribute (" src ", source), if (document.getElementById (" description ")) {var text = Whichpic.getattribute ("title")? Whichpic.getattribute ("title"): ""; var description = document.getElementById ("description"); if ( Description.childnodes[0].nodetype = = 3) {description.childnodes[0].nodevalue = text;}} return true;}
　　
 showpic.js  is an explanation of the code in Showpic2.js and some caveats: 
 
Window.onload = Preparegallery;function Preparegallery () {if (!document.getelementbyid) return false;if (! document.getElementsByTagName) return false;if (!document.getelementbyid ("Imagegallery")) return False;/*we use 3 if Statements to check the current browser whether Surpports & understands those functions of docunment or not. The last if statement are used to check this whether it exists an id "imagegallery" in the associated HTML file. A small tip:if putting return statement in a new line, you had better put return statement into a {}.*/var Galle ry = document.getElementById ("Imagegallery"); var links = gallery.getelementsbytagname ("a"); for (var i = 0; i < Links.le ngth;i++)//Traverse all the links of tags <a> in a for loop{links[i].onclick = function ()/bind every link to  A function showpic () {return showpic (this)? Flase:true;  To solve the problem that it'll jump to another Web page when you click Links if it doesn ' t return false, and current Link would pThe function showpic () as a parameter//and this method of return can solove the problem so you can do not open any Picture when you delete the ' placeholder '//if Showpic (this) return to true (mean that image switches successfully in the show Pic ()), then Preparegallery () would return false to cancel the default behavior of "onclick"; If Showpic () return False, the Preparegallery () would return true to make images can also be opened}}}function Showpic (whi Chpic) {if (!document.getelementbyid ("placeholder")) return False;var Source = Whichpic.getattribute ("href"); var placeholder = document.getElementById ("placeholder"); if (!placeholder.nodename! = "IMG") return false;//be attention! NodeName property always return a value of a Capture, even it was a lowercase in htmlplaceholder.setattribute ("src", source) if (document.getElementById ("description")) {var text = Whichpic.getattribute ("title"); var description = document.getElementById ("description"); if (Description.childnodes[0].nodetype = = 3) {desCription.childnodes[0].nodevalue = text;}} return true;} /*some notes:structed Programming:three is a tenet in this theory--a function can only has one entrance and one exit. However, in function preparegallery (), we have three exits! In my own opinion, it can be accepted if a function have multiple exits, as long as these exits concentrate in the Beginnin  G of a funcition.onclick is very smart:we don ' t worry what would happen if costumer use keyboard to click links, because It would trigger the OnClick event when you use a TAB key to move to a link after pressing the ENTER key in almost every B Rowser,so, there is no need for using "onkeypress" event! and "onkeypress" event is not a impeccable functionin this JavaScript code, I only use four functions of dom:[1] Geteleme NTBYID[2] getelementsbytagname[3] getattribute[4] setattributeand We can use Html-dom to simplify codes: document.getElementsByTagName ("form") <=> document.forms (Html-dom provides object "forms") Element.getattriBute ("src") <=> element.src (Html-dom provides many propertiees describing HTML elements:src, href, title and so O N) However, I think DOM Core is easier to use.*/
　　
Page Effects:
After clicking:
Some of the content in the picture library has been perfected here.
Javascript Image Gallery Modified