Featured ProjectsDOJ Webmaster2026-01-27T11:38:33-07:00
Featured Projects
Upper Blackfoot River Restoration
NRDP Timelapse Photo Browser
//caption for each site, list of image indexes, references imageData[][]
const siteData = [
["Blackfoot River (looking at Shaue confluence)",0,1,2],
["Upper Mike Horse Creek (looking downstream)",3,4,5,6,7],
["Upper Beartrap Creek (looking downstream)",8,9,10],
["Lower Beartrap Creek (looking upstream)",11,12,13]
// ["Infrared Imagery (changes in vegetation and soil)",14,15,16]
];
//base upload path for all images
const filePath = "https://dojmt.gov/wp-content/uploads/CustomWebApps/NRDP/MHPhotoViewer/images/";
//image captions and URL for all timelapse images
const imageData = [
["2020 October",filePath+"blackfoot_Set4_1.jpg"],
["2021 September",filePath+"blackfoot_Set4_2.jpg"],
["2022 August",filePath+"blackfoot_Set4_3.jpg"],
["2016 November",filePath+"blackfoot_Set1_1.jpg"],
["2017 September",filePath+"blackfoot_Set1_2.jpg"],
["2018 June",filePath+"blackfoot_Set1_3.jpg"],
["2019 October",filePath+"blackfoot_Set1_4.jpg"],
["2020 September",filePath+"blackfoot_Set1_5.jpg"],
["2019 October",filePath+"blackfoot_Set2_1.jpg"],
["2020 September",filePath+"blackfoot_Set2_2.jpg"],
["2022 August",filePath+"blackfoot_Set2_3.jpg"],
["2019 October",filePath+"blackfoot_Set3_1.jpg"],
["2020 September",filePath+"blackfoot_Set3_2.jpg"],
["2021 September",filePath+"blackfoot_Set3_3.jpg"],
// ["2009 NIAP Arial Imagery",filePath+"MikeHorseIR_2009.jpg"],
// ["2015 NIAP Arial Imagery",filePath+"MikeHorseIR_2015.jpg"],
// ["2023 NIAP Arial Imagery",filePath+"MikeHorseIR_2023.jpg"]
];
Title Text
Caption
//Custom Javascript code
let siteIndex = -1;
const siteImages = [];
//-1 is home
//curr & prev image are index of siteImages[][] , not ImageData[][]
let currImage = 0;
let prevImage = 0;
//image object, holds next image
let preloadImage;
//index of siteImages[][]
let preloadIndex;
//used to track state of overlay fade in / out
let overlayVisible = false;
const blackScreenSrc = filePath+ "blackScreen.jpg";
//HTML elements
const overlayImage = document.getElementById("overlay-image");
const baseImage = document.getElementById("base-image");
const captionText = document.getElementById("caption-text");
const headerText = document.getElementById("header-text");
const nextButton = document.getElementById("next-button");
const prevButton = document.getElementById("prev-button");
const homeButton = document.getElementById("home-button");
const playPauseButton = document.getElementById("play-pause-button");
//array of all circle buttons
const circleButtons = document.getElementsByClassName("circleButton");
//variable for timer
let autoPlay;
//bool for button state
let playSlides = true;
// captionText.innerText = imageData[currImage][1];
// bottomDisplayImage.src = imageData[prevImage][0];
GoToHome();
//Initialize / Reload Homescreen
function GoToHome()
{
//stop autoplay timer
clearInterval(autoPlay);
siteIndex = -1;
//reset overlay image to blank
overlayImage.src = "";
overlayImage.className = "fadeOut";
baseImage.src = filePath+"MikeHorseMap3D.jpg";
headerText.innerHTML = "Mike Horse Dam Restoration Site"
captionText.innerHTML = "Click on a location to see restoration images";
nextButton.style.visibility = "hidden";
prevButton.style.visibility = "hidden";
homeButton.style.visibility = "hidden";
playPauseButton.style.visibility = "hidden";
//show all circle buttons
for(var i=0; i";
nextButton.style.visibility = "visible";
prevButton.style.visibility = "visible";
homeButton.style.visibility = "visible";
playPauseButton.style.visibility = "visible";
playPauseButton.innerHTML = '';
//preload next image
PreloadImage(true);
}
//update images based on overlay state (prev / curr alternates between base and overlay)
function ChangeImage()
{
//get indexes of images in imageData[]
const currIndex = siteImages[currImage];
const prevIndex = siteImages[prevImage];
//fade top image out
if(overlayVisible)
{
overlayImage.src = imageData[prevIndex][1];
baseImage.src = imageData[currIndex][1];
overlayVisible = false;
}
else
{
overlayImage.src = imageData[currIndex][1];
baseImage.src = imageData[prevIndex][1];
overlayVisible = true;
}
overlayImage.classList.toggle("fadeIn");
overlayImage.classList.toggle("fadeOut");
captionText.innerHTML ="" + imageData[currIndex][0] +"";
prevImage = currImage;
}
//Play pause Button Toggle
function TogglePlayPause()
{
if(playSlides){
//stop timer
clearInterval(autoPlay);
playSlides = false;
playPauseButton.innerHTML = '';
}
else {
//restart timer
autoPlay= window.setInterval(NextImage, 3000);
playSlides = true;
playPauseButton.innerHTML = '';
}
}
//force pasue auto play, called when next / prev buttons are clicked
function PauseAutoSides()
{
clearInterval(autoPlay);
playSlides = false;
playPauseButton.innerHTML = '';
}
function NextImageButton()
{
PauseAutoSides();
NextImage();
}
function NextImage()
{
currImage++;
if(currImage>=siteImages.length){
currImage = 0;
}
ChangeImage();
//pre load next image
PreloadImage(true);
}
function PrevImageButton()
{
PauseAutoSides();
PrevImage();
}
function PrevImage()
{
currImage--;
if(currImage=siteImages.length)
preloadIndex=0;
}
//prev button clicked, preload previous image in sequence
else
{
preloadIndex = currImage-1;
if(preloadIndex<0)
preloadIndex=siteImages.length-1;
}
preloadImage = new Image();
//image URL is in imageData[][] index from siteImages[][]
preloadImage.src = imageData[siteImages[preloadIndex]][1];
// console.log("curr Image: " + siteImages[currImage] + " pre loading image index: " +siteImages[preloadIndex]);
}
NRDP worked with DEQ and the US Forest Service (USFS) to remediate and restore the Upper Blackfoot Mining Complex, a historic mining district at the headwaters of the Upper Blackfoot River. In 1975, a failure of the Mike Horse Dam released an estimated 100,000 tons of mining tailings and other materials into the Upper Blackfoot River and Beartrap Creek. Between 2015 and 2020, NRDP, DEQ, and USFS removed the Mike Horse Dam and the tailings and waste from the floodplain of the Upper Blackfoot and its tributaries (Beartrap Creek and Mike Horse Creek). The stream channels were then rebuilt and the floodplain restored and revegetated. These photo points show progress of the restored channels and floodplains on Upper Mike Horse Creek, Upper Beartrap Creek, Lower Beartrap Creek, and the Upper Blackfoot River from when remediation/restoration on each reach was completed up through 2022.