No edit summary |
No edit summary |
||
Line 13: | Line 13: | ||
} | } | ||
function setMainImage(imageHtml) { | |||
var mainImageDiv = document.querySelector('.mainImage'); | |||
mainImageDiv.innerHTML = imageHtml; | |||
} | |||
function addClickEventToImages() { | |||
var images = document.querySelectorAll('.carousel .dpImage'); | |||
images.forEach(function(image, index) { | |||
image.addEventListener('click', function() { | |||
setMainImage(this.innerHTML); | |||
currentIndex = index; // Update the current index | |||
}); | |||
}); | |||
} | |||
var currentIndex = 0; | |||
function rotateImages() { | function rotateImages() { | ||
var images = document.querySelectorAll('.carousel .dpImage'); | var images = document.querySelectorAll('.carousel .dpImage'); | ||
setInterval(function() { | setInterval(function() { | ||
Line 23: | Line 37: | ||
} | } | ||
setMainImage(images[currentIndex].innerHTML); | |||
currentIndex++; | currentIndex++; | ||
}, 10000); // Rotates every 10000 milliseconds (10 seconds) | }, 10000); // Rotates every 10000 milliseconds (10 seconds) | ||
} | } | ||
// Call the | // Call the functions when the window loads | ||
window.onload = rotateImages; | window.onload = function() { | ||
addClickEventToImages(); | |||
rotateImages(); | |||
setMainImage(document.querySelector('.carousel .dpImage').innerHTML); // Set the first image as the default | |||
}; |
Revision as of 13:57, 31 January 2024
/* Any JavaScript here will be loaded for all users on every page load. */ var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; $(content).toggle('fast'); }); } function setMainImage(imageHtml) { var mainImageDiv = document.querySelector('.mainImage'); mainImageDiv.innerHTML = imageHtml; } function addClickEventToImages() { var images = document.querySelectorAll('.carousel .dpImage'); images.forEach(function(image, index) { image.addEventListener('click', function() { setMainImage(this.innerHTML); currentIndex = index; // Update the current index }); }); } var currentIndex = 0; function rotateImages() { var images = document.querySelectorAll('.carousel .dpImage'); setInterval(function() { if (currentIndex >= images.length) { currentIndex = 0; } setMainImage(images[currentIndex].innerHTML); currentIndex++; }, 10000); // Rotates every 10000 milliseconds (10 seconds) } // Call the functions when the window loads window.onload = function() { addClickEventToImages(); rotateImages(); setMainImage(document.querySelector('.carousel .dpImage').innerHTML); // Set the first image as the default };