PDA

View Full Version : PHP Dynamic Carousel Slideshow



amwd07
07-27-2008, 11:34 AM
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 :confused:




<?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;?>
)
);
}

amwd07
07-27-2008, 12:19 PM
I have now tried a different method using php still not quite right ???



<?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
}

jscheuer1
07-27-2008, 02:12 PM
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.

amwd07
07-27-2008, 04:54 PM
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/

amwd07
07-27-2008, 05:30 PM
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 ?



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

amwd07
07-27-2008, 07:26 PM
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 :)

amwd07
07-27-2008, 09:56 PM
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>

jscheuer1
07-28-2008, 09:28 AM
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:


<body onLoad="Carousel()">

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


<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):


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


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.

jscheuer1
07-28-2008, 01:18 PM
I see you've adapted the above code, and it is working. But you forgot to do:


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


<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):


echo "Car_Image_Sources = new Array();";

It should be:


echo "var Car_Image_Sources = new Array();";

Or, in what I imagine your version to be:


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.

amwd07
07-29-2008, 02:09 AM
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 ???

jscheuer1
07-29-2008, 04:08 AM
Yes. In fact it is preferred to do it in the script, and can be done in such a way so as to not conflict in situations where other scripts might use the body onload. But I feel I must stress, your page will be invalid and the script will not work in some browsers if you continue using two body tags for this.

Now the solution. Just put this in the script before its ending </script> tag:


if(typeof window.addEventListener!='undefined')
window.addEventListener('load', Carousel, false);
else if(typeof window.attachEvent!='undefined')
window.attachEvent('onload', Carousel);
else{
if(window.onload!=null){
var oldOnload=window.onload;
window.onload=function(e){
oldOnload(e);
Carousel();
};}
else
window.onload=Carousel;
}

And, as long as I am on the subject, it is also invalid to have a style section in the body of your page as I noticed in your source code. From your last post I gather that you have difficulty separating what goes in a template file and where things belong in a valid document. This is not the place to resolve all of those issues, but I assure you that in 99% (probably closer to 100%) of cases a document need not be invalid just to accommodate a template.