Difference between revisions of "Template:NTNU Trondheim/JS/picture field resize"

Line 1: Line 1:
−
var pricture_field_resize = function () {
+
var slideIndex = 1;
−
    var div = $('#picture_field');
+
var Carousel_timer;
−
    var width = div.width();
+
−
    div.css('height', width * 0.5);
+
−
    $(".break_header").css("top",(-width * 0.05)+27);
+
−
    $("#menu").css("width", width);
+
−
};
+
  
−
//Call on window resize and document startup
+
function plusDivs(n) {
−
window.onresize = pricture_field_resize;
+
    showDivs(slideIndex += n);
−
$(pricture_field_resize);
+
}
 +
 
 +
function changeToDiv(n) {
 +
    showDivs(slideIndex = n);
 +
}
 +
 
 +
function showDivs(n) {
 +
    var i;
 +
    var active;
 +
    var x = document.getElementsByClassName("slideshow_picture");
 +
    var dots = document.getElementsByClassName("dot");
 +
    if (n > x.length) {slideIndex = 1}
 +
    if (n < 1) {slideIndex = x.length}
 +
    for (i = 0; i < x.length; i++) {
 +
        if (x[i].style.display === "inline"){
 +
            active = x[i];
 +
        }
 +
    }
 +
    for (i = 0; i < dots.length; i++) {
 +
        dots[i].className = dots[i].className.replace(" current_dot", "");
 +
    }
 +
    $(active).fadeOut(500, function () {
 +
        $(x[slideIndex-1]).fadeIn(500);
 +
    });
 +
    dots[slideIndex-1].className += " current_dot";
 +
    clearTimeout(Carousel_timer);
 +
    Carousel_timer = setTimeout(carousel, 10000); // wait 10 seconds for next automatic image change
 +
}
 +
 
 +
function carousel() { //Is called to change pictures automatically
 +
    plusDivs(1);
 +
}
 +
 
 +
$(document).ready(function () {
 +
    document.getElementsByClassName("slideshow_picture")[0].style.display = "inline";
 +
    showDivs(slideIndex);
 +
});

Revision as of 16:02, 30 June 2017

var slideIndex = 1; var Carousel_timer;

function plusDivs(n) { 

   showDivs(slideIndex += n);

}

function changeToDiv(n) { 

   showDivs(slideIndex = n);

}

function showDivs(n) { 

   var i;
   var active;
   var x = document.getElementsByClassName("slideshow_picture");
   var dots = document.getElementsByClassName("dot");
   if (n > x.length) {slideIndex = 1}
   if (n < 1) {slideIndex = x.length}
   for (i = 0; i < x.length; i++) {
       if (x[i].style.display === "inline"){
           active = x[i];
       }
   }
   for (i = 0; i < dots.length; i++) {
       dots[i].className = dots[i].className.replace(" current_dot", "");
   }
   $(active).fadeOut(500, function () {
       $(x[slideIndex-1]).fadeIn(500);
   });
   dots[slideIndex-1].className += " current_dot";
   clearTimeout(Carousel_timer);
   Carousel_timer = setTimeout(carousel, 10000); // wait 10 seconds for next automatic image change

}

function carousel() { //Is called to change pictures automatically 

   plusDivs(1);

}

$(document).ready(function () { 

   document.getElementsByClassName("slideshow_picture")[0].style.display = "inline";
   showDivs(slideIndex);

});