diff --git a/js/custom.js b/js/custom.js index 557dd46..6417523 100644 --- a/js/custom.js +++ b/js/custom.js @@ -1,19 +1,71 @@ // Some quick scripting to select a random background on page load const BACKGROUND_IMAGES = [ - "https://cdn.enp.one/img/backgrounds/cl-photo-allis.jpg", - "https://cdn.enp.one/img/backgrounds/cl-photo-boston.jpg", - "https://cdn.enp.one/img/backgrounds/cl-photo-denver.jpg", - "https://cdn.enp.one/img/backgrounds/cl-photo-geese.jpg", - "https://cdn.enp.one/img/backgrounds/cl-photo-hotel.jpg", - "https://cdn.enp.one/img/backgrounds/cl-photo-lawrencedam.jpg", - "https://cdn.enp.one/img/backgrounds/cl-photo-letchworth.jpg", - "https://cdn.enp.one/img/backgrounds/cl-photo-library.jpg", - "https://cdn.enp.one/img/backgrounds/cl-photo-lighthouse.jpg", - "https://cdn.enp.one/img/backgrounds/cl-photo-mbta.jpg", - "https://cdn.enp.one/img/backgrounds/cl-photo-rockyshore.jpg", - "https://cdn.enp.one/img/backgrounds/cl-photo-rt112.jpg", - "https://cdn.enp.one/img/backgrounds/cl-photo-startrek.jpg", + { + url: "https://cdn.enp.one/img/backgrounds/cl-photo-allis.jpg", + description: "Allis Engine #4, Metropolitan Waterworks Museum", + source: "" + }, + { + url: "https://cdn.enp.one/img/backgrounds/cl-photo-boston.jpg", + description: "Charles River Basin and Skyline", + source: "" + }, + { + url: "https://cdn.enp.one/img/backgrounds/cl-photo-denver.jpg", + description: "Mile-High City Skyline", + source: "" + }, + { + url: "https://cdn.enp.one/img/backgrounds/cl-photo-geese.jpg", + description: "Geese and Goslings on the banks of the Charles River", + source: "" + }, + { + url: "https://cdn.enp.one/img/backgrounds/cl-photo-hotel.jpg", + description: "Bay Point Hotel, Lake Winnipesaukee", + source: "" + }, + { + url: "https://cdn.enp.one/img/backgrounds/cl-photo-lawrencedam.jpg", + description: "Hydroelectric Dam on the St. Lawrence River", + source: "" + }, + { + url: "https://cdn.enp.one/img/backgrounds/cl-photo-letchworth.jpg", + description: "The Middle Falls in Letchworth State Park", + source: "" + }, + { + url: "https://cdn.enp.one/img/backgrounds/cl-photo-library.jpg", + description: "Robert W. Woodruff Library at Emory University", + source: "" + }, + { + url: "https://cdn.enp.one/img/backgrounds/cl-photo-lighthouse.jpg", + description: "Nubble Lighthouse", + source: "" + }, + { + url: "https://cdn.enp.one/img/backgrounds/cl-photo-mbta.jpg", + description: "Old vs New MBTA Green Line", + source: "" + }, + { + url: "https://cdn.enp.one/img/backgrounds/cl-photo-rockyshore.jpg", + description: "Icy Stormy Shoreline at Brenton Point", + source: "" + }, + { + url: "https://cdn.enp.one/img/backgrounds/cl-photo-rt112.jpg", + description: "Northern end of the Route 112 Scenic Byway", + source: "" + }, + { + url: "https://cdn.enp.one/img/backgrounds/cl-photo-startrek.jpg", + description: "Enterprise Engineering Systems at the Star Trek Set Museum", + source: "" + } ]; @@ -21,13 +73,23 @@ function selectBackground() { let max = BACKGROUND_IMAGES.length - 1 let min = 0; index = Math.round(Math.random() * (max - min) + min); - console.log("Loading background #" + index + ": " + BACKGROUND_IMAGES[index]); + console.log("Loading background #" + index + ": " + BACKGROUND_IMAGES[index].url); return BACKGROUND_IMAGES[index]; } function setBackground() { + let selected = selectBackground() + document.getElementById( "background-image" - ).style.backgroundImage = "url(" + selectBackground() + ")"; + ).style.backgroundImage = "url(" + selected.url + ")"; + + document.getElementById( + "background-info-link" + ).innerHTML = selected.description; + + document.getElementById( + "background-info-link" + ).href = selected.source; }