Responsive script for carousel

**veeps** · 03-29-2012, 04:30 PM

1) Script Title: Carousel Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/carousel.htm

3) Describe problem: I'm mainly a php and css person. But, while making my design more responsive, I'm trying to figure out how to make the carousel change var Car_Image_Width and var Car_Image_Height according to the window size - both initially as well as after window.onresize

I've tried variations of:

Code:

if(window.width >= 960) {
var Car_Image_Width = x;
var Car_Image_Height = y;}
else {
/*place default values here*/
}

and

Code:

window.onresize = function() {
if(window.width >= 960) {
var Car_Image_Width = 360;
var Car_Image_Height = 240;
}else {
blah, blah, blah}
}

Can anybody help?

****PLEASE NO JQUERY answers! I understand that it's javascript related and supposed to be simplified. But, as a php person, I'd much rather focus on one thing at a time. Thanks *******

**veeps** · 04-10-2012, 03:59 PM

WOW! I can't believe I'm the only one with this problem.

Okay, well, I was able to change the variables according to the window width upon pagload:

Code:

//Get Page Size to establish Car_Size 
var winW = 770; //default
function Car_W() {
	if (document.body && document.body.offsetWidth) {
	 winW = document.body.offsetWidth;
	}
	if (document.compatMode=='CSS1Compat' &&
		document.documentElement &&
		document.documentElement.offsetWidth ) {
	 winW = document.documentElement.offsetWidth;
	}
	if (window.innerWidth) {
	 winW = window.innerWidth;
	}
}
//play function
Car_W();

// 7 variables to control behavior
if(winW>=770) {
	var Car_Image_Width=240;
	var Car_Image_Height=360;
}
else {
	var Car_Image_Width=144;
	var Car_Image_Height=216;
}
//...cont other 5 variables

Using the above, I can refresh the page to establish a successful resize. However, I'm hoping someone can tell me how to use setTimeout and clearTimeout to "refresh" the variables upon window.onresize...
Thanks in advance.

**ddadmin** · 04-11-2012, 05:41 AM

Try adding the parts in red to the original code, which modifies the dimensions of the slideshow depending on the window's (both initially when the page loads and on window resize):

Code:

<!doctype html>

<body onload="Carousel()">	

<script type="text/javascript">

/***********************************************
* Carousel Slideshow script- © Ger Versluis 2003
* Permission granted to DynamicDrive.com to feature script
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

/********************************************************
	Create a div with transparent place holder in your html	
	<div id="Carousel" style="position:relative">
		<img src="placeholder.gif" width="404" height="202">
	</div>
	placeholder width:
		 4 sided: 1.42 * carousel image width + 3
		 6 sided: 2 * carousel image width +4
		 8 sided: 2.62 * carousel image width + 5
		12 sided: 3.87 * carousel image width + 7
	placeholder height: 
		carousel image height+2

	Insert onload in body tag
		<body onload="Carousel()">	
*********************************************************/

// 7 variables to control behavior
	var Car_Image_Width=140;
	var Car_Image_Height=225;
	var Car_Border=true;		// true or false
	var Car_Border_Color="white";
	var Car_Speed=4;
	var Car_Direction=true;		// true or false
	var Car_NoOfSides=8;		// must be 4, 6, 8 or 12

/* array to specify images and optional links. 
	For 4 sided carousel specify at least 2 images
	For 6 sided carousel specify at least 3
	For 8 sided carousel specify at least 4
	For 12 sided carousel specify at least 6
 If Link is not needed keep it ""
*/
	Car_Image_Sources=new Array(
		"photo1.jpg","http://www.dynamicdrive.com",
		"photo2.jpg","http://www.javascriptkit.com",
		"photo3.jpg","", //this slide isn't linked
		"photo4.jpg","http://www.codingforums.com" // NOTE No comma after last line
		);

/***************** DO NOT EDIT BELOW **********************************/
	CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
	C_Coef=new Array(
		3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4,	0,
		Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
	var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
	C_Pre_Img=new Array(Car_Image_Sources.length);
	var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
	C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

	function Carousel(){
		if(document.getElementById){
			for(i=0;i<Car_Image_Sources.length;i+=2){
				C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
			C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
			Car_Div=document.getElementById("Carousel");
			for(i=0;i<C_HalfNo;i++){
				CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);	
				CW_I[i].style.position="absolute";
				CW_I[i].style.top=0+"px";
				CW_I[i].style.height=Car_Image_Height+"px";
				if(Car_Border){
					CW_I[i].style.borderStyle="solid";
					CW_I[i].style.borderWidth=1+"px";
					CW_I[i].style.borderColor=Car_Border_Color}
				CW_I[i].src=Car_Image_Sources[2*i];
				CW_I[i].lnk=Car_Image_Sources[2*i+1];
				CW_I[i].onclick=C_LdLnk;
				CW_I[i].onmouseover=C_Stp;
				CW_I[i].onmouseout=C_Rstrt}
			CarImages()}}

	function CarImages(){
		if(!C_Stppd){
			C_TotalW=0;
			for(i=0;i<C_HalfNo;i++){
				C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
				C_TotalW+=C_ClcW[i]}
			C_LeftOffset=(C_MaxW-C_TotalW)/2;
			for(i=0;i<C_HalfNo;i++){
				CW_I[i].style.left=C_LeftOffset+"px";
				CW_I[i].style.width=C_ClcW[i]+"px";
				C_LeftOffset+=C_ClcW[i]}
			C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
			if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
				if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
				if(Car_Direction){
					CW_I[C_HalfNo]=CW_I[0];
					for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
					CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
					CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
				else{	for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
					CW_I[0]=CW_I[C_HalfNo];
					CW_I[0].src=Car_Image_Sources[C_CrImg];
					CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
				C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
		car_timer=setTimeout("CarImages()",50)}

	function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
	function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
	function C_Rstrt(){C_Stppd=false}

	window.onresize=(function f(){
		var winwidth = window.innerWidth || document.documentElement.offsetWidth || document.body.offsetWidth
		Car_Image_Width=winwidth/5
		Car_Image_Height=winwidth/4
		if (typeof car_timer!='undefined'){
			clearTimeout(car_timer)
			Car_Div.innerHTML=''
			Carousel()
		}
		return f
	})()
</script>

<div id="Carousel" style="position:relative">
   <img src="placeholder.gif" width="371" height="225">
</div>

The lines:

Code:

		Car_Image_Width=winwidth/5
		Car_Image_Height=winwidth/4

simply changes the slideshow's dimensions to be a fraction of the current window's width; you'll want to change that as desired.

**veeps** · 04-11-2012, 04:58 PM

Thanks! That works perfectly. To keep my dimensions equivalent to 4/6, I simply had to change Car_Image_Height=winwidth/4 to Car_Image_Height=winwidth/3.333333333

Much appreciated.

Thread: Responsive script for carousel

Thread Tools

Search Thread

Responsive script for carousel

The Following User Says Thank You to ddadmin For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions