View Single Post
Old 11-02-2011, 10:58 AM   PM User | #1
MARKMAKAVELI
New to the CF scene

 
Join Date: Oct 2011
Posts: 7
Thanks: 5
Thanked 0 Times in 0 Posts
MARKMAKAVELI is an unknown quantity at this point
Make this compatible with ie6?

Hi All,

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 
});
MARKMAKAVELI is offline   Reply With Quote