duanbianweng5353
duanbianweng5353
2014-05-27 05:54
浏览 55

在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.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongshijiao2363
    dongshijiao2363 2014-05-27 07:37
    已采纳

    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)
        }
    })
    }
    
    点赞 评论

相关推荐