The script is written in Jquery, it’s a simple piece of code which I’ve seen on another website here http://www.renderwave.it/en. I modified the code a bit to work with a website I made for my portfolio.
The problem with the code is that is works fine in firefox but it doesn’t on chrome. the code doesn’t break entirely but on chrome the images doesn’t slide, it just jumps from image to image. here’s the code
var settings = {
startingPosition : 0, //--------------------------------set starting position for images, 0 for first image
slideSpeed : 550, //---------------------------speed of slide, seconds/fast/slow
easing : 'linear', //-------------------------easing type
navigationClass : 'slider_navigation', //--------------class of navigation (the prev and next)
activeItemClass : 'slider-current-active-element', //--name of class to be added to first element
repeat : true, //-----------------------------make gallery neverending
infoClass : 'info_container', //-----------------class of text associated with image
//activeSlideNum : 0, //-------------------------------add class to slide, starting at 0
defaultMargin : 0, //--------------------------------for styling purposes
autoPlay : false, //----------------------------activate slideshow (UNACTIVE)
slideCallback : function(){
return false
},
whileSlideCallback : function(){
return false
}
};
return this.each(function() {
//merge default setting with user settings
var opt = $.extend( settings, options );
var self = this;
/*assigning values for easy selection*/
//get first ul
var elContainer = $('ul', self).eq(0);
//select children
var elChildren = elContainer.children();
//set active class
var elActive = elChildren.eq(0);
elActive.addClass(opt.activeItemClass);
//select all images
var imgContainer = $('img', elContainer);
//count all images
var countImages = imgContainer.size();
//get images width
var imgWidth = imgContainer.outerWidth(true);//true includes margin width
//set total width of ul element
var elContWidth = countImages * imgWidth;
//set starting image
var elPosition = opt.defaultMargin + -(imgWidth * opt.startingPosition);
//styling setup
elContainer.css({
'marginLeft' : elPosition,
'width' : elContWidth});
$("<div></div>").appendTo('#header').addClass('slider_detail_display');
//setting up slide event
var slide = function(direction){
slideUnbind();
//elChildren.removeClass(opt.activeItemClass);
if(opt.repeat){
if(direction == 'back'){
//take last list image and put in front
$("> :last", elContainer).prependTo(elContainer);
//reset margin
elPosition -= imgWidth;
elContainer.css({
'marginLeft' : elPosition});
};
};
//set new animation margin
var animateToWidth = elPosition - (imgWidth);
if(direction == 'back'){
//set new animation margin if back is clicked
var animateToWidth = elPosition + (imgWidth);
//TODO: class needs fixing
//activeClassAdd('back');
}else{
//activeClassAdd('forward');
}
activeClassAdd(direction);
elPosition = animateToWidth;
//the slide animation
elContainer.animate({
'marginLeft' : animateToWidth
}, opt.slideSpeed, opt.easing,
function(){
//if forward is clicked
if(opt.repeat && direction == 'forward'){
$("> :first", elContainer).appendTo(elContainer).css({opacity : 0}).animate({opacity : 1}, 400);
elPosition += imgWidth;
elContainer.css({
'marginLeft' : elPosition
});
}
opt.slideCallback(direction);
slideBind();
});
opt.whileSlideCallback(direction);
};//slide()
var activeClassAdd = function(direction){
if(direction == 'forward'){
$('.'+opt.activeItemClass).removeClass(opt.activeItemClass).next().addClass(opt.activeItemClass);
}else{
$('.'+opt.activeItemClass).removeClass(opt.activeItemClass).prev().addClass(opt.activeItemClass);
}
};
var textFade = function(direction){
var slideText = $('.'+opt.activeItemClass).next().children('.'+opt.infoClass).html();
if(!direction){
$('.slider_detail_display').append(slideText);
}else{
$('.slider_detail_display').fadeOut('fast', function(){
$(this).empty();
$(this).append(slideText).fadeIn('fast');
});
}
};
//unbind
var slideUnbind = function(){
$('.back, .forward', '.'+opt.navigationClass).unbind();
};
//setting up click events
var slideBind = function(){
$('.back', '.'+opt.navigationClass).click(function(){
slide('back');
textFade('back');
return false;
});
$('.forward', '.'+opt.navigationClass).click(function(){
slide('forward');
textFade('forward');
return false;
});
};
//init
slideBind();
textFade();
Most of it works fine but I’m guessing the animate part in the problem
//the slide animation
elContainer.animate({
'marginLeft' : animateToWidth
}, opt.slideSpeed, opt.easing,
function(){
//if forward is clicked
if(opt.repeat && direction == 'forward'){
$("> :first", elContainer).appendTo(elContainer).css({opacity : 0}).animate({opacity : 1}, 400);
elPosition += imgWidth;
elContainer.css({
'marginLeft' : elPosition
});
}
Here’s the dummy site I made http://dynamicfilmcompany.deadlinemedia.ca/
I’m no expert on javascript so if you can give me any input on how to make the code better, it’ll be greatly appreciated. thanks!