图片库js代码改进

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)?false:true;
        }
    }
}
function preparePlaceholder(){
    if (!document.createElement)return false;
    if (!document.createTextNode)return false;
    if(!document.getElementById)return false;
    if(!document.getElementById("imagegallery"))return false;
    var placeholder=document.createElement("img");
    placeholder.setAttribute("id","placeholder");
    placeholder.setAttribute("src","images/blank.jpg");
    placeholder.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(placeholder,gallery);
    insertAfter(description,placeholder);
}
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.firstChild.nodeType==3) {
                description.firstChild.nodeValue=text;
            }
        }
        return true;
    }
function addLoadEvent (func) {
    var oldload=window.onload;
    if (typeof window.onload !="function") {
        window.onload=func;
    }else{
        window.onload=function(){
            oldload();
            func();
        }
    }
}
function insertAfter(newElement,targetElement){
    var parent=targetElement.parentNode;
    if (parent.lastChild==targetElement) {
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);

将初始图片和说明文字动态添加进去

自定义insertAfter()以及addLoadEvent (),这两个方法可通用。

你可能感兴趣的:(图片库js代码改进)