I can't get the images on this carousel to display in ie6 although it does work fine in chrome. The end users will be on ie6 with no updates really, so need to make it work on the bare minimum setup. Please can someone help?
Code:
(function($) { //create closure
$.fn.jq3dcarousel = function (defaults) {
moveCarousel = function (){
var count = defaults.count;
var rX = defaults.rX;
var rY = defaults.rY;
var cX = defaults.cX;
var cY = defaults.cY;
var direction = defaults.direction < 0 ? -1 : 1;
var imgWidth = defaults.imgWidth;
var zIndexFactor = defaults.zIndexFactor;
var angle = 0, left = 0, top = 0, zIndex = 0, width = 0;
var genSpeed = defaults.speed;
var genAngle = Math.PI * 2 / defaults.nrEle;
var maxHeight = defaults.carousel;
var objectCounter = 0;
jQuery.each(defaults.imageDivs, function()
{
angle = objectCounter * genAngle + count * genSpeed;
left = cX + direction * rX * Math.sin( angle );
top = cY + rY * Math.cos( angle );
zIndex = Math.round(top) * zIndexFactor;
width = imgWidth * ( 3 + ( top - cY ) / rY ) / 4; // width from 100% to 50%
top -= width * .5;
left -= width * .5;
jQuery(this).css('top', top + 'px')
.css('left', left + 'px')
.css('width', width + 'px')
.css('zIndex', zIndex);
objectCounter++;
});
defaults.count++;
if(defaults.count>1000000000000) defaults.count = 0;
}
hoverIn = function(ele) {
var re = new RegExp( '^(.*)\.jpg$', 'g' );
var tmpSrc = jQuery('a img',ele)[0].src.replace(re, '$1_hover.jpg');
jQuery('a img',ele)[0].src = tmpSrc;
}
hoverOut = function(ele) {
var re = new RegExp( '^(.*)_hover\.jpg$', 'g' );
var tmpSrc = jQuery('a img',ele)[0].src.replace(re, '$1.jpg');
jQuery('a img',ele)[0].src = tmpSrc;
}
replaceImg = function(ele, strMatch, strReplace) {
var re = new RegExp( strMatch, 'g' );
var tmpSrc = jQuery('a img',ele)[0].src.replace(re, strReplace);
jQuery('a img',ele)[0].src = tmpSrc;
}
jQuery(document).ready(function() {
defaults.carousel = jQuery('.jq3d_carousel', this);
defaults.imageDivs = jQuery('.jq3d_carousel div', this);
defaults.nrEle = defaults.imageDivs.length;
if(defaults.buttonPP === 1) {
clearInterval(defaults.carousel_timer);
defaults.carousel_timer = setInterval('moveCarousel()',defaults.interval); // runOnLoad
} else {
moveCarousel(); // set first Position
}
defaults.imageDivs.show();
defaults.imageDivs.bind('mouseenter', function(evt) {
hoverIn(this);
var pHeader = '<p>' + jQuery('input',this)[0].value; + '</p>';
var pText = '<p>' + jQuery('input',this)[1].value; + '</p>';
jQuery('.jq3d_display', this.parent).append(pHeader).append(pText).show();
if(defaults.buttonPP === 1) {
clearInterval(defaults.carousel_timer);
}
})
.bind('mouseout', function(evt) {
hoverOut(this);
jQuery('.jq3d_display', this.parent).hide().empty();
if(defaults.buttonPP === 1) {
clearInterval(defaults.carousel_timer);
defaults.carousel_timer = setInterval('moveCarousel()',defaults.interval);
}
});
jQuery('.jq3d_buttonPP', this).bind('click', function(evt) {
if(defaults.buttonPP === 0) {
clearInterval(defaults.carousel_timer);
defaults.buttonPP = 0;
} else {
clearInterval(defaults.carousel_timer);
defaults.carousel_timer = setInterval('moveCarousel()',defaults.interval);
defaults.buttonPP = 0;
}
})
.bind('mouseenter', function(evt) { hoverIn(this); })
.bind('mouseout', function(evt) { hoverOut(this); });
jQuery('.jq3d_buttonCD', this).bind('click', function(evt) {
if(defaults.direction < 0) {
defaults.direction = 1;
replaceImg( this, '^(.*)clock_hover\.png$' , '$1counterclock_hover.png' );
} else {
defaults.direction = -1;
replaceImg( this, '^(.*)counterclock_hover\.png$' , '$1clock_hover.png' );
}
})
.bind('mouseenter', function(evt) { hoverIn(this); })
.bind('mouseout', function(evt) { hoverOut(this); });
}); // end ready fct
} // end jQ3dcarousel fct
})(jQuery) // end closure
jQuery('#jq3d_carousel_frame').jq3dcarousel({ // call the carousel
count: 0, // continuing counter for sin/cos
speed: 0.005, // defaultSpeed
rX: 180, // ellipse radius x-axis
rY: 60, // ellipse radius y-axis
cX: 245, // ellipse center x-axis
cY: 100, // ellipse center y-axis
direction: -1, // negative == clockwise, positive counter-clockwise
imgWidth: 160, // constant factor for image width (size)
zIndexFactor: 10, // multiplying factor for z-axis (multiplied by position top)
imageDivs: '', // placeholder for the divs in the carousel
nrEle: 0, // number of elements
carousel: '', // the carousel div
interval: 20, // time in ms for setInterval()
carousel_timer: '', // placeholder for the timer
buttonPP: 1 // Play/Pause-Button
});
I'll be finding out for sure today but our suspicion is that they have had their pc's for many years an they only really use them for running one program so no updates are ever installed.
Good stat though, appreciate that. We just want to make sure the website we create can run on the most out of date, no plugins installed etc. Backwards I know but that's what we're dealing with!