В следующем коде мои попытки по созданию на лету держателя preparePlace не увенчались успехом, и единственная ошибка - «родитель не определен» из консоли ошибок.
Я модифицирую этот пример для использования с литералом объекта JS и могу использовать мудрость мудрости StackOverflow.
TIA
imageGallery={
// IDs
placeHolderID:'placeholder',
imageNavListID:'imagegallerylist',
// CSS Classes
init:function(){
if(!document.getElementById || !document.createTextNode){return;}
imageGallery.preparePlaceholder();// Call to preparePlacholder
// Prepare Gallery:
imageGallery.navList = document.getElementById(imageGallery.imageNavListID);
if(!imageGallery.navList){return;}
var links = imageGallery.navList.getElementsByTagName('a');
for(var i = 0; i<links.length;i++){
links[i].onclick = function(){
// Call to showPic function:
return imageGallery.showPic(this) ? false : true;
}
}
},
showPic:function(whichpic){
imageGallery.pHolder=document.getElementById(imageGallery.placeHolderID);
if(!imageGallery.pHolder || imageGallery.pHolder.nodeName != "IMG"){return;}
var source = whichpic.getAttribute("href");
imageGallery.pHolder.setAttribute("src",source);
if(document.getElementById("description")){
// var text = whichpic.getAttribute("title");
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
var description = document.getElementById("description");
if(description.firstChild.nodeType == 3){
description.firstChild.nodeValue = text;
}
}
return true;
},
preparePlaceholder:function(){
var placeholder = document.createElement("img");
placeholder.setAttribute("id", "placeholder");
placeholder.setAttribute("src","images/placeholder.gif");
placeholder.setAttribute("alt","My Image Gallery");
// alert(placeholder);
var description = document.createElement("p");
description.setAttribute("id","description");
var desctext = document.createTextNode("Choose an Image");
description.appendChild(desctext);
var gallery = document.getElementById("imageGallery");
imageGallery.insertAfter(placeholder,imageGallery);
imageGallery.insertAfter(description,imageGallery.placeholder);
// alert("Function Called");
},
// Utility Functions
insertAfter:function(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
},
addLoadEvent:function(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
}
// End Utility Functions
imageGallery.addLoadEvent(imageGallery.init);
// window.onload=imageGallery.init;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="uft-8" />
<title>Image Gallery</title>
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" title="layout" charset="utf-8" />
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallerylist">
<!--Links Here-->
</ul>
<script src="scripts/imageGallery.js"></script>
</body>
</html>