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

时间:2014-05-27 05:54:37

标签: javascript php jquery ajax arrays

我在使用JavaScript Array时遇到了问题。有一个图库。我想动态地将图像加载到这个图库 这是该项目的javaScript函数。

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" 是图库ID。 我尝试使用下面的PUSH方法填充此数组。

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

但它没有用。

1 个答案:

答案 0 :(得分:1)

在初始化simpleGallery插件时,请尝试使用如下所示:

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

所以你的新代码看起来像是:

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