Passing MySQL results from Php scripts to JQuery Variable

[Bile]

->Hi,I hope all is well.
Here is what I have difficulties with, I am NOT good in Java Scripts and I wanted to have a Slide show Image on My Page and lucky was I to find these fancy slide shows here.
I downloaded necessary associated files and the whole setup was fine and the slide shows were there on My page,but hardcoded the source of images and the captions from var imagesDataArray variable as shown below:

var imagesDataArray = [ 
/*
This is the variable that Holds the Source of My Images and their Caption.
It is then called in a jQuery function
*/
    {
      src: 'pictures/One.jpg',
      description: 'This is My Caption for a Picture One.'
   }];

The above variable is then called in the following JQuery Function:

jQuery(function(){

$('#cubeslider').shockwave(imagesDataArray, {
   'slider-type': 'CubeSlider',
   /*DURATION IS SET IN ms */
   'rotation-duration': 1000,  
   'slideshow-delay': 5000,
   'tiles-in-x': 10,
   'tiles-in-y': 1,
   'rotation-axis': 'y',
   'show-permanent-description': true,
   'show-description-onimage': false,
   'autostart-slideshow': true,
   'viewport-dimension': {width: 630, height: 250}
    });

})

The #cubeslider is a place holder (div) of the slide shows.
Now what I am in need of is to give var imagesDataArray all picked images from My database as src to the variable var imagesDataArray and their descriptions to be used as the description: to the variable var imagesDataArray so that when passed to the JQuery I'll be able to see all the images in a slide show.
Also My slide show is to be width: 630px and height: 250px as I defined in the JQuery function,but when I do that it wont be responsive and when I leave the part undefined the slide show wont have the desired dimensions (It is a bit small). I decided to put the dimensions on the place holder (div) area of My slide show but what happens the slide show is not hold in a (div) how to overcome this if any way I can do.
My php code for fetching the images and their description is as follows:

public function gallery_loader()
        {
            $sql="SELECT * FROM gallery WHERE id=1";
            $query=mysql_query($sql);
            while($finder=mysql_fetch_array($query))
            {
                $ImageSrc="gallery/".$finder['Image_Name'].$finder['Extension'];
                $Description=$finder["Category"];

                /*
                This $ImageSrc should be passed to var imagesDataArray's src:
                And this $Description to var imagesDataArray's description:
                In a JQuery Function
                */
            }
        }

Thats all,thaks for any contribution in advance...

[EvolutionFallen]

Try this for gallery_loader():

// Updated gallery_loader with ability to loop through multiple DB results.
public function gallery_loader()
{
    $sql="SELECT * FROM gallery WHERE id=1"; // IF YOU LEAVE id=1 you will only retrieve a single image. This code will still work, though.
    $query=mysql_query($sql);

    $i = 0;
    $slides = array();

    while($finder=mysql_fetch_array($query))
    {
        $slides[$i]['ImageSrc'] = "gallery/".$finder['Image_Name'].$finder['Extension'];
        $slides[$i]['Description'] = $finder["Category"];

        $i++;
    }
    return $slides;
}

Then for imagesDataArray, assuming it is in a PHP file:

<?php $mySlides = gallery_loader(); ?>
var imagesDataArray = [
{
src: '<?php $mySlides[0]['ImageSrc']; ?>',
description: '<?php $mySlides[0]['Description']; ?>'
}];

You can work looping into this as I did in the gallery_loader() function so you can supply multiple images and descriptions.

[veedeoo]

There are many ways of doing this, and one of the most effective is the double loop (while(inside the class) and foreach(outside)). Return the array from the while loop and iterate them outside, when the class is instantiated..

example

public function gallery_loader(){

    $image_array = array();

    while(..........){
        $item['src'] = $row['src'];
        $item['desc'] = $row['description'];

        $image_array[] = $item;

        }

        return array($image_array, $count);

        } // end of method

The $count above is the actual count of the items or images, you will need that in iterating the image_array.

Example of coding it on the view...

<?php

$object = new YourClass();
$data = $object->gallery_loader();
$images = $data[0];
$count = $data[1];

    $i = 0;
