How to avoid any fade duration during slide transition

1) Script Title: Simple Controls Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...plegallery.htm

I am using the gallery to display weather maps (gif/png images) in a loop. When transitioning from one slide (image) to the next, I don't want to there to be any fade...just an instant display of the next slide. I tried placing the fadeduration down to 1 ms, but there's still an "annoying" flash between images in the loop. I tried setting this to zero and I'm getting no images to display at all when it is at zero. Sometimes the first run through the loop is fine and then the next run flashes between slides. Makes it hard to see details/changes between slides (important for weather map displays).

Any help would be appreciated.

Here's a little code snipit.

Code:

---

var mygallery=new simpleGallery({
        wrapperid: "simplegallery1", //ID of main gallery container,
        dimensions: [x_dimension, y_dimension], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
        imagearray: [ <?php for($index=0;$index<sizeof($xml->TAB[$p_index]->IMAGE);$index++)
 {?>
[<?php if($xml->TAB[$p_index]->IMAGE[$index]->URL != '' && url_validate($xml->TAB[$p_index]->IMAGE[$index]->URL)){?>"<?=$xml->TAB[$p_index]->IMAGE[$index]->URL?>",<? } else {?> "http://<?=$_SERVER['HTTP_HOST']?>/wx/photo_not_available.jpg", <? } ?> <?php if($xml->TAB[$p_index]->IMAGE[$index]->LINK != '')
            { ?> "<?=$xml->TAB[$p_index]->IMAGE[$index]->LINK?>", <? } else { if(!empty($xml->TAB[$p_index]->IMGGENERICLINK)){?> "<?=$xml->TAB[$p_index]->IMGGENERICLINK?>", <? } else {?> "nolink", <?} } ?> "_new", <?php if($xml->TAB[$p_index]->IMAGE[$index]->LABEL!=''){?>"<?=$xml->TAB[$p_index]->IMAGE[$index]->LABEL?>",<?php } else {?> " ",<?php } ?>""]<?php if($index<sizeof($xml->TAB[$p_index]->IMAGE)-1){?>,<? }        ?>
<? } ?>
               
        ],
        autoplay: [false, delay, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
        persist: false, //remember last viewed slide and recall within same session?
        fadeduration: 1, //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)
        }
})

---

I'm not getting any 'flash' at fadeduration 1 in Google Chrome. What browser(s) are you using? What can happen is, if images are updated and/or new, you will see white or some other solid color while the image loads. But you say this problem is more common the 2nd time around. Are the images cached at that point, or do they continue to update with current weather conditions?

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

John,

I'm using the latest version of Chrome on Windows 7 and Vista. The images are static and don't get updated. My website requires a subscription, but you can see the result in this video here:

http://avwxworkshops.com/etips/image...ng-Gallery.mp4

Give me a free subscription. To do so, respond here, then PM me the details. You must respond first though, otherwise your post count will be too low to qualify for PM privileges.

I ask because the video is ambiguous. It looks like the images aren't loading in time. But it could be something else. I would have to see the actual page to know for sure. If it's only that the images aren't loading in time, they can probably be preloaded.

Okay, I'll send you a pm with the details.

Tried to PM you and it says that I don't have the privileges.

sdenn you're now a Junior Coder and you're able to send John that PM.

Thanks. PM Sent.

OK I got that and have been looking over what it does. It appears to be browser dependent. And of the browsers I've looked at it in, Chrome is the worst. It looks like there is no caching of the images. But I'm not sure that's the issue. What I would suggest is using a different script. Here are the two that I would recommend considering for this:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

Or:

http://www.dynamicdrive.com/dynamici...army/index.htm

The first one would have to be tweaked to provide a stop/start button, but that's simple enough. Its advantage is that its setup is very similar to what you're used to with Simple Controls Gallery. The advantage that either of these scripts have over Simple Controls, is that they're less likely to need to reload the image each time. The first because all of its scripted images remain in the DOM (in Simple Controls these come and go). In the second one they come and go as well, but the way that slideshow works might be smoother. BTW, in browsers which cache the images and type convert null (Opera and Firefox), the current script is smooth.

John,

Chrome and Safari (on my iPad) flash pretty bad. I'll take a look at the first script to see how much effort this will be for my developer. Thanks for your help.

I've been testing it out, and the first one (Ultimate Fade) is much smoother in Chrome for these images. And can be easily adapted:

http://home.comcast.net/~jscheuer1/s...ion/garden.htm

See:

http://www.dynamicdrive.com/forums/e...e-in-slideshow

for how.

Would be interesting to see what that looks like at 1 ms of fadeduration. In my case, the fade aspect of this is also just as bad as the flash.

The fadeduration can also be set to 1 with this (Ultimate Fade) script. Something like (needs more refinement):

http://home.comcast.net/~jscheuer1/s...ather-demo.htm

However, the fade transition isn't really all that bad (I first tried it with it). It shows the change from image to image.

OK, I've refined it a bit and made another one with navigation/indicator buttons:

http://home.comcast.net/~jscheuer1/s...ther-demo2.htm

And here it is with a fade:

http://home.comcast.net/~jscheuer1/s...her-demo2f.htm

Looks pretty good to me.

John,

Wonderful. The last one that fades is quite difficult to use (cute for showing off, but not practical). I like the one in the middle. You say this middle one uses the simple gallery? I'm not seeing any flashing with Chrome even though you have this set to 1 ms.

It's interesting that my main weather section (the maps that come up before you type in that airport identifier) doesn't have this flashing issue even though I have it set to 1 as well (and that uses the simple gallery too). It's only the airport specific implementation that has this problem. I wonder if there's not something else going on here.

By the way, do you happen to have the source code for that middle example you can share?

It's a little confusing because I started storyboarding this in the simple gallery folder and using that script, but it just wasn't working. I left the page(s) there though as I changed over to Ultimate Fade in script. All three of the demos from my last post use the Ultimate Fade in Slideshow. Although they should work with the official version of the script, I recommend my unofficial version (right click and 'Save As'):

fadeslideshow.js

You should grab this image as well:

http://home.comcast.net/~jscheuer1/s...ry/loading.gif

The other images are copies of your buttons and the weather maps. The green buttons are input tags generated by the script.

The rest of the code is on the page*. Use your browser's "View Source" to get it.

You may have to change some paths and/or filenames. And you may want to make the css external. If you need more help, just ask.



*except for the fading one, which you said you didn't want. It uses another script in addition to fadeslideshow.js, onbeforeslide.js