• L
    User •

    Grazie per l'interessamento al mio problema.

    al momento ho:
    <body onload="init()">

    e questo mi fa partire in qualche modo lo script perché le immagini si dispongono per come devono apparire ma poi la rotazione di queste avviene solo cliccando le frecce mentre il cliente chiede se sia possibile far partire subito anche suddetta rotazione.

    @vnt54: forse non vedi il codice perché non sei andato nella sottocartella: pasubio2/prova/

    sapete darmi qualche suggerimento?
    Grazie, Livia

    0
  • V
    User Attivo •

    Intendevo lo script che hai fatto,in altre parole posta il codice.
    :fumato:

    0
  • L
    User •

    Questo è il codice principale. Poi c'è anche un effect.js e un prototype.js.
    Se serve posto anche quelli. Grazie

    
Showcase = Class.create(Abstract, {
    initialize: function (sections, controls, options) {
    
        this.allSections     = this.sections = sections;
        this.controls         = controls;    
        
        this.options = Object.extend({
            ratio:                     0.5,
            initialDelay:             1,
            duration:                 0.5,            
            size:                    this.sections.size()
            }, options || {});
            
        this.running         = false;
        this.queue            = new Array;
        
        this.computeMetrics();    
        
        this.sections = this.allSections.slice(this.currentIndex - this.half, this.currentIndex + this.half + 1);
        
        this.allSections.each((function (section, index) {
            section.setStyle({position: 'absolute', zIndex: Math.abs(index - this.sections.size()), left: '50%', top: '50%', marginLeft: -Math.round(section.getWidth() / 2) + 'px', marginTop: -Math.round(section.getHeight() / 2) + 'px'}).initialIndex = index;            
            
            section.observe('click', this.jump.bind(this)).observe('mouseover', function (event) {
                section.setOpacity(1);
                }).observe('mouseout', function () {
                    section.setOpacity(section.opacity);
                    }).opacity = 1;
                    
            if (!this.sections.member(section)) {
                this.queue.push(section.hide());
                }
            }).bind(this));
        
        for (i = 0; i <= this.half; i++) {
            this.sections.push(this.sections.shift());
            }
            
        this.controls.invoke('observe', 'click', this.click.bind(this));            
        (this.animate.bind(this)).delay(this.options.initialDelay);
        },

    computeMetrics: function () {
        this.half             = this.currentIndex = (this.options.size - 1) / 2;        
        this.ratioStep         = Math.round(((1 - this.options.ratio) / this.currentIndex) * 100) / 100;
        this.positionStep     = Math.round(50 / this.half * 100) / 100;        
        this.maxDimensions     = this.sections.first().getDimensions();
        },
        
    click: function (event) {
        event.stop();
        var element = event.findElement('a');
        if (!this.running) {
            eval("this." + element.rel + "()");
            }        
        this.animate(element.rel);
        },
        
    previous: function () {
        if (this.options.size < this.allSections.size()) {
            var sectionIn     = this.queue.shift();
            var sectionOut     = this.sections.pop();        
        
            this.sections.unshift(sectionIn);
            this.queue.push(sectionOut.fade({duration: this.options.duration}));
            } else {
                this.sections.unshift(this.sections.pop());
                }
        },
    
    next: function () {        
        if (this.options.size < this.allSections.size()) {            
            var sectionIn     = this.queue.shift();
            var sectionOut     = this.sections.shift();
        
            this.sections.push(sectionIn);
            this.queue.push(sectionOut.fade({duration: this.options.duration}));
            } else {
                this.sections.push(this.sections.shift());
                }
        },
    
    jump: function (event) {
        event.stop();
        
        if (!this.running) {
            var section = this.sections[this.sections.indexOf(event.findElement('li'))];
            
            var direction = '';
            
            if (section.index < this.half) {
                (this.half - section.index).times((function () {                
                    this.previous();
                    }).bind(this));
                direction = 'previous';
                } else if (section.index == this.half) {
                    } else {
                        (section.index - this.half).times((function () {
                            this.next();
                            }).bind(this));
                        direction = 'next';
                        }
            }
        
        this.animate(direction);
        },
    
    runEffects: function () {
        
        this.stackSections.bind(this).delay(this.options.duration / 2);
    
        this.running = new Effect.Parallel(
            this.effects.map(function (effect) {
                return new Effect.Parallel([
                    new Effect.Morph(effect.section, {
                        style: effect.style,
                        sync: true,
                        delay: 1,
                        transition: Effect.Transitions.linear
                        }),
                    new Effect.Appear(effect.section, {
                        to: Math.min(effect.section.ratio, 1),
                        sync: true
                        })
                    ], {
                        sync: true,
                        beforeStart: function () {                            
                            }
                        });
                }), {
                    duration: this.options.duration,
                    afterFinish: (function () {
                        this.running = false;                    
                        }).bind(this)
                    });
        },
        
    stackSections: function () {
        this.sections.each(function (section) {
            section.setStyle({zIndex: section.stackIndex});
            });
        },
        
    indexSections: function () {    
        this.sections.each((function (section, index) {
            section.index             = index;
            section.modifier         = Math.abs(Math.abs((section.index - (this.sections.size() - 1) / 2)) - this.half);
            
            section.ratio             = Math.round(((section.modifier * this.ratioStep) + this.options.ratio) * 100) / 100;            
                        
            section.width             = Math.min(Math.round(this.maxDimensions.width * section.ratio), this.maxDimensions.width);
            section.height             = Math.min(Math.round(this.maxDimensions.height * section.ratio), this.maxDimensions.height);        
            
            section.positionIndex     = (section.index - (this.sections.size() - 1) / 2);
            section.stackIndex         = Math.abs(Math.abs((section.index - (this.sections.size() - 1) / 2)) - this.half) + 1;                    
            
            section.left             = section.top = Math.round((this.half + section.positionIndex) * this.positionStep);
            section.opacity            = Math.min(section.ratio, 1);            
            }).bind(this));
        }    
});
    
