A little fix for MooFlow V0.2

Hi,
I really love the script MooFlow from Tobias Wetzel (http://www.outcut.de/MooFlow/).

The code is really good work but I found a little problem if you change the resize “factor” of the image.

I fixed that and want to share my insights with you.

Demo: http://jsfiddle.net/BMoDesign/sAF8L/embedded/result,js,html,css/

I changed the process and the glideTo function.

 

    glideTo: function(index) {
        if (this.index < index) this.isback = false; if (this.index > index) this.isback = true;
        this.index = index;
        this.aniFx.start(this.aniFx.get(), index * -this.foc);
        if (this.cap) this.cap.set('html', this.getCurrent().title);
    },
    process: function(x) {
        var z, W, H, zI = this.iL,
            foc = this.foc,
            f = this.factor,
            sz = this.sz,
            oW = this.oW,
            offY = this.offY,
            div, elh, elw,
            isback = this.isback;

            this.master.images.each(function(el) {
                div = el.div.style;
                elw = el.width;
                elh = el.height;
                if (x > -foc * 6 && x < foc * 6) {
                    with(Math) {
                        z = sqrt(10000 + x * x) + 100;
                        H = round((elh / elw * f) / z * sz);
                        W = round(elw * H / elh);
                        if (H >= elw * 0.5) {
                            W = round(f / z * sz);
                        }
                        div.left = round(((x / z * sz) + sz) - (f * 0.5) / z * sz) + 'px';
                        div.top = round(oW * 0.4 - H) + offY + 'px';
                    }
                    el.con.style.height = H * 2 + 'px';
                    div.width = W + 'px';
                    if (isback==true)
                        div.zIndex = x <= -foc ? zI++ : zI--;
                    else
                        div.zIndex = x < 0 ? zI++ : zI--;
                    div.display = 'block';
                } else {
                    div.display = 'none';
                }
                x += foc;
            });
    }
Posted in MooTools

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

More aboute me
Give me a +


donate my work ♥ → paypal