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
};