How to put more settings in DD Autumn Leaves Script

[KennyP]

1) Script Title: Original Title - Autumn Leaves
2) Script URL (on DD): http://dynamicdrive.com/dynamicindex3/leaves.htm
Original DD script has even fewer settings than altered script below.

3) Describe problem: The problem is that it magnifies all images, maybe by about three times.
How can this code be altered so that the settings will have where to set the size of a displayed image?


Hi:

The following is a good script by Kurt Grigg to make images rise on a webpage, like balloons.
The problem is that it magnifies all images, maybe by about three times.

How can this code be altered so that the settings will have where to set the size of a displayed image?

Thanks

 
/* Inspired by Autumn leaves- by Kurt Grigg (kurt.grigg@virgin.net)
 * Modified by Dynamic Drive for NS6 functionality
 * visit http://www.dynamicdrive.com for the original script
 * Modified by jscheuer1 in http://www.dynamicdrive.com/forums
 * 01/11 for optional direction, allow effect to
 * work fully on wide pages, to not create 'dancing scrollbars' on small
 * pages & use jQuery methods. Requires standards mode DOCTYPE
 * tested in all current version major browsers including IE 8 & IE 9 Beta. */
 
jQuery(function($){
        var rise_fall = {       
                dir: -1,    // Set the direction (1 for down, -1 for up)
                speed: 30,  // 12 to whatever (60 is pretty slow) higher numbers are slower
                Amount: 6, // Smoothness depends on image file size, the smaller the size the more you can use!
                sway: 2,  // Set amount of left/right swaying of objects (default = 10), higher numbers produce more sway
 
                //Pre-load your image(s) below! 6 is an optimal number for variety. Use just one for uniformity.
                grphcs: [
"/images/holidays/birthday/red-balloon.png",
"/images/holidays/birthday/yellow-balloon.png"//<-- no trailing comma after last image
                ],
 
                //////////////// Stop Editing //////////////
 
                loadem: function(){
                        for(var i = 0; i < this.grphcs.length; ++i){
                                $(new Image()).attr('src', this.grphcs[i]);
                        }
                },
                Ypos: [],
                Xpos: [],
                Speed: [],
                Step: [],
                Cstep: [],
                els: [],
                $master: $('<div style: "position:fixed,top:0,left:0;">'),
                WinHeight: $(window).height(),
                WinWidth: $(window).width(),
 
                writeem: function(){
                        var i = this.Amount - 1, els = [];
                        this.grphcs.sort(function(){return 0.5 - Math.random();});
                        for (i; i > -1; --i){
                                this.els.push($('<img alt="" src="' + this.grphcs[i % this.grphcs.length] + '" style="position:fixed;top:0;left:0;">').appendTo(this.$master));
                                this.Ypos.push(Math.floor(Math.random()*this.WinHeight));
                                this.Xpos.push(Math.floor(Math.random()*this.WinWidth));
                                this.Speed.push((Math.random()*5+3)*this.dir);
                                this.Cstep.push(0);
                                this.Step.push(Math.random()*0.1+0.05);
                        }
                        $('body').append(this.$master);
                },
 
                moveem: function(){
                        this.WinHeight = $(window).height();
                        this.WinWidth = $(window).width();
                        for (var i = 0, sy, sx; i < this.Amount; ++i){
                                sy = this.Speed[i]*Math.sin(90*Math.PI/180);
                                sx = this.Speed[i]*Math.cos(this.Cstep[i]);
                                this.Ypos[i] += sy;
                                this.Xpos[i] += sx*this.sway*0.1; 
                                if (this.Ypos[i] > this.WinHeight&&this.dir === 1||this.Ypos[i] < 0 && this.dir === -1){
                                        this.Xpos[i] = Math.round(Math.random()*this.WinWidth);
                                        this.Speed[i] = (Math.random()*5+3)*this.dir;
                                }
                                this.Ypos[i] = (this.Ypos[i] > this.WinHeight&&this.dir === 1)? -60 : (this.Ypos[i] < 0 && this.dir === -1)? this.WinHeight+60 : this.Ypos[i];
 
                                sx = Math.min(this.WinWidth,this.Xpos[i]);
                                sy = this.Ypos[i];
                                this.els[i].css({left: sx, top: sy});
 
                                this.Cstep[i] += this.Step[i];
                        }
                },
                init: function(){
                        this.loadem();
                        this.writeem();
                        this.moveem();
                        setInterval(function(){rise_fall.moveem();}, this.speed);
                }
        };
        rise_fall.init();
 
});

[jscheuer1]

It doesn't appear to set any height or width to the images. I'm thinking it's other css already on the page that does that. In fact, if there are any min-width or min-height css settings that are affecting this, they could still override what I'm about to suggest, but could still be dealt with.

This line could be altered to set the images' width and height, or to set them to auto, which will make them actual size in most cases:

this.els.push($('<img alt="" src="' + this.grphcs[i % this.grphcs.length] + '" style="position:fixed;top:0;left:0;width:auto;height:auto;">').appendTo(this.$master));

If you want more help, please post a link to the page on your site with the problematic code.

[KennyP]

It doesn't appear to set any height or width to the images. I'm thinking it's other css already on the page that does that. In fact, if there are any min-width or min-height css settings that are affecting this, they could still override what I'm about to suggest, but could still be dealt with.

This line could be altered to set the images' width and height, or to set them to auto, which will make them actual size in most cases:

this.els.push($('<img alt="" src="' + this.grphcs[i % this.grphcs.length] + '" style="position:fixed;top:0;left:0;width:auto;height:auto;">').appendTo(this.$master));

If you want more help, please post a link to the page on your site with the problematic code.

Thank you for your response and code John.

Just as you said, 'auto' does make them actual size, whether they're viewed on a large monitor or a small device.

I was hoping to have a size setting, so that I could use img {width:100%; height:auto;}, in order to make the whole page responsive.

The page as it is now.

[jscheuer1]

Then you should just be able to put that (change red) where I did what I did (highlighted):

this.els.push($('<img alt="" src="' + this.grphcs[i % this.grphcs.length] + '" style="position:fixed;top:0;left:0;width:100%;height:auto;">').appendTo(this.$master));

That is the literal inline style string each image is created with, any style you want to apply to them can be put there. The only problems that could arise is if either a typo invalidates it or existing styles on the page override it. As long as it's working, no reason to change it.

That said, you could revert that string to what it was and add a class, then use the class name in a stylesheet to style them. In fact, I would recommend that. Make that string what it was:

this.els.push($('<img alt="" src="' + this.grphcs[i % this.grphcs.length] + '" style="position:fixed;top:0;left:0;">').appendTo(this.$master));

Make this highlighted addition to an earlier line:

$master: $('<div class="balloonmaster" style: "position:fixed;top:0;left:0;">'),

Now in a stylesheet you can have:

.balloonmaster img {
	width: 100%;
	height: auto;
}

or any other rules you want for the images.

Whether you add the class and do it that way, or just add to/change the script's inline style, as long as there are no conflicting styles or typos, it should be fine.

Obviously - for simplicity's sake, you should choose only one or the other method. And the inline style position, left, and top need to remain.