Created
September 25, 2012 00:09
-
-
Save roberocity/3779214 to your computer and use it in GitHub Desktop.
Photo Gallery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Image Gallery</title> | |
| <style> | |
| body { | |
| font-family: "Helvetica", "Arial", serif; | |
| color: #333; | |
| background-color: #ccc; | |
| margin: 1em 10%; | |
| } | |
| h1 { | |
| color: #333; | |
| background-color: transparent; | |
| } | |
| a { | |
| color: #c60; | |
| background-color: transparent; | |
| font-weight: bold; | |
| text-decoration: none; | |
| } | |
| ul { | |
| padding: 0; | |
| } | |
| li { | |
| float: left; | |
| padding: 1em; | |
| list-style: none; | |
| } | |
| img { | |
| display: block; | |
| clear: both; | |
| } | |
| #imagegallery { | |
| list-style: none; | |
| } | |
| #imagegallery li{ | |
| display: inline; | |
| } | |
| #imagegallery li a img{ | |
| border: 0; | |
| width: 150px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Snapshots</h1> | |
| <ul id="imagegallery"> | |
| <li> | |
| <a href="images/honeymoon1.jpg" title="Honeymoon Pool">Honeymoon Pool | |
| <img src="images/honeymoon1.jpg" alt="Honeymoon Pool" /> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="images/honeymoon2.jpg" title="Honeymoon Dinner">Honeymoon Dinner | |
| <img src="images/honeymoon2.jpg" alt="Honeymoon Dinner" /> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="images/leave1.jpg" title="At the Airport">At the Airport | |
| <img src="images/leave1.jpg" alt="At the Airport" /> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="images/leave2.jpg" title="Leave Dinner">Leave | |
| <img src="images/leave2.jpg" alt="Leave Dinner" /> | |
| </a> | |
| </li> | |
| </ul> | |
| <script type="text/javascript" src="scripts/showPic2.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function addLoadEvent(func) { | |
| var oldonload = window.onload; | |
| if (typeof window.onload != 'function') { | |
| window.onload = func; | |
| } else { | |
| window.onload = function() { | |
| oldonload(); | |
| func(); | |
| } | |
| } | |
| } | |
| function insertAfter(newElement,targetElement) { | |
| var parent = targetElement.parentNode; | |
| if (parent.lastChild == targetElement) { | |
| parent.appendChild(newElement); | |
| } else { | |
| parent.insertBefore(newElement,targetElement.nextSibling); | |
| } | |
| } | |
| 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/placeholder.gif"); | |
| 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 prepareGallery() { | |
| if (!document.getElementsByTagName) return false; | |
| if (!document.getElementById) 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); | |
| } | |
| links[i].onkeypress = links[i].onclick; | |
| } | |
| } | |
| function showPic(whichpic) { | |
| if (!document.getElementById("placeholder")) return true; | |
| var source = whichpic.getAttribute("href"); | |
| var placeholder = document.getElementById("placeholder"); | |
| placeholder.setAttribute("src",source); | |
| if (!document.getElementById("description")) return false; | |
| if (whichpic.getAttribute("title")) { | |
| var text = whichpic.getAttribute("title"); | |
| } else { | |
| var text = ""; | |
| } | |
| var description = document.getElementById("description"); | |
| if (description.firstChild.nodeType == 3) { | |
| description.firstChild.nodeValue = text; | |
| } | |
| return false; | |
| } | |
| addLoadEvent(preparePlaceholder); | |
| addLoadEvent(prepareGallery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function addLoadEvent(func) { | |
| var oldonload = window.onload; | |
| if (typeof window.onload != 'function') { | |
| window.onload = func; | |
| } else { | |
| window.onload = function(){ | |
| oldonload(); | |
| func(); | |
| } | |
| } | |
| } | |
| function insertAfter (newElement,targetElement) { | |
| var parent = targetElement.parentNode; | |
| if (parent.lastChild == targetElement) { | |
| parent.appendChild(newElement); | |
| } else { | |
| parent.insertBefore(newElement,targetElement.nextSibling); | |
| } | |
| } | |
| 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/placeholder.gif"); | |
| 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 prepareGallery(){ | |
| if (!document.getElementsByTagName) return false; | |
| if (!document.getElementById) 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 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"); | |
| description.firstChild.nodeValue = text; | |
| } | |
| return true; | |
| } | |
| addLoadEvent(preparePlaceholder); | |
| addLoadEvent(prepareGallery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment