js摄影作品陈列代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js摄影作品陈列代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

部分效果截图3:

HTML代码(index.html):

<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>abc</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv=Page-Enter content=blendTrans(Duration=0.5)>
<meta http-equiv=Page-Exit content=blendTrans(Duration=0.5)>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body scroll=no>
<table width="798" height="276" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center"><table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="86" height="86" align="center"><a title="photo by xixi" href="images/01.jpg" rel="lightbox"><img src="images/mini_01.jpg" name="picboder" width="60" height="60" border="0" id="picboder"/></a></td>
        <td width="86" height="86" align="center"><a title="photo by xixi" href="images/02.jpg" rel="lightbox"><img src="images/mini_02.jpg" width="60" height="60" border="0" id="picboder"/></a></td>
        <td width="86" height="86" align="center"><a title="photo by xixi" href="images/03.jpg" rel="lightbox"><img src="images/mini_03.jpg" width="60" height="60" border="0" id="picboder" /></a></td>
        <td width="86" height="86" align="center"><a title="photo by xixi" href="images/04.jpg" rel="lightbox"><img src="images/mini_04.jpg" width="60" height="60" border="0" id="picboder" /></a></td>
        <td width="86" height="86" align="center"><a title="photo by xixi" href="images/05.jpg" rel="lightbox"><img src="images/mini_05.jpg" width="60" height="60" border="0" id="picboder" /></a></td>
        <td width="86" height="86" align="center"><a title="photo by xixi" href="images/06.jpg" rel="lightbox"><img src="images/mini_06.jpg" width="60" height="60" border="0" id="picboder" /></a></td>
        <td width="86" height="86" align="center"><a title="photo by xixi" href="images/07.jpg" rel="lightbox"><img src="images/mini_07.jpg" name="picboder" width="60" height="60" border="0" id="picboder"/></a></td>
        <td width="86" height="86" align="center"><a title="photo by xixi" href="images/08.jpg" rel="lightbox"><img src="images/mini_08.jpg" name="picboder" width="60" height="60" border="0" id="picboder"/></a></td>
        <td width="86" align="center"><a title="photo by xixi" href="images/09.jpg" rel="lightbox"><img src="images/mini_09.jpg" name="picboder" width="60" height="60" border="0" id="picboder" /></a></td>
      </tr>
      <tr>
        <td width="86" height="86" align="center"><a title="photo by xixi" href="images/10.jpg" rel="lightbox"><img src="images/mini_10.jpg" name="picboder" width="60" height="60" border="0" id="picboder"/></a></td>
        <td width="86" height="86" align="center"><a title="photo by xixi" href="images/11.jpg" rel="lightbox"><img src="images/mini_11.jpg" name="picboder" width="60" height="60" border="0" id="picboder"/></a></td>
        <td width="86" height="86" align="center"><a title="photo by xixi" href="images/12.jpg" rel="lightbox"><img src="images/mini_12.jpg" name="picboder" width="60" height="60" border="0" id="picboder" /></a></td>
        <td width="86" height="86" align="center"><a title="photo by xixi" href="images/13.jpg" rel="lightbox"><img src="images/mini_13.jpg" name="picboder" width="60" height="60" border="0" id="picboder" /></a></td>
        <td width="86" height="86" align="center"><a title="photo by xixi" href="images/14.jpg" rel="lightbox"><img src="images/mini_14.jpg" name="picboder" width="60" height="60" border="0" id="picboder" /></a></td>
        <td width="86" height="86" align="center"><a title="photo by xixi" href="images/15.jpg" rel="lightbox"><img src="images/mini_15.jpg" name="picboder" width="60" height="60" border="0" id="picboder" /></a></td>
        <td width="86" height="86" align="center"><a title="photo by xixi" href="images/16.jpg" rel="lightbox"><img src="images/mini_16.jpg" name="picboder" width="60" height="60" border="0" id="picboder"/></a></td>
        <td width="86" height="86" align="center"><a title="photo by xixi" href="images/17.jpg" rel="lightbox"><img src="images/mini_17.jpg" name="picboder" width="60" height="60" border="0" id="picboder"/></a></td>
        <td width="86" align="center"><a title="photo by xixi" href="images/18.jpg" rel="lightbox"><img src="images/mini_18.jpg" name="picboder" width="60" height="60" border="0" id="picboder" /></a></td>
      </tr>
      <tr>
        <td width="86" height="86" align="center"><a title="photo by xixi" href="images/19.jpg" rel="lightbox"><img src="images/mini_19.jpg" name="picboder" width="60" height="60" border="0" id="picboder"/></a></td>
        <td width="86" height="86" align="center"><a title="photo by xixi" href="images/20.jpg" rel="lightbox"><img src="images/mini_20.jpg" name="picboder" width="60" height="60" border="0" id="picboder"/></a></td>
        <td width="86" height="86" align="center"><a title="photo by xixi" href="images/21.jpg" rel="lightbox"><img src="images/mini_21.jpg" name="picboder" width="60" height="60" border="0" id="picboder" /></a></td>
        <td width="86" height="86" align="center"></td>
        <td width="86" height="86" align="center"></td>
        <td width="86" height="86" align="center"></td>
        <td width="86" height="86" align="center"></td>
        <td width="86" height="86" align="center"></td>
        <td width="86" height="86" align="center"></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

