asked on

How do I dymically load an image array for my javascript image slider?

I'd like to dynamically build an image array in javascript or jQuery for my image slider. Is there a clear example of this somewhere? I'd like to be able to pull the images from either a directory or from a database. So I think i'm looking for some function that I would call within my javascript / jQuery to go out and load the image array.

SOLUTION

PeteEngineer

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Roopesh Reddy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Michael Sterling

ASKER

@PeteEngineer: It appears that you are hard coding the images into the javascript. What I want is something that will "pull" / "load" the images from, say, a directory or database.

Michael Sterling

ASKER

@roopeshreddy: i think your solution is really close, except that I don't want the user to have to click a button. I want the images (the image slider) to start rotating through the images once the page loads, with out any interaction needed from the user. like if the images were in a <div> or something. like in the code sample below. except the .cycle in my jQuery would cycle through an array of images...

    <script type="text/javascript">
        $(document).ready(function () {
            $('.rotator_home').cycle({
                fx: 'fade'
            , speed: 1000
            , timeout: 3000
            }).fadeIn(1000);
        });
    </script>

        <div class="mbsc-gallery-photos">
            <div class="rotator_home">
                <img alt="Flavors 2 Savor Desserts" src="App_Themes/Default/Images/Cupcake1.png" />
                <img alt="Flavors 2 Savor Desserts" src="App_Themes/Default/Images/Cupcake2.png" />
                <img alt="Flavors 2 Savor Desserts" src="App_Themes/Default/Images/Cupcake3.png" />
                <img alt="Flavors 2 Savor Desserts" src="Images/Cupcake4.png" />
                <img alt="Flavors 2 Savor Desserts" src="Images/flagCake.jpg" />
                <img alt="Flavors 2 Savor Desserts" src="Images/fruitTop.jpg" />
                <img alt="Flavors 2 Savor Desserts" src="Images/GermChocCk.jpg" />
                <img alt="Flavors 2 Savor Desserts" src="Images/LemonCk.jpg" />
                <img alt="Flavors 2 Savor Desserts" src="Images/MiniCupcakes.jpg" />
                <img alt="Flavors 2 Savor Desserts" src="Images/PoundCk.jpg" />
                <img alt="Flavors 2 Savor Desserts" src="Images/RedVelvetCk.jpg" />
                <img alt="Flavors 2 Savor Desserts" src="Images/ScoobyDoo.JPG" />
                <img alt="Flavors 2 Savor Desserts" src="Images/yellowChocolateCC.JPG" />
                <img alt="Flavors 2 Savor Desserts" src="Images/SweetPotatoChsCk.jpg" />
                <img alt="Flavors 2 Savor Desserts" src="Images/StrwBrryMarbCk.jpg" />
                <img alt="Flavors 2 Savor Desserts" src="Images/Sponge Bob.JPG" />
            </div>
        </div>

Open in new window

Roopesh Reddy

Hi,

Then try the below code!

 <script type="text/javascript">
    var ImgArray = new Array();
        $(document).ready(function (e) {
                   
            for (var i = 0; i < ImgArray.length; i++) {
                alert(ImgArray[i]);
            }
        });
    </script>

 //.aspx.cs - code behind
    protected void Page_Load(object sender, EventArgs e)
        {
           //Let's create a dynamic array in the code behind

            string strImgArray = "ImgArray.push('../Images/Image1.jpg');ImgArray.push('../Images/Image2.jpg');ImgArray.push('../Images/Image3.jpg');";

            if (!Page.ClientScript.IsStartupScriptRegistered("imagescript"))
                Page.ClientScript.RegisterStartupScript(this.GetType(),"imagescript",strImgArray,true);

        }

Open in new window

Hope it helps u...

Michael Sterling

ASKER

thank you