webslider = { // variabele voor de slider aanmaken ThisSlider: null, // variabele waarin de stand van de slider staat als waarde van 0 tot 1 slider_value: 0, // variabele aanmaken voor animatie interval slider_animation: false, // variabele die aangeeft of de slider in beweging is slider_active: false, // functie: init slidebar init: function(setup) { // variabelen opvragen this.slider_quicklinks = setup.slider_quicklinks; this.slider_start = Math.abs(setup.slider_start); //Math.round(); this.slider_speed = Math.abs(setup.slider_speed); this.slider_step = Math.abs(setup.slider_step); this.content_height = setup.content_height; // startplaats van de website controleren if (this.slider_start + 1 > this.slider_quicklinks.length) { this.slider_start = this.slider_quicklinks.length - 1; } else if (this.slider_start < 0) { this.slider_start = 0; } // id's opvragen this.ID_slider_container = setup.ID_slider_container; this.ID_slider_content = setup.ID_slider_content; this.ID_slider_handle = setup.ID_slider_handle; this.ID_slider_track = setup.ID_slider_track; this.ID_navigation = setup.ID_navigation; this.ID_nav_left = setup.ID_nav_left; this.ID_nav_right = setup.ID_nav_right; // hoogte van de slider_content toepassen $(this.ID_slider_content).style.height = this.content_height + "px"; // style van de slider_container aanpassen $(this.ID_slider_container).style.overflow = "hidden"; // hogte van de slider_container opvragen this.container_height = $(this.ID_slider_container).getHeight(); // offset_hoogte van de slider_content bepalen this.content_offset_height = -1 * (this.content_height - this.container_height); // value van Quicklinks bepalen webslider.setQuicklinksValue(); // hoogte van de navigatie opvragen this.navigation_height = $(webslider.ID_navigation).getHeight(); // this_slider activeren this.ThisSlider = new Control.Slider(this.ID_slider_handle, this.ID_slider_track, { axis:'horizontal' }); // slider starten webslider.AnimateSlide(this.slider_quicklinks[this.slider_start].value); // // observeer nav_left; SlideLeft on mousedown // Event.observe(this.ID_nav_left, 'mouseover', function() { webslider.SlideLeft(); }); // // observeer nav_right; SlideRight on mousedown // Event.observe(this.ID_nav_right, 'mouseover', function() { webslider.SlideRight(); }); // observeer window; rescale bij resizen van window Event.observe(window, 'resize', function() { webslider.ScaleSlider(); }); // { webslider.GetWindowWidth(); }); }, // functie: sla de value behorend bij de slider_quicklinks op a.h.v. breedte/offset setQuicklinksValue: function() { var quick_counter = 0; webslider.slider_quicklinks.each(function(ql) { // quick_value berekenen a.h.v. pixel var quick_value = webslider.getNewValue(ql.pixel); // quick_value opslaan webslider.slider_quicklinks[quick_counter].value = quick_value; // quick_counter+1 quick_counter++; }); }, // functie: herschaal de slider en verplaats hem naar zelfde positie ScaleSlider: function() { // window_height bepalen var window_height; // standard browsers (mozilla/netscape/opera/IE7) if (typeof window.innerHeight != 'undefined') { window_height = window.innerHeight; } // IE6 in standards compliant mode else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientHeight != 'undefined' && document.documentElement.clientHeight != 0) { window_height = document.documentElement.clientHeight; } // older versions of IE else { window_height = document.getElementsByTagName('body')[0].clientHeight; } // tmp_pixel opslaan var tmp_pixel = (webslider.slider_value * Math.abs(webslider.content_offset_height)) + (0.5 * webslider.container_height); // hoogte van de slider_container opnieuw opvragen webslider.container_height = $(webslider.ID_slider_container).getHeight(); // offset_height van de slider_content opnieuw bepalen webslider.content_offset_height = -1 * (webslider.content_height - webslider.container_height); // slider_value opnieuw berekenen if (webslider.slider_value > 0 && webslider.slider_value < 1) { webslider.slider_value = webslider.getNewValue(tmp_pixel); } // beweeg naar juiste positie webslider.AnimateSlide(webslider.slider_value); // value van Quicklinks opnieuw bepalen webslider.setQuicklinksValue(); window.resizeTo(640,760); }, // functie: slider verplaatsen aan de hand van waarde 0 tot 1 AnimateSlide: function(slide_to) { // indien SlideTo te groot; SlideTo = 1 if (slide_to > 1) slide_to = 1; // indien SlideTo te klein; SlideTo = 0 if (slide_to < 0) slide_to = 0; // eindpunt van de slider opslaan als waarde van 0 tot 1 webslider.slider_value = slide_to; // eindpunt van de slider content opslaan als waarde omgerekend naar .style.top var content_target = Math.round(webslider.content_offset_height * slide_to); // reset vorige verplaatsing window.clearInterval(webslider.slider_animation); // invoeren dat de slider in beweging is webslider.slider_active = true; // laat de slider verplaatsen webslider.slider_animation = window.setInterval(function() { // huidige content positie opvragen als .style.top var content_top = parseInt($(webslider.ID_slider_content).getStyle('top')) || 0; // nieuwe content positie berekenen als .style.top var content_top_new = webslider.getNewPosition(content_top, content_target); // slider content verplaatsen $(webslider.ID_slider_content).style.top = content_top_new + "px"; if (content_top_new == content_target) { // reset verplaatsing window.clearInterval(webslider.slider_animation); // invoeren dat de slider niet in beweging is webslider.slider_active = false; } }, 30); // navigatie naar het midden verplaatsen $(webslider.ID_navigation).style.top = ((-1 * webslider.content_offset_height * slide_to) + (webslider.container_height * 0.5) - (webslider.navigation_height * 0.5)) + "px"; }, // functie: slide naar links SlideLeft: function() { webslider.AnimateSlide(webslider.slider_value - webslider.slider_step); }, // functie: slide naar rechts SlideRight: function() { webslider.AnimateSlide(webslider.slider_value + webslider.slider_step); }, // new_value berekenen a.h.v. pixel getNewValue: function(pixel) { // new_value bepalen var new_value; // new_value = 0 indien kleiner dan helft v.d. container_height if (pixel <= (0.5 * webslider.container_height)) { new_value = 0; } // new_value = 1 indien groter dan offset else if (pixel >= (Math.abs(webslider.content_offset_height) + (0.5 * webslider.container_height))) { new_value = 1; } // bereken quick_value else { new_value = Math.round((pixel - (0.5 * webslider.container_height)) / Math.abs(webslider.content_offset_height) * 1000) / 1000; } return new_value; }, // PixelSlide: function(pixel) { var link_value = webslider.getNewValue(pixel); webslider.AnimateSlide(link_value); }, // functie: nieuwe positie berekenen aan de hand van vertrek- en eindpunt getNewPosition: function(slide_from, slide_to) { // SlideTo geven indien verschil tussen SlideFrom en SlideTo kleiner is dan 4 if (Math.abs(slide_from - slide_to) < 4) return slide_to; // waarde berekenen die verschoven moet worden else return slide_from - Math.floor((slide_from - slide_to) * webslider.slider_speed); } };