• 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


  • User Attivo

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


  • 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();
            }
        
        });
    
    

  • 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.


  • 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 💋💋💋


  • User

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


  • 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


  • User

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


  • User

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


  • User

    problema risolto 😄

    ciao...