Posted By

1man on 02/03/07


Tagged

DOM gallery tutorial


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

adix
shachi
vali29
igor822


Full Gallery JS Tutorial


 / Published in: JavaScript
 

Not really relevant to anybody else. Full unobtrusive js file for a simple gallery. From DOM Scripting by Jeremy Keith (superb book, highly recommend it for anyone looking to move into DOM scripting)

  1. //This function allows you to queue up functions to be executed.
  2. function addLoadEvent(func) {
  3. var oldonload = window.onload;
  4. if (typeof window.onload != 'function') {
  5. window.onload = func;
  6. } else {
  7. window.onload = function() {
  8. oldonload();
  9. func();
  10. }
  11. }
  12. }
  13. //create function, it expects 2 values.
  14. function insertAfter(newElement,targetElement) {
  15. //target is what you want it to go after. Look for this elements parent.
  16. var parent = targetElement.parentNode;
  17.  
  18. //if the parents lastchild is the targetElement...
  19. if(parent.lastchild == targetElement) {
  20. //add the newElement after the target element.
  21. parent.appendChild(newElement);
  22. } else {
  23. // else the target has siblings, insert the new element between the target and it's next sibling.
  24. //syntax for insertBefore: parentElement.insertBefore(newElement, targetElement);
  25. parent.insertBefore(newElement, targetElement.nextSibling);
  26. }
  27. }
  28.  
  29. function preparePlaceholder() {
  30. //checks to make the script degrade if methods not supported.
  31. if(!document.createElement) return false;
  32. if(!document.createTextNode) return false;
  33. if(!document.getElementById) return false;
  34. if(!document.getElementById("list")) return false;
  35.  
  36. var imageElement = document.createElement("img");
  37. imageElement.setAttribute("src","images/placeholder.jpg");
  38. imageElement.setAttribute("id", "placeholder");
  39. imageElement.setAttribute("alt", "Placeholder image");
  40.  
  41. var descriptionPara = document.createElement("p");
  42. descriptionPara.setAttribute("id", "description");
  43. var desText = document.createTextNode("This is a description.");
  44. descriptionPara.appendChild(desText);
  45.  
  46. //uses the insertAfter function above.
  47. var gallery = document.getElementById("list");//grab the ul list.
  48. insertAfter(imageElement,gallery);//insert the placeholder AFTER the list.
  49. insertAfter(descriptionPara, imageElement);//insert the description AFTER the placeholder image.
  50. }
  51.  
  52. function applyEvent() {
  53. //Browser check to see if they are supported.
  54. if(!document.getElementById || !document.getElementsByTagName) return false;
  55. //Check to see that the elements exist.
  56. if (!document.getElementById("list")) return false;
  57. var list = document.getElementById("list");
  58. if (!list.getElementsByTagName("a")) return false;
  59. var links = list.getElementsByTagName("a");
  60. for (i=0; i < links.length; i++) {
  61. links[i].onclick = function() {
  62. return swapImg(this);
  63. }
  64. }
  65. function swapImg(selectedLink) {
  66. var source = selectedLink.getAttribute("href");//or selectedLink.href
  67. //if placeholder doesn't exist(no image on page), return true so the link clicks through.
  68. if (!document.getElementById("placeholder")) return true;
  69. //what if the id placeholder isn't on an image, make the link follow through.
  70. if (document.getElementById("placeholder").nodeName != "IMG") return true;
  71. var placeHolder = document.getElementById("placeholder");
  72. placeHolder.setAttribute("src", source);//or placeHolder.src = source.
  73.  
  74. if (!document.getElementById("description")) return false;
  75. var description = document.getElementById("description");
  76. //if the link has a title, grab it, else set the variable to nothing.
  77. //variable = condition ? if true : if false; Ternary operator.
  78. var grabTitle = selectedLink.getAttribute("title") ? selectedLink.getAttribute("title") : " ";//or var grabTitle = selectedLink.title ? selectedLink.title : " ";
  79. //if the description firstchild is a text node, allow it to set the variable.
  80. if(description.firstChild.nodeType == 3) {
  81. description.firstChild.nodeValue = grabTitle;
  82. }
  83. //if it gets to here, this will stop the link clicking.
  84. return false;
  85. }
  86. }
  87. addLoadEvent(applyEvent);
  88. addLoadEvent(preparePlaceholder);

Report this snippet  

You need to login to post a comment.