Swissarmy: cross-fading speed

[thedarkroom]

1) Script Title: swiss army

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

3) Describe problem: How can I adjust the cross-fading speed in Swiss army? There is a variable for the delay, but I can't seem to find the one that determines the length of the image overlap.

[jscheuer1]

That wasn't made an option because it relies upon two factors which if they get out of whack can easily result in choppy fades. If you consider the delay in relation to how long it takes an image to fade fully in, that makes three factors and for the possibility that an image won't have time to fade fully in before it starts to change into the next image.

That said, feel free to play with it. The two factors I mentioned may be found in the swissarmy.js file itself by searching for:

fadepic

which only appears twice in that file. The first time:

inter_slide.prototype.fadepic=function(){
if (this.fade&&this.degree<100){
this.faded=0
this.degree+=10
if (this.tempobj.filters&&this.tempobj.filters[0]){
if (typeof this.tempobj.fil . . .

Notice the red 10, it is the opacity increment for each iteration of the repeating fade in cycle. If it is reduced, it will make the fade take longer. It must be able to divide into 100 evenly. Using values other than 20, 10, 5, or 2 will probably make for trouble.

The other factor is near the second instance of fadepic:

this.fadeclear=setInterval(function(){fadeobj.fadepic()},50)

Notice the red 50, it sets how often (in milliseconds) each iteration of the fade in cycle repeats. If it is increased, it will slow things down. 20 (which would be faster) is thought to be a minimum value, at 70 or more (pretty slow), the effect will probably start to get choppy.

So by adjusting these two numbers you can have some control over the fade in rate. Just be aware, as I already mentioned, that if you slow the rate of fade in to a point where it takes longer than the delay, no image will ever fade fully in. And of course beware of making the transition choppy if these two values get too far out of whack. The exact numbers where this will happen vary in relation to each other and to the size (both in dimensions and bytes) of your images. Different browsers and systems will also vary in this.

[thedarkroom]

Thank you ! Works great with Safari & FF but no cross-fading on IE-8. Is that expected or is there something I should implement?
For reference, the site is:
http://www.neworleansdarkroom.com/index_slide.html
thanks again

[jscheuer1]

I don't test in IE 8 and will not until it is officially released. At that point there will be a lot of code (not just scripts) that needs upgrading, but no sense testing on a beta, whose code may change before release. In the meantime, this fix should enable most scripts that run in IE 7 as this one does to do well in IE 8:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
  <title>Custom imaging and display solutions for the visual artist</title>

Place it right before your title tag, as shown.

As a side note, this will often also resolve any layout issues between IE 8 and 7.

Edit:
I was just looking at your source a little more. You often can't do this sort of thing in any version of IE:

              <a href="http://www.neworleansdarkroom.com/gallery/gunsnus/index.html" target="_blank">
                <script type="text/javascript">
                  //Notes on Parameters: The only required parameter is the slides_array_name.  If Width is used, so must Height.
                  //Interval is optional too.  It is always last, either fourth after Width and Height or second after Slides_array_name.
                  //Usage: new inter_slide(Slides_array_name, Width, Height, Interval)
                  new inter_slide(slides);
                </script>
              </a>

as it can confuse IE during the script's internal markup creation process. If you want each image linked, use Swiss Army's internal linking method, example:

slides[0] = ["http://www.neworleansdarkroom.com/gallery/gunsnus/images/GNS0-show.jpg", "<small>Kyle Cassidy</small>", "http://www.neworleansdarkroom.com/gallery/gunsnus/index.html", "_blank"];

for each array entry.

[thedarkroom]

Got it - thanks much.