Eventi e oggetti nella Galleria immagini 
Autore: Franco P.Un saluto a chi legge.
Possiedo la X5 pro e dovrei realizzare un progetto di una pagina dove è presente una galleria immagini con le miniature (thumbnails) sotto l'immagine ingradita.
Tipo questo: https://www.jqueryscript.net/slider/Basic-jQuery-Based-Image-Carousel-Slider-with-Thumbnail-Navigation.html
Per varie ragioni non volevo usare componenti terzi, quindi sono riuscito a fare tutto con il componente Galleria immagini di X5, ma ci sono due cose che non riesco a risolvere:
1) avrei bisogno che l'immagine ingrandita (quella visibile nel box superiore della galleria) sia cliccabile il seguito lo so realizzare, ma non riesco ad inserire del codice JS funzionante, in quanto non riesco ad intercettare i singoli oggetti della galleria (sono senza id o una classe apparentemente) e quindi non riesco a fare riferimento ad uno di essi. Se faccio riferimento all'oggetto galleria in generale, l'evento onclick varrebbe per ogni punto (anche le miniature, per esempio) e non voglio questo, anche perché cliccando su una miniatura, c'è già un evento associato in automatico, che apre l'immagine ingrandita nel box superiore.
2) Vorrei che il thumbnail corrente (quello di cui si vede l'immagine ingradita nel box superiore) sia evidenziato (con un bordo o in altro modo), ma anche per questo, non riesco a indentificare l'oggetto e cambiargli lo stile.
Ringrazio anticipatamente chiunque voglia dare dei suggerimenti in merito.
Se riuscirò a risolvere questi due punti, pubblicherò il codice, nel caso possa interessare ad altri.
Purtroppo al momento non ho pubblicato ancora niente, perché sto sviluppando e cercando di risolvere la cosa solo in locale sul mio PC, quindi non ho nulla da far vedere, ma credo di aver reso l'idea, anche perchè l'oggetto galleria è uno degli oggetti standardi di X5.
...se vuoi essere aiutato, visto che si tratta di codici extra, per facilitare chi vorrà aiutarti , ti consiglio invece, di pubblicare online una pagina di prova con la galleria e di mettere qui il link ...
Autore
Grazie per la risposta.
Non credo che pubblicare la pagina possa essere d'aiuto, in quanto si tratta semplicemente di una pagina che sto testando, dove c'è solo l'oggetto galleria e quindi non contiene strutture o codice extra.
Comunque ho pubblicato un minisito di prova e la pagina con la galleria è la seguente:
http://www.xtestare.byethost9.com/lessons.html
Cliccando sull'immagine grande (quella sopra le miniature), si va alla pagina courses.html, ma vorrei inserire del codice JS (richiamare una funzione), prima di passare alla pagina courses.html (per esempio sapere da che immagine si arriva alla pagina courses).
Purtroppo non riesco ad intercettare l'evento "on click" dell'immagine grande, ma solo quello di tutto l'oggetto galleria, con la coseguenza che anche cliccando su una miniatura viene eseguito il mio codice JS, mentre vorrei che fosse eseguito solo se si clicca sull'immagine grande e non su qualunque parte dell'oggetto galleria.
Spero di essere stato esauriente nella mia spiegazione.
Buongiorno Franco
Purtroppo lo Staff ufficiale non può fornire supporto per l'integrazione di codici esterni, quindi il mio supporto qui è estremamente limitato
Tuttavia, lascerò il topic aperto così che altri utenti possano unirsi alla discussione e darti una mano
Resto a disposizione in caso di altri dubbi
Stefano
Autore
Grazie Stefano, capisco che dare aiuto su codici esterni non è possibile da parte dello staff, ma io confidavo in qualche utente.
Comunque posso spiegare in modo più semplice ancora il mio problema.
L'oggetto galleria permette di associare un evento sul click della foto principale (quella più grande, nel caso si scelga la visualizzazione "galleria orizzontale").
Come evento scelgo di essere indirizzati su un'altra pagina del sito e fin qui tutto funziona. (Come anche visibile nell'esempio che ho pubblicato).
Vorrei però che nella pagina di arrivo (dopo aver cliccato) possa capire da che immagine arrivi (la prima, la seconda, la terza...?), perché a seconda dell'immagine scelta vengono visualizzati dei contenuti diversi.
Ora non so se questo sia possibile farlo senza codici esterni, ma mi sembra strano che il click sia molto personalizzabile in X5 (allego immagine), ma non sia possibile identificare quale immagine sia stata cliccata.
A me servirebbe capire qual è l'immagine cliccata (numero o nome).
... ho dato una veloce occhiata al LINK...
... forse, e ripeto forse(!) e secondo me, sarebbe meglio togliere il collegamento sull'immagine...
... domani in giornata se avrò tempo vedrò di approfondire direttamente online, ...comunque a grandi linee immagino che si potrebbe rilevare al click il nome dell'immagine con una delle mie invenzioni...
...
... intanto altri esperti del Programma potrebbero farsi avanti, magari proponendo qualche alternativa al codice EXTRA, se possibile, gestendo gli eventi in modo diverso con le opzioni stesse del Programma....
...
.
ciao
.
Autore
Grazie infinte per la risposta KolAsim!
Confidavo in un tuo intervento, anche se non ci speravo.
Nella mia versione locale infatti il link sull'immagine non c'è e volevo appunto fare in modo che sull'evento onclick dell'immagine mi mandi su un'altra pagina, dove però possa sapere quale sia l'immagine cliccata sull'altra pagina e, in base a quello, mostrare del contenuto diverso per ciascuna immagine.
Lo schema è il seguente:
- pagina 1 con la galleria
- clicco su un'immagine della galleria (diciamo la terza) e mi rimanda alla pagina 2
- nella pagina 2, sapendo che avevo cliccato sulla terza immagine, mostro un contenuto abbinato a quella
Purtroppo l'immagine non ha un id, nè un altro modo per poterla identificare come oggetto.
Ho provato a mettere il link ed ho notato che c'è una funzione "x5engine.utils.location" che apre il link all'altra pagina, ma non so che parametri accetti e possa passare all'altra pagina, così al momento sono fermo.
... vedo che non hai eliminato il collegamento, quindi alla mia invenzione ho applicato un ulteriore mio escamotage per inibire il collegamento attivo...
... con questo mio codice si ottiene il rilevamento del nome immagine, sia sulle anteprime che sull'immagine ingrandita, ...con avviso ALERT per il test (da escludere poi), ... e la messa in evidenza dell'anteprima se cliccata...
... se la pagina risultasse lenta nel caricarsi online, potrebbe essere necessario applicare al codice un ritardo di qualche secondo, da valutare...
... se servissero chiarimenti, ...avvisami...
... il codice va incollato nella sezione Esperto | Codice personalizzato | 3^ opzione > /HEAD
<script>
/** controllo EXTRA galleria by KolAsim **/
$( document ).ready(function() {//K>;
cont_imgK=$( "#imObjectGallery_17_01 div:nth-child(1)> div:nth-child(1) ");
antK=$( "#imObjectGallery_17_01 div > div > div img");
divK=' <div id="divK" style="position:absolute;top:0px;left:0px;width:100%;height:100%;"> </div>';
$(cont_imgK).append(divK);
$("#divK").click(function(){//K1>;
imgK=$( "#imObjectGallery_17_01 div:nth-child(1)> div:nth-child(1) img");
srcK=$(imgK).attr('src');
alert(srcK);
alert("qui inserire le funzioni di collegamento e passaggio variabili"); // solo per TEST; eliminare ALERT
//qui inserire le funzioni controllo o di collegamento e passaggio variabili
//location.href="http://www.xtestare.byethost9.com/courses.html?"+ srcK;
})//K1<<;
$(antK).click( function() {//K2>:
alert( $(this).attr('src')) ; // solo per TEST; eliminare ALERT
$(antK).css('background', "transparent");$(this).css('background', "blue")
});//K2<<;
});//K<<;
</script>
... per lanciare il collegamento abilita //location.href ... così >> location.href
ciao
.
Autore
Grazie per la risposta e il codice.
Non sapevo di dover eliminare il collegamento, mi dispiace.
Comunque ho provato ad inserire il codice copiato esattamente senza apportare modifiche, ma l'alert mi visualizza un valore "null".
Ho creato un'altra pagina "lezioni.html" dove non ci sono link attivi sull'immagine e ho copiato anche lì codice, ma abilitanto il location.href...
Purtroppo in questo modo non accade nulla sul click (non viene visualizzato l'alert) e non va alla pagina courses.html.
Però non conoscevo il selettore nth-child e mi sto documentando, perché è proprio quello che mi serviva per arrivare all'oggetto img.
Specifico che la soluzione non è per me, non è a scopo di lucro, ma per aiutare un insegnante, che sta progettando un sito a scopi didattici.
Comunque grazie infintamente KolAsim, cerco di studiare meglio il codice e di risolvere in qualche modo.
Se poi hai del tempo e vuoi capire come mai l'alert ritorna un null, te ne sarò grato.
... non l'ho visto applicato, ma, se a te il codice non ti funziona, potrebbe dipendere da quello che ti avevo detto prima:
>>[... se la pagina risultasse lenta nel caricarsi online, potrebbe essere necessario applicare al codice un ritardo di qualche secondo, da valutare...]<<
... quindi prova con questa mia variante cui ho applicato un ritardo di 6 (sei) secondi, da valutare di quanto sia possibile diminuire o meno:
<script>
/** controllo EXTRA galleria by KolAsim **/
$( document ).ready(function() {//K>;
ritardoK = 6; // nr. di secondi di ritarfo, da valutare;<==K==
setTimeout(function(){ //K1>;
cont_imgK=$( "#imObjectGallery_17_01 div:nth-child(1) > div:nth-child(1) ");
antK=$( "#imObjectGallery_17_01 div > div > div img");
divK=' <div id="divK" style="position:absolute;top:0px;left:0px;width:100%;height:100%;"> </div>';
$(cont_imgK).append(divK);
$("#divK").click(function(){//K2>;
imgK=$( "#imObjectGallery_17_01 div:nth-child(1) > div:nth-child(1) img");
srcK=$(imgK).attr('src');
alert(srcK); // solo per TEST; eliminare ALERT <=====K=====
//qui inserire le funzioni controllo o di collegamento e passaggio variabili
location.href="http://www.xtestare.byethost9.com/courses.html?"+ srcK;
})//K2<<;
$(antK).click( function() {//K3>:
alert( $(this).attr('src')) ; // solo per TEST; eliminare ALERT <=====K=====
$(antK).css('background', "transparent");$(this).css('background', "blue")
});//K3<<;
}, ritardoK * 1000); //K1<<;
});//K<<;
</script>
.
Autore
Aggiornamento della situazione.
Grazie infinitamente a KolAsim, che mi ha fornito il codice e aperto le idee su varie modifiche.
Ora la pagina funziona come immaginavo, ma ho disabilitato il click da codice sulle miniature, perché va bene che quando si clicca su quelle, si visualizza l'immagine corrispondente ingrandita nel riquadro.
Ho fatto il modo che il click non fosse su tutta la galleria, ma solo sull'immagine ingrandita, come desideravo.
Ho cambiato le immagini, sostituendole con alcune di esempio più adatte all'idea che intendiamo realizzare.
Nella pagina della galleria, cliccando sull'immagine grande, si va su una pagina, dove vengono visualizzate informazioni appropriate all'immagine scelta. Si viene mandati sulla pagina COURSES, che ha sempre la medesima struttura per tutte le materie, ma parte del suo contenuto è dinamico e dipende dalla materia scelta nella pagina di provenienza (LESSONS.html).
Tutto funziona al momento (non è pubblicato online tutto il progetto, quindi la pagina LESSONS non visualizza contenuti diversi per ora), ma solo perché i nomi delle immagini della galleria sono mantenuti (Storia.jpg, matematica.jpg, ecc.). Ma, facendo prove in locale, ho notato che in fase di pubblicazione Website X5 può alterare i nomi delle immagini, assegnando loro un nuovo nome. Pertanto è molto poco stabile come soluzione quella di basarsi sul nome del file. L'idea del progetto è ancora in fase di sviluppo ed è un po' complicata da spiegare. Se qualcuno si chiede perché non si usa un semplice menu, invece di fare tutto questo, dico che il menu è già dedicato ad altro e l'idea qui è stata semplificata, ma in questo modo grafico si possono realizzare cose che col menu non è possibile fare.
Mi piacerebbe (come d'altronde era la mia idea iniziale), sapere l'immagine grande a che thumbnail appartiene (la 1, 2, 3, 4...) così indentifico subito la materia da un numero progressivo (1 = arte, 2 = geografia...) e so che quell'ordine non cambia. Sarebbe pure carino evidenziare la thumbnail attiva in qualche modo (con un bordo, opacità o altro), ma al momento non ci sono riuscito in modo semplice.
Ho notato che ci sono funzioni ed eventi associato all'oggetto imObjectGallery..., ma non ho trovato documentazione in merito, peccato!
Per esempio x5engine.utils.(...) o imObjectGallery_17_01_(...)
Sarebbe stato comodo poter sfruttare routine già presenti all'interno di Website X5, senza doversi scervellare con codice esterno, complicato e affidabile fino ad un certo punto.
Comunque rinnovo i miei ringraziamenti a KolAsim. GRAZIE!
... per il resto, come hai visto puoi manipolare a tuo piacere e questo scopo è stato raggiunto, potendo quindi condizionare le variabili a tuo piacere per i più disparati scopi e formati, (nomi, numeri, ecc.)...
... come idea alternativa, prova anche a valutare lo Stile Schede dell'Oggetto Testo...
.
ciao, e buon proseguimento...
.
Autore
Grazie!