Question

I am using a gallery plugin for jQuery called SimpleGallery.

When I load my page, everything works perfect, in every browser. But when I refresh the page in Internet Explorer 7, the images won’t load anymore.

Here’s my page: https://www.cap47fb.com/bulthaup/welkom/

And this is my code:

$(document).ready(function(){
var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [520, 721], //width/height of gallery in pixels. Should reflect  dimensions of the images exactly
imagearray: [
    ["https://www.cap47fb.com/bulthaup/images/welcome_1.jpg", "", "", ""],
    ["https://www.cap47fb.com/bulthaup/images/welcome_2.jpg", "", "", ""]
],
autoplay: [true, 5000, 20], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: true, //remember last viewed slide and recall within same session?
fadeduration: 1000, //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)
}
})

});

This only happens when you put the cursor in your address bar and click enter. When you click on the button ‘refresh’ of your browser, it works…

This webpage will be used as an iframe on a facebook page, so this problem happens as well when you click on another app and return to the previous one.

I’ve put the code in the document.ready function, so I’m sure everytime I access or reaccess the page, the simplegallery is reloaded, right?

Answer 1

I’ve found the solution, by the guys at dynamicdrive:

Using a text only editor like NotePad, find this section in the simplegallery.js file:

Code:

for (var i=0; i<setting.imagearray.length; i++){  //preload slideshow images
    preloadimages[i]=new Image()
    preloadimages[i].src=setting.imagearray[i][0]
    if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)
        setting.longestdesc=setting.imagearray[i][3]
    jQuery(preloadimages[i]).bind('load error', function(){
        loadedimages++
        if (loadedimages==setting.imagearray.length){
            dfd.resolve() //indicate all images have been loaded
        }
    })
}

Replace it with this:

Code:

for (var i=0; i<setting.imagearray.length; i++){  //preload slideshow images
    preloadimages[i]=new Image()
    if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)
        setting.longestdesc=setting.imagearray[i][3]
    jQuery(preloadimages[i]).bind('load error', function(){
        loadedimages++
        if (loadedimages==setting.imagearray.length){
            dfd.resolve() //indicate all images have been loaded
        }
    })
    preloadimages[i].src=setting.imagearray[i][0]
}