/**
* The class of the image slider.
*
* @version 1.00
* @example:
* oClassSlider = new ClassSlider();
* oClassSlider.slider_set_images('/content_images/portfolio/items/resized/2/bigmac3.jpg');
* oClassSlider.slider_set_images_link('http://www.saillantie.nl');
* oClassSlider.slider_set_id('portfolio_slider');
* oClassSlider.slider_set_effect('horizontal');
* oClassSlider.slider_set_size(200, 555);
* oClassSlider.slider_set_fixedsize(true);
* oClassSlider.slider_set_step(200);
* oClassSlider.slider_set_speed(20);
* oClassSlider.slider_set_speed_play(2000);
* oClassSlider.slider_set_play(false);
* oClassSlider.slider_set_loop(false);
* oClassSlider.slider_set_random(false);
* oClassSlider.slider_set_menu(true);
* oClassSlider.slider_set_image_spacing(5);
* oClassSlider.slider_set_menu_src('/content_images/portfolio/menu_active.png', '/content_images/portfolio/menu_inactive.png');
* oClassSlider.slider_load();
*/
function ClassSlider() {
this.m_aSliderImages = new Array();
this.m_aSliderImagesLinks = new Array();
this.m_aSliderImagesEvents = new Array();
this.m_sSliderID = 'sliders';
this.m_sSliderEffect = 'horizontal'; // horizontal, vertical, fade, instant
this.m_bSliderMenu = true;
this.m_bSliderActive = false;
this.m_iImageActive = 0;
this.m_aImagePreload = new Array();
this.m_aImageSpacing = 0;
this.m_aImageProportions = true; // not implemented!!!
this.m_aImageFixedSize = false;
this.m_bImagesReset = false; // reset the images positions.
// Slide options.
this.m_iSliderHeight = 200; // pixels
this.m_iSliderWidth = 550; // pixels
this.m_iSliderScroll = this.m_iSliderWidth; // pixels
this.m_iSliderSpeed = 20; // milliseconds
this.m_iSliderSpeedPlay = 4000; // milliseconds
this.m_iSliderSpeedFade = 20; // milliseconds for increasing the fade effect.
this.m_iSliderOpacity = 100; // 1-100 opacity.
this.m_iSliderStep = 40; // pixels or opacity
this.m_iSliderStepDecrease = 85; // %
this.m_iSliderStepDecreaseAt = 50; // %
this.m_iSliderPosX = 0; // pixels
this.m_iSliderPosY = 0; // pixels
this.m_iSliderStepCounter = 1;
this.m_iSliderSlides = 1;
this.m_bSliderPlay = false; // play the slider automatically.
this.m_bSliderLoop = false; // play the slider continuously.
this.m_bSliderRandom = false; // play the slider random.
// Set the timeout object. Used for looping the slider.
this.oTimerSlide = null;
// Content image container.
this.m_oSliderContent = null;
// Image objects.
this.m_oSliderObjectMoving = null;
// Menu source images.
this.m_sSliderMenuActiveSrc = '';
this.m_sSliderMenuInactiveSrc = '';
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/**
* Set the images (source) used for the slider.
*
* @param string a_sImageSrc;
*/
function slider_set_images(a_sImageSrc) {
if (a_sImageSrc) {
this.m_aSliderImages.push(a_sImageSrc);
// Preload the images.
this.m_aImagePreload[this.m_aSliderImages.length-1] = new Image()
this.m_aImagePreload[this.m_aSliderImages.length-1].src = a_sImageSrc
}
}
/**
* Set the images link used for in slider.
*
* @param string a_sLink;
*/
function slider_set_images_link(a_sLink) {
this.m_aSliderImagesLinks[this.m_aSliderImages.length-1] = a_sLink;
}
/**
* Set the images event used for in slider.
*
* @param string a_sEventType;
* @param string a_sEvent;
*/
function slider_set_images_event(a_sEventType, a_sEvent) {
if (!this.m_aSliderImagesEvents[a_sEventType]) {
this.m_aSliderImagesEvents[a_sEventType] = new Array();
}
this.m_aSliderImagesEvents[a_sEventType][this.m_aSliderImages.length-1] = a_sEvent;
// this.m_aSliderImagesEvents[a_sEventType].push(a_sEvent);
}
/**
* Returns a random image id.
*
* @return int
*/
function slider_random_image () {
iRandom = Math.floor(Math.random()*this.m_aSliderImages.length);
if (iRandom==this.m_iImageActive) {
if (this.m_aSliderImages[iRandom+1]) {
iRandom++;
} else if (this.m_aSliderImages[iRandom-1]) {
iRandom--;
}
}
return iRandom;
}
/**
* Set the image content ID..
*
* @param string a_sID
*/
function slider_set_id(a_sID) {
this.m_sSliderID = a_sID;
}
/**
* Set the effect type to be used.
* Currently only the slide_left is supported.
*
* @examples: slide_left, slide_right, slide_up, slide_down, slide_fade.
* @param string a_sEffect
*/
function slider_set_effect(a_sEffect) {
this.m_sSliderEffect = a_sEffect;
}
/**
* Set the step size.
* @param int a_iSet
*/
function slider_set_step(a_iSet) {
this.m_iSliderStep = a_iSet;
}
/**
* Set the slider speed to change image.
* @param int a_iSet
*/
function slider_set_speed(a_iSet) {
this.m_iSliderSpeed = a_iSet;
}
/**
* Set the slider speed to play the slider.
* @param int a_iSet
*/
function slider_set_speed_play(a_iSet) {
this.m_iSliderSpeedPlay = a_iSet;
}
/**
* Set the slider to play automatically.
* @param boolean a_bSet
*/
function slider_set_play(a_bSet) {
this.m_bSliderPlay = a_bSet;
}
/**
* Set the slider to play continuously.
* @param boolean a_bSet
*/
function slider_set_loop(a_bSet) {
this.m_bSliderLoop = a_bSet;
}
/**
* Set the slider to play random.
* @param boolean a_bSet
*/
function slider_set_random(a_bSet) {
this.m_bSliderRandom = a_bSet;
}
/**
* Set the slider content height and width.
*
* @param int a_iHeight
* @param int a_iWidth
*/
function slider_set_size(a_iHeight, a_iWidth) {
this.m_iSliderHeight = a_iHeight;
this.m_iSliderWidth = a_iWidth;
}
/**
* Set the slider content to a fixed height and width.
*
* @param boolean a_bFixed
*/
function slider_set_fixedsize(a_bFixed) {
this.m_aImageFixedSize = a_bFixed;
}
/**
* Set the menu active or inactive.
* @param boolean a_bSet
*/
function slider_set_menu(a_bSet) {
this.m_bSliderMenu = a_bSet;
}
/**
* Set the menu link source images.
* @param string a_sActive
* @param string a_sInactive
*/
function slider_set_menu_src(a_sActive, a_sInactive) {
this.m_sSliderMenuActiveSrc = a_sActive;
this.m_sSliderMenuInactiveSrc = a_sInactive;
}
/**
* Set the space between images.
* @param int a_bSet
*/
function slider_set_image_spacing(a_iSet) {
this.m_aImageSpacing = a_iSet;
}
/**
* This function needs to be called to load the slider content element and will set the image in a row.
*/
function slider_load() {
this.m_oSliderContent = document.getElementById(this.m_sSliderID);
// Set required style elements on the content object.
this.m_oSliderContent.style.position = 'relative';
this.m_oSliderContent.style.overflow = 'hidden';
this.m_oSliderContent.style.zIndex = '10';
this.m_oSliderContent.innerHTML = '';
this.m_iSliderScroll += this.m_aImageSpacing*this.m_aSliderImages.length;
// If the image size has to be a fixed height and width (forcing the given height width).
sImageSize = this.m_aImageFixedSize ? 'width="'+this.m_iSliderWidth+'" height="'+this.m_iSliderHeight+'"' : '';
// Set the images in the content according to the slider effect set.
switch (this.m_sSliderEffect) {
case 'horizontal':
case 'instant':
case 'fade':
for (i=0; i'
} else {
this.m_oSliderContent.innerHTML += '
'
}
}
break;
default:
for (i=0; i'
} else {
this.m_oSliderContent.innerHTML += ''
}
}
break;
}
iImageActive = 0;
// Set the random image if random is active.
if (this.m_bSliderRandom) {
iImageActive = this.slider_random_image();
}
if (this.m_bSliderPlay) {
this.slider_slide (iImageActive);
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/**
* This function needs to be called for the slider to change the image.
* The user can not call the slider effect again durring the sliding process.
* The given param has to be the an index value of the image source array.
*
* @param int a_iImageID
*/
function slider_slide (a_iImageID) {
// Check if the image id exits. Else return.
if (a_iImageID=='next') {
if (this.m_bSliderRandom) {
a_iImageID = this.slider_random_image();
} else if (this.m_aSliderImages[this.m_iImageActive+1]) {
a_iImageID = this.m_iImageActive+1;
} else {
if (this.m_bSliderLoop && this.m_bSliderPlay) {
// Reset the slider images.
this.slider_reset_images();
a_iImageID = 0;
} else {
return;
}
}
} else if (a_iImageID=='previous') {
if (this.m_bSliderRandom) {
a_iImageID = this.slider_random_image();
} else if (this.m_aSliderImages[this.m_iImageActive-1]) {
a_iImageID = this.m_iImageActive-1;
} else {
if (this.m_bSliderLoop && this.m_bSliderPlay) {
a_iImageID = 0;
} else {
return;
}
}
} else if (!this.m_aSliderImages[a_iImageID] && a_iImageID) {
return;
} else {
if (a_iImageID != this.m_iImageActive) {
this.m_bSliderPlay = false;
clearTimeout(this.oTimerSlide);
}
}
// If the slider is still active the effect can not be called again.
if (!this.m_bSliderActive) {
if (a_iImageID != this.m_iImageActive) {
// Set the menu link as active and the current active link as inactive.
if (this.m_bSliderMenu) {
oMenuActive = document.getElementById(this.m_sSliderID+'_menu_'+this.m_iImageActive);
oMenuActive.src = this.m_sSliderMenuInactiveSrc;
oMenuActiveNew = document.getElementById(this.m_sSliderID+'_menu_'+a_iImageID);
oMenuActiveNew.src = this.m_sSliderMenuActiveSrc;
}
// Set the slider as currently active. Will be set to inactive once the moving effect is completed.
this.m_bSliderActive = true;
// Check if the image movement has to be from left to the right or the other way around.
if (a_iImageID > this.m_iImageActive) {
this.m_iSliderSlides = !this.m_bImagesReset ? (a_iImageID-this.m_iImageActive) : 1;
this.m_iSliderScroll = (this.m_iSliderSlides)*(this.m_iSliderWidth+(this.m_aImageSpacing*(this.m_iSliderSlides)));
} else if (a_iImageID < this.m_iImageActive) {
this.m_iSliderSlides = !this.m_bImagesReset ? (this.m_iImageActive-a_iImageID) : 1;
this.m_iSliderScroll = (this.m_iSliderSlides)*(this.m_iSliderWidth+(this.m_aImageSpacing*(this.m_iSliderSlides)));
}
// Set the images in the content according to the slider effect set.
switch (this.m_sSliderEffect) {
case 'horizontal':
// Check if the image movement has to be from left to the right or the other way around.
if (a_iImageID > this.m_iImageActive || (this.m_bSliderLoop && this.m_bSliderPlay)) {
this.slider_slide_horizontal (a_iImageID,'left');
} else if (a_iImageID < this.m_iImageActive) {
this.slider_slide_horizontal (a_iImageID,'right');
}
break;
case 'instant':
// Check if the image movement has to be from left to the right or the other way around.
if (a_iImageID > this.m_iImageActive) {
this.slider_slide_instant (a_iImageID, 'left');
} else if (a_iImageID < this.m_iImageActive) {
this.slider_slide_instant (a_iImageID, 'right');
}
break;
case 'fade':
// Check if the image movement has to be from left to the right or the other way around.
if (a_iImageID > this.m_iImageActive) {
this.slider_slide_fade (a_iImageID, 'left');
} else if (a_iImageID < this.m_iImageActive) {
this.slider_slide_fade (a_iImageID, 'right');
}
break;
default:
break;
}
}
}
if (this.m_bSliderPlay) {
// Call this function again to keep moving the images.
// Instance of this class.
var oClassObject = this;
this.oTimerSlide = setTimeout(function(){oClassObject.slider_slide('next');},this.m_iSliderSpeedPlay);
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/**
* This function is to move the images to the given direction with the given step.
*
* @param int a_iStep
* @param string a_sDirection
*/
function slider_move_images (a_iStep, a_sDirection) {
for (i=0; i<(this.m_aSliderImages.length); i++) {
this.m_oSliderObjectMoving = document.getElementById(this.m_sSliderID+'_'+i);
if (this.m_oSliderObjectMoving) {
if (this.m_aSliderImages.length) {
// Set the object position.
if (a_sDirection=='left') {
this.m_oSliderObjectMoving.style.left = ((a_iStep*-1)+parseInt(this.m_oSliderObjectMoving.style.left))+'px';
} else if (a_sDirection=='right') {
this.m_oSliderObjectMoving.style.left = ((a_iStep)+parseInt(this.m_oSliderObjectMoving.style.left))+'px';
}
}
}
}
}
/**
* This function is to reset the images positions for the loop.
*/
function slider_reset_images () {
if (this.m_bSliderLoop && this.m_bSliderPlay) {
if (this.m_iImageActive == (this.m_aSliderImages.length-1) && !this.m_bImagesReset) {
this.m_bImagesReset = true;
oMenuActive = document.getElementById(this.m_sSliderID+'_menu_'+this.m_iImageActive);
oMenuActive.src = this.m_sSliderMenuInactiveSrc;
oMenuActive = document.getElementById(this.m_sSliderID+'_menu_0');
oMenuActive.src = this.m_sSliderMenuInactiveSrc;
for (i=0; i<(this.m_aSliderImages.length); i++) {
this.m_oSliderObjectMoving = document.getElementById(this.m_sSliderID+'_'+i);
if (this.m_iImageActive != i) {
this.m_oSliderObjectMoving.style.left = (((this.m_iSliderWidth+this.m_aImageSpacing)*(i+1)))+'px';
}
}
} else {
this.m_bImagesReset = false;
this.m_oSliderObjectMoving = document.getElementById(this.m_sSliderID+'_'+this.m_iImageActive);
this.m_oSliderObjectMoving.style.left = (((this.m_iSliderWidth+this.m_aImageSpacing)*(this.m_iImageActive)))+'px';
}
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// horizontal
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/**
* This function will move the images from right to the left.
*
* @param int a_iImageID
*/
function slider_slide_horizontal (a_iImageID, a_sDirection) {
if (this.m_iSliderPosX < this.m_iSliderScroll) {
iStep = this.m_iSliderStep; //this.m_iSliderStepFinish
iXLeft = this.m_iSliderScroll-this.m_iSliderPosX;
if (iXLeft < ((this.m_iSliderWidth+(this.m_aImageSpacing*this.m_iSliderSlides))*(this.m_iSliderStepDecreaseAt/100))) {
// Decrease the step amount by multiplying the step amount with a percentual decrease value.
for (i=0; i 0) {
this.m_iSliderOpacity = (this.m_iSliderOpacity)-(this.m_iSliderStep);
// Set the opacity of the object to an increasing opacity. Make sure the parent object has the right background color.
a_oObject.style.opacity = this.m_iSliderOpacity/100;
a_oObject.style.filter = 'alpha(opacity=' + (this.m_iSliderOpacity) + ')';
// Call this function again to keep moving the images.
// Instance of this class.
var oClassObject = this;
var oTimerSlideFadeIncrease = setTimeout(function(){oClassObject.slider_slide_fade_increase(a_oObject, a_sDirection, a_iStep);},this.m_iSliderSpeedFade);
} else {
this.m_iSliderOpacity = 0;
clearTimeout(oTimerSlideFadeIncrease);
// Move the images.
this.slider_move_images(a_iStep, a_sDirection);
// Fadein the slider.
this.slider_slide_fade_decrease(a_oObject);
return true;
}
}
}
/**
* This function will decrease the transparency of the given object.. Making the object less transparent.
*
* @param object a_oObject
*/
function slider_slide_fade_decrease (a_oObject) {
if (a_oObject) {
if (this.m_iSliderOpacity < 100) {
this.m_iSliderOpacity = (this.m_iSliderOpacity)+(this.m_iSliderStep);
// Set the opacity of the object to an increasing opacity. Make sure the parent object has the right background color.
a_oObject.style.opacity = this.m_iSliderOpacity/100;
a_oObject.style.filter = 'alpha(opacity=' + (this.m_iSliderOpacity) + ')';
// Call this function again to keep moving the images.
// Instance of this class.
var oClassObject = this;
var oTimerSlideFadeDecrease = setTimeout(function(){oClassObject.slider_slide_fade_decrease(a_oObject);},this.m_iSliderSpeedFade);
} else {
this.m_iSliderOpacity = 100;
clearTimeout(oTimerSlideFadeDecrease);
return true;
}
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Slider config functions.
ClassSlider.prototype.slider_set_images = slider_set_images;
ClassSlider.prototype.slider_set_images_link = slider_set_images_link;
ClassSlider.prototype.slider_set_images_event = slider_set_images_event;
ClassSlider.prototype.slider_set_image_spacing = slider_set_image_spacing;
ClassSlider.prototype.slider_random_image = slider_random_image;
ClassSlider.prototype.slider_set_id = slider_set_id;
ClassSlider.prototype.slider_set_effect = slider_set_effect;
ClassSlider.prototype.slider_set_step = slider_set_step;
ClassSlider.prototype.slider_set_speed = slider_set_speed;
ClassSlider.prototype.slider_set_speed_play = slider_set_speed_play;
ClassSlider.prototype.slider_set_play = slider_set_play;
ClassSlider.prototype.slider_set_loop = slider_set_loop;
ClassSlider.prototype.slider_set_random = slider_set_random;
ClassSlider.prototype.slider_set_size = slider_set_size;
ClassSlider.prototype.slider_set_fixedsize = slider_set_fixedsize;
ClassSlider.prototype.slider_set_menu = slider_set_menu;
ClassSlider.prototype.slider_set_menu_src = slider_set_menu_src;
ClassSlider.prototype.slider_load = slider_load;
ClassSlider.prototype.slider_move_images = slider_move_images;
ClassSlider.prototype.slider_reset_images = slider_reset_images;
// Slider effect functions.
ClassSlider.prototype.slider_slide = slider_slide;
ClassSlider.prototype.slider_slide_instant = slider_slide_instant;
ClassSlider.prototype.slider_slide_fade = slider_slide_fade;
ClassSlider.prototype.slider_slide_fade_increase= slider_slide_fade_increase;
ClassSlider.prototype.slider_slide_fade_decrease= slider_slide_fade_decrease;
ClassSlider.prototype.slider_slide_horizontal = slider_slide_horizontal;