?>
<!-- add your javascript here -->
<script>
var imagesDataArray = [

// loop through the output of the gallery_loader() 

    <?php

        foreach($images as $image){
        ?>
        {

                src: <?php echo $image['src']; ?>,
                description:<?php echo $image['desc']; ?>,

        <?php
            echo ($count === $i ? '}' : '},' ); 

            $i++;

            } // endof foreach loop

            ?>
         // end of your    ImageDataArray
         ];

       // add jquery function below -->

        </script>

That's pretty much it...

[Bile]

Thanks,I'm on it be back...

[Bile]

Thanks to you all,I must admit that I tried both of the suggestions and I was able to cope with EvolutionFallen's method. veedeoo's method doesn't give any error but the only thing is I dont get My image to be displayed and I thought May be I'm missing a point somewhere in the code and I'll still work on it the only thing I may request is for veedeoo to try look again the code as what I got mixed up with is how those JQuery curl brackets will be intergrated with Php curl brackets to make a match.
EvolutionFallen's method displayed an image but the only thing is I do get only one image "NOT TO WORRY WITH":

$sql="SELECT * FROM gallery WHERE id=1"; // IF YOU LEAVE id=1 you will only retrieve a single image. This code will still work, though.

The actual line is:$SQL="SELECT * FROM gallery WHERE idImage=".$IdImage.""; as gallery has the fields (id,'Image_Name,Extension,Category,idImage) where idImage is a foreign key that points the type of Image as it may be from say an Event Images,Tour Images and Birth day Images so each type has its own id. And I tried to change the index in the JQuery source line and the description line to 1 then nothing was displayed:

src: '<?php echo $My_Slides[1]['ImageSrc']; ?>',
description: '<?php echo $My_Slides[1]['Description'];

It is like the only picked image is the first one in the php sql loop,once I replace with 0 again then image displays.
So please help Me out from this,and any way thanks to veedeoo as without the echo in the lines above nothing is displayed I hope EvolutionFallen forgot it.
Thanks in advance again.

[Bile]

Then thereis something else here after playing around with EvolutionFallen's code,when I change the array of the description to any index that matcheds the range of an array within the sql result the caption changes but:

src: '<?php echo $My_Slides[0]['ImageSrc']; ?>',
description: '<?php echo $My_Slides[3]['Description'];?>'

The above resulting slideshow gives Me the Firts Image in a database and the Fourth Image caption,but only when I change the Image index is where I get an Empty slideshow.
Any Suggestions please?...

[EvolutionFallen]

So long as you are providing an ID to your query, you will not retrieve more than one image, since only one image matches that ID. Why do you need the WHERE clause? Can't you just do SELECT * FROM gallery; to get all images, or for example SELECT * FROM gallery LIMIT 0,3; for the first three items?

Also, where is this ID even coming from? It's not in the function's argument list.

[Bile]

Sorry EvolutionFallen the thing is I tried even just to load all of the pictures and as I said the only image that was picked is the first one and the rest are not picked.
May be I should explain a bit the set up of My files:
1. I have a gallery page for Displaying the Gallery and within it is where the JQuery is.
2. And I have the page that have a class and the gallery_loader(); function.
On the page that displays the Gallery a User has to decide the type of Pictures from the gallery to see and thats why:

The actual line is:$SQL="SELECT * FROM gallery WHERE idImage=".$IdImage.""; as gallery has the fields (id,'Image_Name,Extension,Category,idImage) where idImage is a foreign key that points the type of Image as it may be from say an Event Images,Tour Images and Birth day Images so each type has its own id

And I hope its not a bad idea to do that as My gallery table may have lots of images with the same idImage as it is now,so the part of selecting by using a 'WHERE CLAUSE' is important on My side and so 'TO MAKE IT EVEN SOUND GOOD' to You when a user selects type of gallery images to be loaded the id is passed to the function in My class and it is actully looking like this gallery_loader($IdImages); by using a $_Get[''] method its all fine just the images wont be all picked up but just one...
Is that now clear and May be I have tried to clear the doupt?...