JS代码(lightbox.js):

/*Lightbox JS:Fullsize Image Overlaysby Lokesh Dhakar - http://www.huddletogether.comFor more information on this script,visit:http://huddletogether.com/projects/lightbox/Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/(basically,do anything you want,just leave my name and link)Table of Contents-----------------ConfigurationFunctions- getPageScroll()- getPageSize()- pause()- getKey()- listenKey()- showLightbox()- hideLightbox()- initLightbox()- addLoadEvent()Function Calls- addLoadEvent(initLightbox)*/
//// Configuration//// If you would like to use a custom loading image or close button reference them in the next two lines.var loadingImage = 'images/loading.gif';
	var closeButton = 'images/close.gif';
	//// getPageScroll()// Returns array with x,y page scroll values.// Core code from - quirksmode.org//function getPageScroll(){
	var yScroll;
	if (self.pageYOffset){
	yScroll = self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop){
	// Explorer 6 StrictyScroll = document.documentElement.scrollTop;
}
else if (document.body){
	// all other ExplorersyScroll = document.body.scrollTop;
}
arrayPageScroll = new Array('',yScroll)return arrayPageScroll;
}
//// getPageSize()// Returns array with page width,height and window width,height// Core code from - quirksmode.org// Edit for Firefox by pHaez//function getPageSize(){
	var xScroll,yScroll;
	if (window.innerHeight && window.scrollMaxY){
	xScroll = document.body.scrollWidth;
	yScroll = window.innerHeight + window.scrollMaxY;
}
else if (document.body.scrollHeight > document.body.offsetHeight){
	// all but Explorer MacxScroll = document.body.scrollWidth;
	yScroll = document.body.scrollHeight;
}
else{
	// Explorer Mac...would also work in Explorer 6 Strict,Mozilla and SafarixScroll = document.body.offsetWidth;
	yScroll = document.body.offsetHeight;
}
var windowWidth,windowHeight;
	if (self.innerHeight){
	// all except ExplorerwindowWidth = self.innerWidth;
	windowHeight = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight){
	// Explorer 6 Strict ModewindowWidth = document.documentElement.clientWidth;
	windowHeight = document.documentElement.clientHeight;
}
else if (document.body){
	// other ExplorerswindowWidth = document.body.clientWidth;
	windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewportif(yScroll < windowHeight){
	pageHeight = windowHeight;
}
else{
	pageHeight = yScroll;
}
// for small pages with total width less then width of the viewportif(xScroll < windowWidth){
	pageWidth = windowWidth;
}
else{
	pageWidth = xScroll;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)return arrayPageSize;
}
//// pause(numberMillis)// Pauses code execution for specified time. Uses busy code,not good.// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602//function pause(numberMillis){
	var now = new Date();
	var exitTime = now.getTime() + numberMillis;
	while (true){
	now = new Date();
	if (now.getTime() > exitTime)return;
}
}
//// getKey(key)// Gets keycode. If 'x' is pressed then it hides the lightbox.//function getKey(e){
	if (e == null){
	// iekeycode = event.keyCode;
}
else{
	// mozillakeycode = e.which;
}
key = String.fromCharCode(keycode).toLowerCase();
	if(key == 'x'){
	hideLightbox();
}
}
//// listenKey()//function listenKey (){
	document.onkeypress = getKey;
}
//// showLightbox()// Preloads images. Pleaces new image in lightbox then centers and displays.//function showLightbox(objLink){
	// prep objectsvar objOverlay = document.getElementById('overlay');
	var objLightbox = document.getElementById('lightbox');
	var objCaption = document.getElementById('lightboxCaption');
	var objImage = document.getElementById('lightboxImage');
	var objLoadingImage = document.getElementById('loadingImage');
	var objLightboxDetails = document.getElementById('lightboxDetails');
	var arrayPageSize = getPageSize();
	var arrayPageScroll = getPageScroll();
	// center loadingImage if it existsif (objLoadingImage){
	objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px');
	objLoadingImage.style.left = (((arrayPageSize[0] - 45 - objLoadingImage.width) / 2) + 'px');
	objLoadingImage.style.display = 'block';
}
// set height of Overlay to take up whole page and showobjOverlay.style.height = (arrayPageSize[1] + 'px');
	objOverlay.style.display = 'block';
	// preload imageimgPreload = new Image();
	imgPreload.onload=function(){
	objImage.src = objLink.href;
	// center lightbox and make sure that the top and left values are not negative// and the image placed outside the viewportvar lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2);
	var lightboxLeft = ((arrayPageSize[0] - 9 - imgPreload.width) / 2);
	objLightbox.style.top = (lightboxTop < 0) ? "0px":lightboxTop + "px";
	objLightbox.style.left = (lightboxLeft < 0) ? "0px":lightboxLeft + "px";
	objLightboxDetails.style.width = imgPreload.width + 'px';
	if(objLink.getAttribute('title')){
	objCaption.style.display = 'block';
	//objCaption.style.width = imgPreload.width + 'px';
	objCaption.innerHTML = objLink.getAttribute('title');
}
else{
	objCaption.style.display = 'none';
}
// A small pause between the image loading and displaying is required with IE,// this prevents the previous image displaying for a short burst causing flicker.if (navigator.appVersion.indexOf("MSIE")!=-1){
	pause(250);
}
if (objLoadingImage){
	objLoadingImage.style.display = 'none';
}
// Hide select boxes as they will 'peek' through the image in IEselects = document.getElementsByTagName("select");
	for (i = 0;
	i != selects.length;
	i++){
	selects[i].style.visibility = "hidden";
}
objLightbox.style.display = 'block';
	// After image is loaded,update the overlay height as the new image might have// increased the overall page height.arrayPageSize = getPageSize();
	objOverlay.style.height = (arrayPageSize[1] + 'px');
	// Check for 'x' keypresslistenKey();
	return false;
}
imgPreload.src = objLink.href;
}
//// hideLightbox()//function hideLightbox(){
	// get objectsobjOverlay = document.getElementById('overlay');
	objLightbox = document.getElementById('lightbox');
	// hide lightbox and overlayobjOverlay.style.display = 'none';
	objLightbox.style.display = 'none';
	// make select boxes visibleselects = document.getElementsByTagName("select");
	for (i = 0;
	i != selects.length;
	i++){
	selects[i].style.visibility = "visible";
}
// disable keypress listenerdocument.onkeypress = '';
}
//// initLightbox()// Function runs on window load,going through link tags looking for rel="lightbox".// These links receive onclick events that enable the lightbox display for their targets.// The function also inserts html markup at the top of the page which will be used as a// container for the overlay pattern and the inline image.//function initLightbox(){
	if (!document.getElementsByTagName){
	return;
}
var anchors = document.getElementsByTagName("a");
	// loop through all anchor tagsfor (var i=0;
	i<anchors.length;
	i++){
	var anchor = anchors[i];
	if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){
	anchor.onclick = function (){
	showLightbox(this);
	return false;
}
}
}
// the rest of this code inserts html at the top of the page that looks like this://// <div id="overlay">//<a href="#" onclick="hideLightbox();
	return false;
	"><img id="loadingImage" /></a>//</div>// <div id="lightbox">//<a href="#" onclick="hideLightbox();
	return false;
	" title="Click anywhere to close image">//<img id="closeButton" />//<img id="lightboxImage" />//</a>//<div id="lightboxDetails">//<div id="lightboxCaption"></div>//<div id="keyboardMsg"></div>//</div>// </div>var objBody = document.getElementsByTagName("body").item(0);
	// create overlay div and hardcode some functional styles (aesthetic styles are in CSS file)var objOverlay = document.createElement("div");
	objOverlay.setAttribute('id','overlay');
	objOverlay.onclick = function (){
	hideLightbox();
	return false;
}
objOverlay.style.display = 'none';
	objOverlay.style.position = 'absolute';
	objOverlay.style.top = '0';
	objOverlay.style.left = '0';
	objOverlay.style.zIndex = '90';
	objOverlay.style.width = '100%';
	objBody.insertBefore(objOverlay,objBody.firstChild);
	var arrayPageSize = getPageSize();
	var arrayPageScroll = getPageScroll();
	// preload and create loader imagevar imgPreloader = new Image();
	// if loader image found,create link to hide lightbox and create loadingimageimgPreloader.onload=function(){
	var objLoadingImageLink = document.createElement("a");
	objLoadingImageLink.setAttribute('href','#');
	objLoadingImageLink.onclick = function (){
	hideLightbox();
	return false;
}
objOverlay.appendChild(objLoadingImageLink);
	var objLoadingImage = document.createElement("img");
	objLoadingImage.src = loadingImage;
	objLoadingImage.setAttribute('id','loadingImage');
	objLoadingImage.style.position = 'absolute';
	objLoadingImage.style.zIndex = '150';
	objLoadingImageLink.appendChild(objLoadingImage);
	imgPreloader.onload=function(){
}
;
	//clear onLoad,as IE will flip out w/animated gifsreturn false;
}
imgPreloader.src = loadingImage;
	// create lightbox div,same note about styles as abovevar objLightbox = document.createElement("div");
	objLightbox.setAttribute('id','lightbox');
	objLightbox.style.display = 'none';
	objLightbox.style.position = 'absolute';
	objLightbox.style.zIndex = '100';
	objBody.insertBefore(objLightbox,objOverlay.nextSibling);
	// create linkvar objLink = document.createElement("a");
	objLink.setAttribute('href','#');
	objLink.setAttribute('title','Click to close');
	objLink.onclick = function (){
	hideLightbox();
	return false;
}
objLightbox.appendChild(objLink);
	// preload and create close button imagevar imgPreloadCloseButton = new Image();
	// if close button image found,imgPreloadCloseButton.onload=function(){
	//var objCloseButtonDIV=document.createElement("div");
	//objCloseButtonDIV.setAttribute('id','closeButton');
	//objCloseButtonDIV.innerHTML='';
	var objCloseButton = document.createElement("img");
	objCloseButton.src = closeButton;
	objCloseButton.setAttribute('id','closeButton');
	objCloseButton.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/close.png',sizingmethod=scale);
	"objCloseButton.style.position = 'absolute';
	objCloseButton.style.zIndex = '200';
	//objCloseButtonDIV.appendChild(objCloseButton);
	//alert(objCloseButton.style.filter);
	objLink.appendChild(objCloseButton);
	//return false;
}
imgPreloadCloseButton.src = closeButton;
	// create imagevar objImage = document.createElement("img");
	objImage.setAttribute('id','lightboxImage');
	objLink.appendChild(objImage);
	// create details div,a container for the caption and keyboard messagevar objLightboxDetails = document.createElement("div");
	objLightboxDetails.setAttribute('id','lightboxDetails');
	objLightbox.appendChild(objLightboxDetails);
	// create captionvar objCaption = document.createElement("div");
	objCaption.setAttribute('id','lightboxCaption');
	objCaption.style.display = 'none';
	objLightboxDetails.appendChild(objCaption);
	// create keyboard messagevar objKeyboardMsg = document.createElement("div");
	objKeyboardMsg.setAttribute('id','keyboardMsg');
	objKeyboardMsg.innerHTML = 'press <kbd>x</kbd> to close';
	objLightboxDetails.appendChild(objKeyboardMsg);
}
//// addLoadEvent()// Adds event to window.onload without overwriting currently assigned onload functions.// Function found at Simon Willison's weblog - http://simon.incutio.com///function addLoadEvent(func){
	var oldonload = window.onload;
	if (typeof window.onload != 'function'){
	window.onload = func;
}
else{
	window.onload = function(){
	oldonload();
	func();
}
}
}
addLoadEvent(initLightbox);
	// run initLightbox onLoad

CSS代码(lightbox.css):

#lightbox{background-color:#fff;padding:0px;}
#picboder{border:#f4f4f4 6px solid;}
#lightboxDetails{font-size:0.8em;padding-top:0.4em;}
#lightboxCaption{float:left;}
#keyboardMsg{float:right;}
#closeButton{top:0px;right:0px;}
#lightbox img{border:none;clear:both;}
#overlay img{border:none;}
#overlay{background-color:#333;}
* html #overlay{background-color:transparent;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/overlay.png",sizingMethod="scale");}

附件:下载该文件资源,减少时间成本(增值服务)