problem with nivo-slider in simpleModal

The nivo-slider displays and works fine, the problem I'm having is that if you close the modal window, and then re-open it, the nivo-slider is then broken. It stays stuck on the first picture and all the buttons related to nivo-slider are unresponsive.

Is there a way I can append the way simpleModal closes so it won't break nivo-slider?

simpleModal

Nivo Slider

Note: This probably happens because nivo-slider is runs on pageload, however, simpleModal unloads it when the modal windo开发者_如何学Cw is closed, so there's no way to reload itif you reopen the modal window.

So the solution to this would probably be changing simplemodal so that instead of unloading it's content when the window is closed, it simply hides it instead. The problem is that I don't know how to do that.

Since no one else was willing to answer my question, I dug through simpleModal's source code and did it myself.

I looked through the source until I found the function that it uses to close the modal window and I looked for the sections where it removed things and changed it to just hiding them.

Note: My fix will not work for people who have information in the modal window that is going to be changed by the user, but it will work for anyone using the window for static information like I am.

Simply apply these changes to the source code:

From: (this code starts on line 664 of the unmodified source of simpleModal version 1.4.1)

// if the data came from the DOM, put it back
if (s.d.placeholder) {
    var ph = $('#simplemodal-placeholder');
    // save changes to the data?
    if (s.o.persist) {
        // insert the (possibly) modified data back into the DOM
        ph.replaceWith(s.d.data.removeClass('simplemodal-data').css('display', s.display));
    }
    else {
        // remove the current and insert the original,
        // unmodified data back into the DOM
        s.d.data.hide().remove();
        ph.replaceWith(s.d.orig);
    }
}
else {
    // otherwise, remove it
    s.d.data.hide().remove();
}

// remove the remaining elements
s.d.container.hide().remove();
s.d.overlay.hide();
s.d.iframe && s.d.iframe.hide().remove();
setTimeout(function(){
    // opera work-around
    s.d.overlay.remove();
    // reset the dialog object
    s.d = {};
}, 10);

to:

// if the data came from the DOM, put it back
if (s.d.placeholder) {
    var ph = $('#simplemodal-placeholder');
    // save changes to the data?
    if (s.o.persist) {
        // insert the (possibly) modified data back into the DOM
        ph.replaceWith(s.d.data.removeClass('simplemodal-data').css('display', s.display));
    }
    else {
        // remove the current and insert the original,
        // unmodified data back into the DOM
        s.d.data.hide();
    }
}
else {
    // otherwise, remove it
    s.d.data.hide();
}

// remove the remaining elements
s.d.container.hide();
s.d.overlay.hide();
s.d.iframe && s.d.iframe.hide();
setTimeout(function(){
    // opera work-around
    s.d.overlay.remove();
    // reset the dialog object
    s.d = {};
}, 10);

I only changed 4 lines, but now simpleModal only hides the content when you close the window, it doesn't unload it.

To get the unmodified source for simpleModal, just click on the link I have placed below to download it.

simpleModal

Note: That is the full, uncompressed source code, for the purpose of development. After you have finished editing it, I suggest you compress it by using this website: JavascriptCompressor