OK, I got it worked out. First of all, you're missing the loading image:

Right click and 'save as', then upload it to the same folder as your page.
Once you have that, change these styles:
Code:
<style type="text/css">
.slideshow {
height: 100px;
width: 100px;
margin-right:0px;
background-color: #FFF;
float:left;
}
#fadeshow1, #fadeshow1 .gallerylayer {
background-color: white!important;
}
#fadeshow2, #fadeshow2 .gallerylayer {
background-color: white!important;
}
#fadeshow3, #fadeshow3 .gallerylayer {
background-color: white!important;
}
#fadeshow4, #fadeshow4 .gallerylayer {
background-color: white!important;
}
#fadeshow5, #fadeshow5 .gallerylayer {
background-color: white!important;
}</style>
to:
Code:
<style type="text/css">
.slideshow {
float:left;
width: 190px;
height: 150px;
background: url(loading.gif) center no-repeat;
}
.slideshow, .slideshow .gallerylayer{
background-color: #fff!important;
}
</style>
Next, replace these scripts:
Code:
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["chanel.jpg", "", "", ""],
["louboutin.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""]
],
displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 0, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script></script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["hermes.jpg", "", "", ""],
["manolo.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""]
],
displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 0, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["birkin.jpg", "", "", ""],
["wallet.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""]
],
displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 0, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow4", //ID of blank DIV on page to house Slideshow
dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["jacket.jpg", "", "", ""],
["scarf.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""]
],
displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 0, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow5", //ID of blank DIV on page to house Slideshow
dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["flats.jpg", "", "", ""],
["bracelet.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""]
],
displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 0, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
with:
Code:
<script type="text/javascript">
(function($){
var ims = [], imsCount = 0, gallery = 0, galleryObj = {
dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "never",
togglerid: "",
oninit: function(){
if(gallery < galleryObjs.length){
setTimeout(function(){new fadeSlideShow($.extend(true, galleryObjs[gallery++], galleryObj));}, this.setting.fadeduration);
}
this.setting.$wrapperdiv.unbind('mouseenter mouseleave');
}
}, galleryObjs = [
{
wrapperid: 'fadeshow1',
imagearray: [
['chanel.jpg'],
['louboutin.jpg']
]
}, {
wrapperid: 'fadeshow2',
imagearray: [
['hermes.jpg'],
['manolo.jpg']
]
}, {
wrapperid: 'fadeshow3',
imagearray: [
['birkin.jpg'],
['wallet.jpg']
]
}, {
wrapperid: 'fadeshow4',
imagearray: [
['jacket.jpg'],
['scarf.jpg']
]
}, {
wrapperid: 'fadeshow5',
imagearray: [
['flats.jpg'],
['bracelet.jpg']
]
}
];
function startIt(){
if(imsCount < ims.length){
setTimeout(startIt, 300);
return;
}
new fadeSlideShow($.extend(true, galleryObjs[gallery++], galleryObj));
}
$.each(galleryObjs, function(i, v){
ims[i] = new Image();
ims[i].onload = function(){
++imsCount;
};
ims[i].src = v.imagearray[0][0];
});
startIt();
})(jQuery);
</script>
That's it.
Any questions, feel free to ask.
Bookmarks