Showcase.Horizontal = Class.create(Showcase, {
    
    animate: function (direction) {
        this.indexSections();
        
        this.effects = new Array();        
        this.sections.each((function (section) {
            var style = {
                left:         section.left + '%', 
                top:        '50%',
                marginTop:    -Math.abs(section.height / 2) + 'px',
                width:         section.width + 'px', 
                height:     section.height + 'px'
                };
            
            if (section.left == 0) {
                style.marginLeft = '0px';
                } else if (section.left == 50) {
                    style.marginLeft         = -Math.round(section.width / 2) + 'px';                    
                    } else if (section.left == 100) {
                        style.marginLeft     = -section.width + 'px';
                        } else {
                            style.marginLeft = -Math.round(section.width / 2) + 'px';
                            }
            
            this.effects.push({section: section, style: style});        
            }).bind(this));

        this.currentIndex = this.sections[this.half].initialIndex;            
        
        this.runEffects();
        }
    
    });
    0
  • B
    User •

    secondo me si risolve con setTimeout(), accetta tue paramentri, stringa contentente "l'azione" da fare (di solito una funzione, anche con relativi parametri) e i millisendo dopo i quali esegue l'azione.
    la funzione esegue una sola volta l'azione, la ritarda.
    quindo potresti fare una funzione ricorsiva, anche sfruttando initi()

    function init(){

    /*
    tutto quelle che la funzione gia fa....

    */

    ogniQuantiSecondi=5;
    setTimeout("init();", ogniQuantiSecondi*1000);
    } // EEND init()

    initi la continui a mettere nel onload di body e ogni "ogniQuantiSecondi" la funzione vienee richiamata.

    0
  • L
    User •

    Ciao! grazie dell'interessamento. Ho solo un problema... come ho detto ad inizio post non conosco il mondo javascript e ho difficoltà a tradurre quel che mi dici ❌x:x

    Lo so di chiedere troppo, ma ci provo...
    Non è che mi potresti inviare il codice modificato per come mi suggerisci?
    Thanks 💋💋💋

    0
  • B
    User •

    per me non ci sono problemi, mi dovresti dire almeno il sito in questione però...

    0
  • L
    User •

    il sito si chiama pasubio2.com e lo script "incriminato" lo trovi proprio in home appena accedi. Il cliente vorrebbe che la rotazione delle immagini partisse da subito. Grazie per l'aiuto, veramente!!
    Livia

    0
  • B
    User •

    ma le freccette devono continuare ad esserci e/o funzionare?!

    0
  • L
    User •

    effettivamente diventerebbero superflue, quindi forse sarebbero da eliminare...

    0
  • B
    User •

    problema risolto 😄

    ciao...

    0
Effettua l'accesso per rispondere