[Javascript] Aggiungere link alle foto.

ACarty

Nuovo Utente
27 Giu 2016
11
1
3
53
Ciao a tutti,

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

Codice:
                    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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, prima di incrementare il counter prova cosi
Codice:
a.onclick=function(){
    location.href="http://www.mrwebmaster.it/";
}
 

ACarty

Nuovo Utente
27 Giu 2016
11
1
3
53
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
il codice che ti ho scritto assegna una funzione al click sull'immagine caricata non influsce sullo scroll
 

ACarty

Nuovo Utente
27 Giu 2016
11
1
3
53
Avevo intuito, ma provandolo funzione come ti ho descritto...

Ho inserito il codice come mi hai detto:

Codice:
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
bisognerebbe leggere la documentazione del plugin che stai usando, guarda se è questo
c'è un esempio per inserire l'evento click
Codice:
                 a.addEvent("click", function(e){
                                    // Get Movement
                                    if( wall.getMovement() ){
                                        //... (move) your action
                                    }else{
                                        //... (no move) your action
                                    }
                                })
 

ACarty

Nuovo Utente
27 Giu 2016
11
1
3
53
Sì, sì... proprio quello... bravo!

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

ACarty

Nuovo Utente
27 Giu 2016
11
1
3
53
Ho provato a modificare il codice, ma non funziona....
Ecco il codice completo...

Codice:
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
penso che dovrebbe andare cosi
Codice:
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();
    });
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
sbaglia a richiamare l'immagine mi pare. Provo a scaricarmi l'intero codice e provo.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
cambia
location.href = "/public/images/" + counter + ".jpg";
con
location.href = this.src;
 

ACarty

Nuovo Utente
27 Giu 2016
11
1
3
53
Ciao criric,

Purtroppo ancora non va bene.

Ti ho inviato un mp.

Grazie.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
non c'è la modifica che ti ho indicato nel link che hai postato. Sicuro di aver aggiornato ?
 

ACarty

Nuovo Utente
27 Giu 2016
11
1
3
53
Online sì..

Il codice modificato è:
Codice:
                        if (wall.getMovement()) {
                            //... (move) your action
                        } else {
                            location.href = this.src;
                        }
                    })
                    counter++;
Quello che ti ho inviato è l'originale...
 

ACarty

Nuovo Utente
27 Giu 2016
11
1
3
53
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
aggiungi cursor: pointer al css
Codice:
#wall{
     cursor:pointer !important;
     z-index:1;
}
 

ACarty

Nuovo Utente
27 Giu 2016
11
1
3
53
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....
 
  • Like
Reactions: criric