代码改变世界

Javascript Image Gallery 修改

2016-08-10 13:32  yojiaku  阅读(575)  评论(0)  编辑  收藏  举报

文件目录：

其中，所需的只有 showPic2.js & gallery2.html & gallery2.css & images

gallery2.html :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Image Gallery</title>
	<link rel="stylesheet" type="text/css" href="gallery2.css" />
</head>
<body>
	<h1> Snapshots </h1>
	<ul id="imagegallery">
		<li>
			<a href="images/fireworks.jpg" title="A fireworks display"> Fireworks </a>
		</li>
		<li>
			<a href="images/coffee.jpg" title="A cup of coffee"> Coffee </a>
		</li>
		<li>
			<a href="images/rose.gif" title="A rose"> Rose </a>
		</li>
		<li>
			<a href="images/bigben.jpg" title="The famous clock"> Big Ben </a>
		</li>
	</ul>
	<img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" />
	<p id="description"> Choose an image. </p>
	<script type="text/javascript" src="showPic2.js"></script>

	<!-- 
	Some Notes 

	[1] If Javascript support is disabled in consumer's browser, we don't worry about consumer cann't see pictures, because we use a real link in "href" in order to make browser work properly.

	[2] We separate document's structure and document's actions , and much more important thing is we use id "imagegallery" of tag <ul> to make Javascript code be associated with htmldocument's tags.

	-->

</body>
</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 是关于showPic2.js中代码的解释和一些注意事项：

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 is used to check that whether it exists an id "imagegallery" in the associated html file.
	A small tip: if you like putting return statement in a new line, you had better put return statement into a {}.
	*/
	var gallery = document.getElementById("imagegallery");
	var links = gallery.getElementsByTagName("a");

	for(var i = 0; i < links.length;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 will jump to another web page when you click links if it doesn't return false, and current link will pass to the function showPic() as a parameter
			// and this method of return can solove the problem that you can not open any picture when you delete the "placeholder"
			// if showPic(this) return true(mean that image switches successfully in the showPic()), then prepareGallery() will return false to cancel the default behavior of "onclick"; if showPic() return false, the prepareGallery() will return true to make images can also be opened 
		}
	}
}

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;
	// Be attention! nodeName property always return a value of a Capture, even it is a lowercase in html
	placeholder.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 have one entrance and one exit.
However, in function prepareGallery(), we have three exits! 
In my own opinion, it can be accepted if a function has multiple exits, as long as these exits concentrate in the beginning of a funcition.

onclick  is very smart : we don't worry what will happen if costumer use keyboard to click links, 
because it will trigger the onclick event when you use a tab key to move to a link after pressing the enter key in almost every browser,
so, there is no need for using "onkeypress" event! And "onkeypress" event is not an impeccable function

In this javascript code, I only use four functions of DOM:
[1] getElementById
[2] getElementsByTagName
[3] getAttribute
[4] setAttribute
and 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 on)
However, I think DOM Core is easier to use.
*/

　　

网页效果：

点击后：

 

 这里完善了图片库中的一些内容。