Add description for autocycling background images
This commit is contained in:
parent
2842ef40bf
commit
a867b60515
92
js/custom.js
92
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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user