[Javascript] Aggiungere link alle foto.

[ACarty]

Ciao a tutti,

Scusate la banalità della domanda, ma non mastico js e questo codice mi è proprio alieno...

                    callOnUpdate: function(items){
                        items.each(function(e, i){
                            // This is example code
                            var a = new Element("img[src=/public/images/"+counter+".jpg]");
                                a.inject(e.node).fade("hide").fade("in");
                            counter++;
                            // Reset counter
                            if( counter > maxLength ) counter = 1;

Quello che vorrei fare è aggiungere un link alla foto caricata....

Grazie, ciao.

 

[criric]

Ciao, prima di incrementare il counter prova cosi

a.onclick=function(){
    location.href="https://www.mrw.it/";
}

 

[ACarty]

Grazie Criric per la risposta.

Funziona, ma in parte.
Lo so che così è un po' difficile capire il problema.

Trattasi di una schermata con foto che si sposta in tutte le direzioni col mouse mostrando sempre foto diverse...
Quindi.... col tuo codice, quando scrollo e rilascio, mi carica una foto a caso (sempre diversa)... (invece, non dovrebbe fare niente se scrollo).
Se, invece, non scrollo e clicco su qualsiasi foto, mi mostra sempre la stessa....

Il codice l'ho messo prima di counter++

Grazie ancora per la disponibilità...

Ciao.

 

[criric]

il codice che ti ho scritto assegna una funzione al click sull'immagine caricata non influsce sullo scroll

 

[ACarty]

Avevo intuito, ma provandolo funzione come ti ho descritto...

Ho inserito il codice come mi hai detto:

window.addEvent("domready", function(){
    var maxLength = 1000; // Max Number images or array length
    var counter   = 1;
    var wall = new Wall("wall", {
                    "width":150,
                    "height":150,
                    "rangex":[-100,100],
                    "rangey":[-100,100],
                    callOnUpdate: function(items){
                        items.each(function(e, i){
                            // This is example code
                            var a = new Element("img[src=/public/images/"+counter+".jpg]");
                                a.inject(e.node).fade("hide").fade("in");

                            a.onclick=function(){
                                location.href="/public/images/"+counter+".jpg";
                            }
                          
                            counter++;

                            // Reset counter
                            if( counter > maxLength ) counter = 1;
                        })
                    }
                });
    // Init Wall
    wall.initWall();
});

Quando scrollo il blocco di immagini e rilascio il mouse, viene mostrata una foto a caso.
Se clicco su una qualsiasi immagine, invece, mi mostra sempre la stessa...

 

[criric]

bisognerebbe leggere la documentazione del plugin che stai usando, guarda se è questo
c'è un esempio per inserire l'evento click

                 a.addEvent("click", function(e){
                                    // Get Movement
                                    if( wall.getMovement() ){
                                        //... (move) your action
                                    }else{
                                        //... (no move) your action
                                    }
                                })

 

[ACarty]

Sì, sì... proprio quello... bravo!

Quindi, il tuo codice lo metto nella parte "else"?

 

[ACarty]

Ho provato a modificare il codice, ma non funziona....
Ecco il codice completo...

window.addEvent("domready", function(){
    var maxLength = 1000; // Max Number images or array length
    var counter   = 1;

var wall = new Wall("wall", {
                    "width":150,
                    "height":150,
                    "rangex":[-100,100],
                    "rangey":[-100,100],
                    callOnUpdate: function(items){
                        items.each(function(e, i){
                            var a = new Element("div");
                                a.set("html", "click me" );
                                a.inject(e.node);
                                // Behaviour on click
                                a.addEvent("click", function(e){
                                    // Get Movement
                                    if( wall.getMovement() ){
                                      
                                        var a = new Element("img[src=/public/images/"+counter+".jpg]");
                                            a.inject(e.node).fade("hide").fade("in");
          
                                        a.onclick=function(){
                                            location.href="/public/images/"+counter+".jpg";
                                        }
                                      
                                        counter++;
          
                                        // Reset counter
                                        if( counter > maxLength ) counter = 1;
                                      
                                    }else{

                                        a.onclick=function(){
                                            location.href="/public/images/"+counter+".jpg";
                                        }
              
                                    }
                                })
                        }.bind( this ))
                    }.bind( this )
                });

    wall.initWall();
});

Adesso non carica più neanche le foto... si vedono solo le label "click me"...

 

[criric]

penso che dovrebbe andare cosi

window.addEvent("domready", function () {
        var maxLength = 1000; // Max Number images or array length
        var counter = 1;
        var wall = new Wall("wall", {
            "width": 150,
            "height": 150,
            "rangex": [-100, 100],
            "rangey": [-100, 100],
            callOnUpdate: function (items) {
                items.each(function (e, i) {
                    // This is example code
                    var a = new Element("img[src=/public/images/" + counter + ".jpg]");
                    a.inject(e.node).fade("hide").fade("in");
                    a.addEvent("click", function (e) {
                        // Get Movement
                        if (wall.getMovement()) {
                            //... (move) your action
                        } else {
                            location.href = "/public/images/" + counter + ".jpg";
                        }
                    })
                    counter++;

                    // Reset counter
                    if (counter > maxLength)
                        counter = 1;
                })
            }
        });
        // Init Wall
        wall.initWall();
    });

 

[ACarty]

Non funziona bene...

Ecco il link di prova:
http://www.soverato.com/plasm-the-wall-f8de4cc/demos/01-wall.html

Grazie.

 

[criric]

sbaglia a richiamare l'immagine mi pare. Provo a scaricarmi l'intero codice e provo.

 

[ACarty]

Sì, infatti...

Grazie...

 

[criric]

cambia
location.href = "/public/images/" + counter + ".jpg";
con
location.href = this.src;

 

[ACarty]

Ciao criric,

Purtroppo ancora non va bene.

Ti ho inviato un mp.

Grazie.

 

[criric]

non c'è la modifica che ti ho indicato nel link che hai postato. Sicuro di aver aggiornato ?

 

[ACarty]

Online sì..

Il codice modificato è:

                        if (wall.getMovement()) {
                            //... (move) your action
                        } else {
                            location.href = this.src;
                        }
                    })
                    counter++;

Quello che ti ho inviato è l'originale...

 

[criric]

non l'ha presa la modifica questo è quello che vedo attualmente
view-source:http://www.soverato.com/plasm-the-wall-f8de4cc/demos/assets/javascript/01-wall.js

 

[ACarty]

Sììììì...Funziona!

Avevo uploadato il file sbagliato!

Bravo...! Grazie !!!

Ti posso chiedere un altro favore??
Hai tutto il codice....
Mi potresti dire come cambiare l'icona del cursore? ....
Attualmente è a croce. Lo vorrei a manina...
Ho provato... ma non ci sono riuscito...

Grazie ancora!!!

 

[criric]

aggiungi cursor: pointer al css

#wall{
     cursor:pointer !important;
     z-index:1;
}

 

[ACarty]

Perfetto !!

Ti ringrazio tantissimo per il tuo prezioso aiuto e per l'ottimo Forum !

Se (anzi, quando) avrò bisogno ancora di aiuto, saprò su chi contare...

Grazie ancora e un saluto a tutti....