Photo Gallery Improved version

body{font-family: "Arial", Serif;color: #333; background#ccc; margin:1em 10%;} H1{color: #333; background:transparent;} a{color: #333; font-weight:bold; text-decoration:none;} ul{padding:0;} li{float:left; padding:1em; list-style:none; border-right:solid 1px #ccc;}  #imagegallery: after{content: "."; Clear:both; height:0; Visibility:hidden; Display:block; } #placeholder {width:400px; height:300px;} img{display:block; clear:both}.icon{display:inline-block;width:16px;height:16px; vertical-align:top; background: URL (smicon.png) no-repeat; padding-left:10px;}

<! Doctype html>
Function addloadevent (func) {    //does not matter how many functions are executed after the page is loaded var oldonload =  window.onload;if (typeof window.onload !=  ' function ') {Window.onload = func;} Else{window.onload = function () {oldonload (); func ();}}} Function insertafter (newelement,targetelement) {                   //inserts a new element behind an existing element, which is a general-purpose function var parent =  Targetelement.parentnode;if (parent.lastchild == targetelement) {parent.appendchild (newElement);} Else{parent.insertbefore (newelement,targetelement.nextsibling);}} Function prepareplaceholder () {            // DOMIF (!document.createelement)  return false;if (!document.createtextnode)  return false;if (! document.getElementById)  return false;if (!document.getelementbyid ("Imagegallery"))  return  False;var&nbsP;placeholder = document.createelement ("img");p laceholder.setattribute ("id", "placeholder"); Placeholder.setattribute ("src", "placeholder.gif");p Laceholder.setattribute ("alt", "My image gallery") ; Var description = document.createelement ("P");d Escription.setattribute ("id", "description"); var  desctext = document.createtextnode ("Choose an image");d Escription.appendchild ( Desctext)/* document.getelementsbytagname ("Body") [0].appendchild (placeholder);// Document.body.appendChild (Palceholder);d ocument.getelementsbytagname ("body") [0].appendchild (description);// Document.body.appendChild (description);   */var gallery = document.getelementbyid (" Imagegallery ")//gallery.parentelement.insertbefore (Placeholder,gallery);//gallery.parentelement.insertbefore ( Descriptio,gallery);  insertafter (placeholder,gallery); InsertAfter (description,gallery);} Function showpic (whichpic)  {     &nbsp              //Click to toggle the picture if (!) document.getElementById ("placeholder"))  return false;var source =  Whichpic.getattribute ("href"); Var placeholder = document.getelementbyid ("placeholder"); Placeholder.setattribute ("src", source);                    //can completely replace the clause with  placeholder.src = source . (document.getElementById ("description"))  {var text = whichpic.getattribute ("title"); var  description = document.getelementbyid ("description");//alert ( description.nodevalue);// Alert (Description.firstChild.nodeValue);                    //is equivalent to alert ( description.childnodes[0].nodevalue); Description.firstchild.nodevalue=text;} Return true;} Addloadevent (prEpareplaceholder); addloadevent (preparegallery); 
Effect preview:
650) this.width=650; "Src=" Http://s1.51cto.com/wyfs02/M02/81/FF/wKiom1dG1lGhQqrVAABpRNofKtI991.jpg-wh_500x0-wm_3 -wmp_4-s_1456667971.jpg "title=" 2.jpg "alt=" Wkiom1dg1lghqqrvaabprnofkti991.jpg-wh_50 "/>
Photo Gallery Improved version