[Javascript] Aggiungere link alle foto.

ACarty

Nuovo Utente
27 Giu 2016
11
1
3
54
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="https://www.mrw.it/";
}
 

ACarty

Nuovo Utente
27 Giu 2016
11
1
3
54
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
54
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
54
Sì, sì... proprio quello... bravo!

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

ACarty

Nuovo Utente
27 Giu 2016
11
1
3
54
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
54
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
54
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
54
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
54
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
Discussioni simili
Autore Titolo Forum Risposte Data
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
M [javascript] Aggiungere eventi al caricamento Javascript 0
G [Javascript] aggiungere sub-namespace Javascript 0
G [RISOLTO][Javascript] aggiungere elemento ad array definito nella finestra madre da popup Javascript 4
L [Javascript] Aggiungere una riga ad una tabella Javascript 5
asevenx [Javascript] aggiungere righe con select da database e calcolo sconto in automatico Javascript 0
Monital [Javascript] decidere dove aggiungere il campo dinamicamente Javascript 1
asevenx [Javascript] aggiungere dinamicamente un campo di un form Javascript 3
P Tabella Dinamica in javascript (aggiungere righe con textinput) Javascript 1
D Aggiungere javascript a div Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 0
F Creare elementi html con javascript Javascript 2
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
P Passaggio id php a javascript PHP 6
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 19
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5
alexice51 proggrammi per scrivere in javascript? Javascript 3
max1974 [Javascript] Accordion aria-exspanded Javascript 0
D [Javascript] salvare immagine canvas - paypal Javascript 0
O [Javascript] Conflitto Jquery: forse... Javascript 0
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
G [Javascript] Errore inserimento dati Backend Node.js e workbench Javascript 1

Discussioni simili