PDA

View Full Version : Ultimate Fade-in slideshow (v2.4) rough transition in FF on MAC



mvcgobaud
03-30-2011, 09:33 PM
Hi,
In firefox on Mac, the slideshow transition isn't smooth. It looks fine on Safari and FF and IE on PC.

There are another post that was having the same issue and someone suggested to have a function to load the image before the script starts. There was some loading script that was rewritten and I cannot seem to make it work for 4 slideshows - below

I am not sure where the ending statement should be, or if the function should wrap all 4 items, or have one for each. I am getting grey hair over this.

URL: http://www.afishcalledavalon.com/slideshowtest2.html

<!DOCTYPE HTML><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://www.afishcalledavalon.com/fadeslideshow.js"></script>

<script type="text/javascript">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
**********************************************/
(function(){
var mygallery = {
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [238, 252], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [

["slides/6_avalon1.jpg"],
["slides/5_avalon1.jpg"],
["slides/4_avalon1.jpg"],
["slides/3_avalon1.jpg"],
["slides/1_avalon1.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 4200, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
}, i = 0, c = 0, ln = mygallery.imagearray.length;

function preload(src){
var im = new Image();
im.onload = function(){
++c;
};
im.src = src;
}

for(i; i < ln; ++i){
preload(mygallery.imagearray[i][0]);
}

function checkload(){
if(c === ln){
new fadeSlideShow(mygallery);
return;
} else {
setTimeout(checkload, 300);
}
}
checkload();
}) ();


(function(){

var mygallery2 = {
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [239, 252], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["slides/6_avalon2.jpg"],
["slides/5_avalon2.jpg"],
["slides/4_avalon2.jpg"],
["slides/3_avalon2.jpg"],
["slides/1_avalon2.jpg"] //<--no trailing comma after very last image element!
],

displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 3600, //transition duration (milliseconds)
descreveal: "none",
togglerid: ""

}, i = 0, c = 0, ln = mygallery.imagearray.length;

function preload(src){
var im = new Image();
im.onload = function(){
++c;
};
im.src = src;
}

for(i; i < ln; ++i){
preload(mygallery.imagearray[i][0]);
}

function checkload(){
if(c === ln){
new fadeSlideShow(mygallery);
return;
} else {
setTimeout(checkload, 300);
}
}
checkload();
}) ();



(function(){

var mygallery3 = {
wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
dimensions: [239, 252], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["slides/6_avalon3.jpg"],
["slides/5_avalon3.jpg",],
["slides/4_avalon3.jpg"],
["slides/3_avalon3.jpg"],
["slides/1_avalon3.jpg"] //<--no trailing comma after very last image element!

],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 3850, //transition duration (milliseconds)
descreveal: "none",
togglerid: ""
}, i = 0, c = 0, ln = mygallery.imagearray.length;

function preload(src){
var im = new Image();
im.onload = function(){
++c;
};
im.src = src;
}

for(i; i < ln; ++i){
preload(mygallery.imagearray[i][0]);
}

function checkload(){
if(c === ln){
new fadeSlideShow(mygallery);
return;
} else {
setTimeout(checkload, 300);
}
}
checkload();
}) ();

(function(){

var mygallery4 = {
wrapperid: "fadeshow4", //ID of blank DIV on page to house Slideshow
dimensions: [239, 252], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["slides/6_avalon4.jpg"],
["slides/5_avalon4.jpg",],
["slides/4_avalon4.jpg"],
["slides/3_avalon4.jpg"],
["slides/1_avalon4.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:4400, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "none",
togglerid: ""
}, i = 0, c = 0, ln = mygallery.imagearray.length;

function preload(src){
var im = new Image();
im.onload = function(){
++c;
};
im.src = src;
}

for(i; i < ln; ++i){
preload(mygallery.imagearray[i][0]);
}

function checkload(){
if(c === ln){
new fadeSlideShow(mygallery);
return;
} else {
setTimeout(checkload, 300);
}
}
checkload();
}) ();


</script>



</div>



<table width="956" height="252" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="238" height="252" class="drkgreybck" ><div id="fadeshow1"></div></td>
<td width="239"><div id="fadeshow2"></div></td>
<td width="239"><div id="fadeshow3"></div></td>
<td width="239"><div id="fadeshow4"></div></td>
<td width="1">
</td>

</tr>
</table>

<div id="fadeshow1"></div>

<br />

<div id="fadeshow2"></div>

<br />

<div id="fadeshow3"></div>

<br />

<div id="fadeshow4"></div>