在PHP中将图像动态添加到JQuery滑块

问题描述：

I've got a problem using JavaScript Array. There is an Image gallery. I wanna dynamically load images to this gallery.
Here is the javaScript function to that gallary.

var LoadGallary=function(key){

        var mygallery=new simpleGallery({
        wrapperid: "imgGal", //ID of main gallery container,
        dimensions: [getWidth(), 250], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
        imagearray:  [
        ["Images/Home/slider/1.jpg", "#", "", "Image 1"],
        ["Images/Home/slider/2.jpg", "#", "", "Image 2"],
        ["Images/Home/slider/3.jpg", "#", "", "Image 3"],
        ["Images/Home/slider/4.jpg", "#", "", "Image 4"],
        ["Images/Home/slider/5.jpg", "#", "", "Image 5"],
        ["Images/Home/slider/6.jpg", "#", "", "Image 6"]
        ],
        autoplay: [true, 2500, 1000], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
        persist: false, //remember last viewed slide and recall within same session?
        fadeduration: 1500, //transition duration (milliseconds)
        oninit:function(){ //event that fires when gallery has initialized/ ready to run
            //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
        },
        onslide:function(curslide, i){ //event that fires after each slide is shown
            //Keyword "this": references current gallery instance
            //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
            //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
        }
    })
    }

"key" is the gallery ID. I've tried to fill this array using PUSH method like below.

        var LoadGallary=function(key){

        var arr = new Array();
        arr.push(["Images/Home/slider/1.jpg", "#", "", "Image 1"]);
        arr.push(["Images/Home/slider/2.jpg", "#", "", "Image 2"]);
        arr.push(["Images/Home/slider/3.jpg", "#", "", "Image 3"]);
        arr.push(["Images/Home/slider/4.jpg", "#", "", "Image 4"]);
        arr.push(["Images/Home/slider/5.jpg", "#", "", "Image 5"]);
        arr.push(["Images/Home/slider/6.jpg", "#", "", "Image 6"]);

        var mygallery=new simpleGallery({
        wrapperid: "imgGal", //ID of main gallery container,
        dimensions: [getWidth(), 250], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
        imagearray:  [
            arr
        ],
        autoplay: [true, 2500, 1000], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
        persist: false, //remember last viewed slide and recall within same session?
        fadeduration: 1500, //transition duration (milliseconds)
        oninit:function(){ //event that fires when gallery has initialized/ ready to run
            //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
        },
        onslide:function(curslide, i){ //event that fires after each slide is shown
            //Keyword "this": references current gallery instance
            //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
            //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
        }
    })
    }

But it doesn't work.

答

While you initialize you simpleGallery plugin try using as shown below:

......
.......
imagearray:arr,//removed the enclosing square brackets
.....
.....

so your new code would look like:

var LoadGallary=function(key){

    var arr = new Array();
    arr.push(["Images/Home/slider/1.jpg", "#", "", "Image 1"]);
    arr.push(["Images/Home/slider/2.jpg", "#", "", "Image 2"]);
    arr.push(["Images/Home/slider/3.jpg", "#", "", "Image 3"]);
    arr.push(["Images/Home/slider/4.jpg", "#", "", "Image 4"]);
    arr.push(["Images/Home/slider/5.jpg", "#", "", "Image 5"]);
    arr.push(["Images/Home/slider/6.jpg", "#", "", "Image 6"]);

    var mygallery=new simpleGallery({
    wrapperid: "imgGal", //ID of main gallery container,
    dimensions: [getWidth(), 250], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    imagearray:arr,//please note made a change here: removed square brackets
    autoplay: [true, 2500, 1000], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 1500, //transition duration (milliseconds)
    oninit:function(){ //event that fires when gallery has initialized/ ready to run
        //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    },
    onslide:function(curslide, i){ //event that fires after each slide is shown
        //Keyword "this": references current gallery instance
        //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
        //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
    }
})
}

在PHP中将图像动态添加到JQuery滑块

相关推荐