gallery3

这个版本的gallery更加的将页面和行为分离，通过DOM的插入节点功能

将只用来占位的img标签和description标签(<p id="description">Choose a image</p><img id="palceholder" src="images/e.jpg" alt="hehe">

)通过js来插入到页面。

方法insertAfter是向节点添加节点

function insertAfter(newElement,targetElement){
		var parent=targetElement.parentNode;
		if(parent.lastChild==targetElement){
			parent.appendChild(newElement);
		}else{
			parent.insertBefore(newElement,targetElement.nextSibling);
		}
}

方法addLoadEvent是为页面添加自动加载事件

function addLoadEvent(func){
	var oldonload=window.onload;
	if(typeof window.onload!='function'){
		window.onload=func;
	}else{
		window.onload=function(){
			oldonload();
			func();
		}
	}
}

这两个方法是非常实用的，以后将会经常用到。

以下是代码部分

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Gallery</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<h1>Gallery</h1>
	<ul id="imagegallery">
		<li><a href="images/a.jpg" title="Lorem ipsum dolor sit amet,"><img src="images/a.jpg" alt="Lorem"></a></li>

		<li><a href="images/b.jpg" title="consectetur adipisicing"><img src="images/b.jpg" alt="Lorem"></a></li>
		<li><a href="images/c.jpg" title="alias ab quos cupiditate"><img src="images/c.jpg" alt="Lorem"></a></li>
		<li><a href="images/d.jpg" title="dignissimos eligendi cum "><img src="images/d.jpg" alt="Lorem"></a></li>
	</ul>
	
	<!-- <p id="description">Choose a image</p>
	
	<img id="palceholder" src="images/e.jpg" alt="hehe"> -->
	
	<script src="js/showPic.js"></script>
</body>
</html>

JavaScript:

function addLoadEvent(func){
	var oldonload=window.onload;
	if(typeof window.onload!='function'){
		window.onload=func;
	}else{
		window.onload=function(){
			oldonload();
			func();
		}
	}
}


function insertAfter(newElement,targetElement){
		var parent=targetElement.parentNode;
		if(parent.lastChild==targetElement){
			parent.appendChild(newElement);
		}else{
			parent.insertBefore(newElement,targetElement.nextSibling);
		}
}

function preparePlaceholder(){
		if(!document.createElement)return false;
		if(!document.createTextNode)return false;
		if(!document.getElementById)return false;
		if(!document.getElementById("imagegallery"))return false;
		
		var palceholder=document.createElement("img");
		palceholder.setAttribute("id","palceholder");
		palceholder.setAttribute("src","images/e.jpg");
		palceholder.setAttribute("alt","my image gallery");

		var description=document.createElement("p");
		description.setAttribute("id","description");
		var desctext=document.createTextNode("Choose an image");

		description.appendChild(desctext);
		var gallery=document.getElementById("imagegallery");
		insertAfter(description,gallery);
		insertAfter(palceholder,description);
}

function prepareGallery(){
	//判断是否支持以下这些方法
	if(!document.getElementById)return false;
	if(!document.getElementsByTagName)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);
		}
		links[i].onkeypress=links[i].onclick;
	}
}

function showpic(whichpic){
	if(!document.getElementById("palceholder"))return true;
	var source=whichpic.getAttribute("href");
	var palceholder=document.getElementById("palceholder");
	palceholder.setAttribute("src",source);

	if(document.getElementById("description")){
		if(whichpic.getAttribute("title")){
			var text=whichpic.getAttribute("title");
		}else{
			text="";
		}
		var description= document.getElementById("description");
		if(description.firstChild.nodeType===3)
		description.firstChild.nodeValue=text;
	}
	return false;
}

addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);