Autumn Leaves

You don't need to turn the current version into a plugin. As I explained in my previous post, it already is a plugin. You can set anything you need to in the new fall_rise() call. But, if you must layer another plugin on top of it, you can. You can do things like (see the highlighted line):

Code:

---

/* 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. */
/* Updated further 10/13 to allow for stop and start and multiple usage per page, adds preload confirmation before start */

function rise_fall(opts){
        this.init(opts);
}

(function($){
        rise_fall.prototype = {
                defaults: { //these items may be set in the on page call
                        dir: proboards.plugin.get('falling_images').settings.fall_direction,    // Set the direction (1 for down, -1 for up)
                        speed: 20,  // 12 to whatever (60 is pretty slow) higher numbers are slower
                        Amount: 18, // Smoothness depends on image file size, the smaller the size the more you can use!
                        sway: 6,  // Set amount of left/right swaying of objects (default = 10), higher numbers produce more sway
                        zIndex: 1, // Set z-index value for image overlay
                        //Pre-load your image(s) below! 6 is an optimal number for variety. Use just one for uniformity.
                        grphcs: [
                                "al.gif",
                                "bl.gif",
                                "cl.gif",
                                "dl.gif",
                                "el.gif",
                                "fl.gif" //<-- no trailing comma after last image
                        ]
                },

---

You don't need:

Code:

---

proboards.preload(grphcs);

---

Because the script does that itself now, even delaying the onset of the effect until the images load (or error in the case of a missing image or images). I see you have a large if/else if/else thing there for the images starting with:

Code:

---

var grphcs = new Array(6);

---

Although there are more efficient and wiser ways to do that, you can keep that exactly how it is. Do it before the code at the top of this post, and when you get to the grphcs section of it do (again, see the highlighted line):

Code:

---

(function($){
        rise_fall.prototype = {
                defaults: { //these items may be set in the on page call
                        dir: proboards.plugin.get('falling_images').settings.fall_direction,    // Set the direction (1 for down, -1 for up)
                        speed: 20,  // 12 to whatever (60 is pretty slow) higher numbers are slower
                        Amount: 18, // Smoothness depends on image file size, the smaller the size the more you can use!
                        sway: 6,  // Set amount of left/right swaying of objects (default = 10), higher numbers produce more sway
                        zIndex: 1, // Set z-index value for image overlay
                        //Pre-load your image(s) below! 6 is an optimal number for variety. Use just one for uniformity.
                        grphcs: grphcs
                },

---

Hopefully you are getting the picture, I don't want to have to rewrite your plugin completely to use the latest code. But if you have more questions about how to get a specific value into the latest code, feel free to ask.

Just remember, if you're setting everything via the defaults property, when you finally get to the new fall_rise() call, leave it empty:

Code:

---

leaves = new fall_rise();

---

Otherwise, anything that's left in there will override what gets set in the defaults.

Thanks John, I'll check this out later today!

John, that's definitely helped so thanks a lot! :)

The only issue now is that the fall doesn't cycle meaning once the leaves fall out of the screen it doesn't come back as seen on my test forum here - http://inspiredtestforum.proboards.com

The accumulate doesn't seem to be working as well.

Also, on my old code, I had CSS that automatically resized all big images to 45px.

Code:

---

img[id^="si"] {
max-width: 45px;
}

---

What's the variable in the new code I can replace "si" with?

dir must be a number, not a string:

Code:

---

1

---

not:

Code:

---

'1'

---

and not:

Code:

---

"1"

---

I don't see where it's originally set. Presumably where:

Code:

---

proboards.plugin.get('falling_images').settings.fall_direction

---

is set. There, or wherever it's originally set, it must be an unquoted integer. It may be either 1 for falling, or -1 for rising.

Fixing that will allow the images to fall repeatedly and to accumulate.



There currently is no css hook for the images. One is easily created. Add the highlighted:

Code:

---

            $master: $('<div id="fall_rise_master" style="position:fixed;top:0;left:0;"></div>'),

---

Now you can do:

Code:

---

#fall_rise_master img {
max-width: 45px;
}

---

The browser cache may need to be cleared and/or the page refreshed to see changes.

Thanks John, you're the man! :D I'll see how it works once I'm at my laptop.

Quote:

---

Originally Posted by jscheuer1

dir must be a number, not a string:

---

John, here's what I have -

Code:

---

var plugin = proboards.plugin.get('falling_images');
var settings = plugin.settings;
var images = plugin.images;
var fall_direction = settings.fall_direction;

---

Code:

---

dir: fall_direction,

---

The value of "fall_direction" is either 1 or -1. It's only a number and as far I can see it's not a string.

The fall cycle still isn't working but the CSS works great.

Line 29 of the served source code of the page itself:

Code:

---

proboards.plugin._plugins["falling_images"] = {
                                                                        settings: {"placement":"1","fall_direction":"1","preset_ima . . .

---

Should be (without the red quotes):

Code:

---

proboards.plugin._plugins["falling_images"] = {
                                                                        settings: {"placement":"1","fall_direction":1,"preset_ima

---

If there's a problem for you with that, we can type convert to a number here:

Quote:

---

Code:

---

dir: fall_direction,

---

---

like so:

Code:

---

dir: +fall_direction,

---

Thanks for all the help John, it looks like I'm all done with this! :)