Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: PHP Dynamic Carousel Slideshow

  1. #1
    Join Date
    Sep 2007
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile PHP Dynamic Carousel Slideshow

    1) Script Title:
    Carousel Slideshow

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

    3) Describe problem:
    passing php foreach loop within this script

    here is what I have so far which works for 1 slide but I need to loop the php so all the slide appear.

    Any one any idea's Js is not my strong point

    Code:
    <?php
      /*** create DB sql query to prepare for the array ***/  
     $sql = db::getInstance()->ExecuteS('SELECT id_image, id_product FROM ps_image GROUP BY id_product');
    
      /*** loop over the array ***/
     foreach ($sql as $row) {
       $productID = $row['id_image']; 
       $imageID = $row['id_product']; 
       $img = "img/p/".$imageID."-".$productID."-home.jpg";  
       print "product ID = $productID image ID = $imageID </br>";   
      }   
    ?>
    
    <body onLoad="Carousel()">
    <SCRIPT type="text/javascript" title="G1SCRIPT">
    
    	var Car_Image_Width=129;	// width image
    	var Car_Image_Height=129;	// arrivals image
    	var Car_Border=true;		// true or false
    	var Car_Border_Color="white";
    	var Car_Speed=4;			// speed carousel
    	var Car_Direction=true;		// true or false
    	var Car_NoOfSides=12;		// number of images 4, 6, 8, or 12
    
    	// Attention / / add additional lines if you put more than 6 items
    
    	
    var i=1;
    for (i=1;i<=10;i++)
    {
    document.write(
    	Car_Image_Sources=new Array(
    	"<?php echo $img; ?>",<?php echo $_SERVER['REQUEST_URI'];?>+"product.php?id_product="+<?php echo $productID;?>
    	)
    );
    }

  2. #2
    Join Date
    Sep 2007
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I have now tried a different method using php still not quite right ???

    Code:
    <?php
      /*** create DB sql query to prepare for the array ***/  
     $sql = db::getInstance()->ExecuteS('SELECT id_image, id_product FROM ps_image GROUP BY id_product');
    
    header("Content-Type: text/javascript"); 
    // Start looping rows in mysql database. 
     foreach ($sql as $row) {
       $productID = $row['id_image']; 
       $imageID = $row['id_product']; 
       $img = "img/p/".$imageID."-".$productID."-home.jpg";  
    // print "product ID = $productID image ID = $imageID </br>"; 
    ?> 
    Car_Image_Sources=new Array["<?php echo $img; ?>",<?php echo $_SERVER['REQUEST_URI'];?>+"product.php?id_product="+<?php echo $productID;?>] 
    <? 
    // close while loop 
    }

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    I was going to suggest something more like the second approach (using PHP to write the javascript array directly to the page) when I read this the first time. I hesitated though, because I'm not all that familiar with PHP, and I know next to nothing about data bases.

    Once you get your PHP worked out, so that it is at least writing the javascript array directly to the page, it just becomes a matter of making sure that the resulting javascript array has the proper syntax/format for the script.

    Fortunately that can be easily checked on a live page by using the browser's 'view source'. That will enable you to see the javascript array as it is being served.

    If the page is live somewhere, or you could put up a demo of it live somewhere, I could easily check that for you.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Sep 2007
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I defferently prefer php to JS but if I can use them combined then the possibilities are endless

    thanks for looking
    http://www.amwdesign.co.uk/demo7/
    Last edited by amwd07; 07-27-2008 at 06:26 PM.

  5. #5
    Join Date
    Sep 2007
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    For some reason there is now a problem with viewing this page ???
    so here is whats printed on the page if you can into this?

    product ID = 1 image ID = 1
    Car_Image_Sources=new Array["img/p/1-1-home.jpg",/demo7/+"product.php?id_product="+1] product ID = 5 image ID = 2
    Car_Image_Sources=new Array["img/p/2-5-home.jpg",/demo7/+"product.php?id_product="+5] product ID = 15 image ID = 5
    Car_Image_Sources=new Array["img/p/5-15-home.jpg",/demo7/+"product.php?id_product="+15] product ID = 18 image ID = 6
    Car_Image_Sources=new Array["img/p/6-18-home.jpg",/demo7/+"product.php?id_product="+18] product ID = 24 image ID = 7
    Car_Image_Sources=new Array["img/p/7-24-home.jpg",/demo7/+"product.php?id_product="+24] product ID = 33 image ID = 8
    Car_Image_Sources=new Array["img/p/8-33-home.jpg",/demo7/+"product.php?id_product="+33] product ID = 36 image ID = 9
    Car_Image_Sources=new Array["img/p/9-36-home.jpg",/demo7/+"product.php?id_product="+36]

    if not here is the complete source
    & this is the js error I recieve

    Car_Image_Sources is undefined so the syntax must be wrong with the Javascript ???
    probably something to do with when you click the link it tries to download the page ?

    Code:
    <?php
      /*** create DB sql query to prepare for the array ***/  
     $sql = db::getInstance()->ExecuteS('SELECT id_image, id_product FROM ps_image GROUP BY id_product');
    
    header("Content-Type: text/javascript"); 
    // Start looping rows in mysql database. 
     foreach ($sql as $row) {
       $productID = $row['id_image']; 
       $imageID = $row['id_product']; 
       $img = "img/p/".$imageID."-".$productID."-home.jpg";  
       print "product ID = $productID image ID = $imageID </br>"; 
    ?> 
    Car_Image_Sources=new Array["<?php echo $img; ?>",<?php echo $_SERVER['REQUEST_URI'];?>+"product.php?id_product="+<?php echo $productID;?>] 
    <? 
    // close while loop 
    } ?>
    
    <body onLoad="Carousel()">
    <SCRIPT type="text/javascript" title="G1SCRIPT">
    
    	var Car_Image_Width=129;	// width image
    	var Car_Image_Height=129;	// arrivals image
    	var Car_Border=true;		// true or false
    	var Car_Border_Color="white";
    	var Car_Speed=4;			// speed carousel
    	var Car_Direction=true;		// true or false
    	var Car_NoOfSides=12;		// number of images 4, 6, 8, or 12
    	
    
    	// ******** Depending on the carousel does not change ******** // 
    	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}}
    		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}
    	
    </SCRIPT>

  6. #6
    Join Date
    Sep 2007
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I ahve now removed
    <?php header("Content-Type: text/javascript"); ?>
    which caused the download to be promted for the site ???

    so this link now works
    http://www.amwdesign.co.uk/demo7/

    Could this be because the headers have already been sent ?
    I think if we can work out why Car_Image_Sources is undefined we will be somewhere near the solution

  7. #7
    Join Date
    Sep 2007
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I have nearly cracked this just need to remove the trailing slash from the last row in the array

    <SCRIPT type="text/javascript">
    var img = "<?php echo $img ?>";
    var url = "<?php echo $request_url ?>product.php?id_product=<?php echo $productID ?>";
    var car=new Array(img, url);
    car=split(',');
    document.write(car);
    </script>
    Last edited by amwd07; 07-28-2008 at 02:35 AM. Reason: Closer to the truth :)

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    You are confusing things, we just need to get a valid array into the existing script, not create multiple small scripts, nor write anything to the visible portion of the page rendered as it appears you are doing. Here is what I would suggest (working from what you have provided), first get rid of all the PHP you already have for making the array. And, since you can have only one <body> tag per page, also get rid of:

    Code:
    <body onLoad="Carousel()">
    and move its onLoad="Carousel()" to here:

    Code:
    		<script type="text/javascript" src="/demo7/js/jquery/jquery.pack.js"></script>
    		<script type="text/javascript" src="/demo7/js/jquery/jquery.easing.1.3.js"></script>
    		
    	</head>
    	
    	<body id="index" onLoad="Carousel()">
    		<div id="page">
    
    			<!-- Header -->
    			<div>
    				<h1 id="log . . .
    Use this (replaces the beginning of the script including its opening <SCRIPT> tag - the title attribute is not part of the specification for the script tag):

    Code:
    <script type="text/javascript">
    
    	var Car_Image_Width=129;	// width image
    	var Car_Image_Height=129;	// arrivals image
    	var Car_Border=true;		// true or false
    	var Car_Border_Color="white";
    	var Car_Speed=4;			// speed carousel
    	var Car_Direction=true;		// true or false
    	var Car_NoOfSides=12;		// number of images 4, 6, 8, or 12
    
    <?php
    
      /* create DB sql query to prepare for the array */  
     $sql = db::getInstance()->ExecuteS('SELECT id_image, id_product FROM ps_image GROUP BY id_product');
     $curentry = 0;
    echo "var Car_Image_Sources = new Array();\n";
    // Start looping rows in mysql database. 
     foreach ($sql as $row) {
       $productID = $row['id_image']; 
       $imageID = $row['id_product']; 
       $img = "img/p/".$imageID."-".$productID."-home.jpg";
       echo "Car_Image_Sources[" . $curentry . "] = '" . $img . "';\n";
       $curentry++;
       echo "Car_Image_Sources[" . $curentry . "] = '" . $_SERVER['REQUEST_URI'] . "product.php?id_product=" . $productID . "';\n";
       $curentry++;
       }
    
    ?>
    
    	// ******** Depending on the carousel does not change ******** // 
    	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 . . .
    Now, there may be problems, but this should get us much closer. I have opted for a slightly different array syntax, one that is still valid for use with this script, but that doesn't suffer from needing to determine which is the last entry in the array as using the exact array syntax from the original script would.

    The PHP code should output something like so:

    Code:
    var Car_Image_Sources = new Array();
    Car_Image_Sources[0] = 'img/p/something-something-home.jpg';
    Car_Image_Sources[1] = 'path/product.php?id_product=something';
    Car_Image_Sources[2] = 'img/p/something-something-home.jpg';
    Car_Image_Sources[3] = 'path/product.php?id_product=something';
    With each 'something' being replaced with the appropriate tokens from the data base, on and on until each set of images and URL's have been written to the page.
    Last edited by jscheuer1; 07-28-2008 at 02:31 PM. Reason: Make the array a formal declaration (addition highlighted and red)
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    amwd07 (07-28-2008)

  10. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    I see you've adapted the above code, and it is working. But you forgot to do:

    . . . move its onLoad="Carousel()" to here:

    Code:
    		<script type="text/javascript" src="/demo7/js/jquery/jquery.pack.js"></script>
    		<script type="text/javascript" src="/demo7/js/jquery/jquery.easing.1.3.js"></script>
    		
    	</head>
    	
    	<body id="index" onLoad="Carousel()">
    		<div id="page">
    
    			<!-- Header -->
    			<div>
    				<h1 id="log . . .
    So the script isn't starting in some browsers. Having two body tags (I see you've moved the extra one to after the script now) simply isn't allowed. Use the existing body tag at the beginning of the body section for the onload event. Also, where I had (corrected now in my previous post):

    Code:
    echo "Car_Image_Sources = new Array();";
    It should be:

    Code:
    echo "var Car_Image_Sources = new Array();";
    Or, in what I imagine your version to be:

    Code:
    echo "var car = new Array();";
    This won't affect it, at least not on your demo page, but it is good form. It formally declares the array, making it less likely to conflict with an id or named element elsewhere on the page.
    Last edited by jscheuer1; 07-28-2008 at 02:26 PM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. #10
    Join Date
    Sep 2007
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    thanks for your reply
    the problem with putting this in the header.tpl would be if the carousel isn't showing on the page then I will come up with a JS error. So thats why I left it in this file
    but I will look into trying to get this to work in the header.

    the other problem this is a module which needs to be simple to install.
    I can't expect people to insert onLoad="Carousel()" anyware except the module directory
    is there another way to call this in the script ???

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
  •