Advanced Search

Results 1 to 4 of 4

Thread: Responsive script for carousel

  1. #1
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Responsive script for carousel

    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 *******

  2. #2
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  3. #3
    Join Date
    Aug 2004
    Posts
    9,863
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    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.
    DD Admin

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

    veeps (04-11-2012)

  5. #4
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •