Full Gallery JS Tutorial


/ Published in: JavaScript
Save to your folder(s)

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)


Copy this code and paste it in your HTML
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.