Galleria a schermo intero 
Author: Antonio L.Buogiorno,
avrei una domanda alla quale non ho potuto rispondere da solo:
Ho creato una galleria (con l'opzione espandi) che vorrei partisse automaticamente in schermo intero e senza miniature (ma non saprei come eliminarle) selezionando Schermo intero e Avvio automatico.
La galleria (https://www.teatrodellecontrade.ch/25-.html) può essere visualizzata manualmente (non si apre automaticamente) in schermo intero ma si arresta sulla foto visualizzata (che è centrale e non occupa tutto lo schermo, ma questo è accettabile), la presentazione automatica (avanzo automatico) non é possibile e posso solo avanzare o indietreggiare manualmente tra le foto con i comandi di avanzamento e ritorno.
Potete dirmi se è possibile farlo e come?
Grazie, saluti, Antonio
visto che hai una versione delle ultime, se vuoi solo l'immagine che scorre dopo un tot di secondi e senza le miniature sotto, potresti utilizzare l'oggetto content slider, le immagini però devono avere la dimensione congrua al tipo di device, se vuoi visualizzare le immagini in HD dovranno avere le dimensioni di 1920px.
Spero d'avere capito la tua esigenza, saluti Giancarlo.
Author
Grazie Giancarlo,
La galleria dovrebbe contenere 159 elementi e vorrei riprodurli in ordine casuale con effetti di transizione.
Con content slider introdurre così tanti elementi, da quel che so, è un'impresa e non mi sembra si possano riprodurre casualmente né introdurre effetti di transizione.
Per questo pensavo di utlizzare l'oggetto galleria.
Se conosci un altro oggetto, anche a pagamento per ottenere questo risultato, mi interessa.
Saluti, Antonio
Ciao Antonio, se vuoi rimanere con l'oggetto galleria puoi utilizzare quello tranquillamente, basta utilizzare immagini opportunamente ridimensionare e settare correttamente l'oggetto.
Author
Io ho configurato lo stile così:
Ma non appena vado in visaualizzazione schermo intero, la presentazione si ferma sulla foto visualizzata.
Sono riuscito a fare qualcosa di accettabile non applicando il modello alla pagina della galleria e mettendo a schermo intero il browser con F11.
Ma non ho ancora trovato la soluzione ideale.
non ho capito cosa intendi "Ma non appena vado in visualizzazione schermo intero"
hai esteso l'oggetto?
le immagini sono 1920px?
... non può svilupparsi bene a tutta larghezza la presentazione del link che è stato postato, essendo state mischiate immagini orizzontali e verticali; ... alla base di una buona presentazione a tutta larghezza le immagini dovrebbero essere congrue tra loro...
.
@Antonio, scusa ma sinceramente la vedo un po' pesantuccia e poco funzionale una gallery con 159 immagini...
Io in quei casi (anche se al massimo con un 20-30 immagini, raramente di più) preferisco sfruttare la Masonry che anche con immagini differenti, anzi, proprio con immagini di dimensioni differenti, fa una gran bella figura...
Poi cliccando si vedono le immagini a schermo intero (senza avvio automatico) .. per chi è interessato... tanto più con il tipo di template che stai usando sul tuo sito... che non è a tutto schermo ma dimensionato in una colonna.
così per capirci... poi vedi tu...
Author
Grazie a tutti per il supporto, per rispondere ai vari intervenuti:
Comunque la soluzione di non applicare il modello alla pagina della galleria e mettere il browser a schermo intero sembra convenire al cliente, per cui vi rigrazio ancora e chiudo il post.
Saluti, Antonio
... Quella che si vede adesso non mi pare a tutta larghezza....
... Personalmente preferirei la dissolvenza incrociata...
Author
In effetti è prevista tutta in altezza in modo che le foto abbiano tutte la stessa altezza. Anche a me non piacevano le transizioni che ora sono in scorrimento orizzontale accelerato, e lo sfondo è ora nero.
... ho controllato, ok, va già molto meglio...
Author
Grazie!
Ci sarebbero ancora le barre di scorrimento che mi piacerebbe eliminare, non so se sono dovute al fatto che le immagini sono ancora troppo grandi o se sono dovute al browser. Forse provo ancora a ridurre le immagini al 90%.
... dipende dai breakpoint; per esempio con monitor 1280 pixel vedrai la barra scroll orizzontale perchè la soglia impostata è a 1279 pixel...
...
... prima avevi parlato di immagini random; ...a titolo informativo, non so se ti possa interessare, ma con un mia esclusiva invenzione EXTRA di 15 anni fa, da me ideata per alleggerire e non aftaicare il progetto e la pagina online, si potrebbero far girare in modo random o sequenziali, centinai di immagini in modalità css COVER con o senza dissolvenza incrociata...
.
ciao
.
Author
Grazie, ho trovato la soluzione impostando le dimensioni massime nello stile, riducendo da 1080 a 1040 le barre di scroll spariscono per una risoluzione di 1920 x 1080 del monitor, quindi così è perfetto per l'uso che vogliamo farne.
In ogni caso la tua invenzione EXTRA potrebbe essere molto interessante, dimmi come fare per utilizzarla.
... OK ... basta incollare questo mio codice (qui nella foma di base) in un Oggetto Codice HTML...
... devi peronalizzare l'estenzione e l'ubicazione delle immagini, adesso in root ed in ".png"...
<img id="img_K2" src="1.png" style="position:absolute;top:0px;left:0px" width="100%" />
<img id="img_K1" src="1.png" style="position:absolute;top:0px;left:0px" width="100%" />
<script>
/** --- codice sequenza immagini random esclusivo by KolAsim --- **/
/** --- per libreria jQuery --- **/
// --- sezione personalizzabile======================
totImgK=12; // totale numero immagini; (per per esempio 100; per immagini numerate: 1 > 100)
intervalloK=3; // intervallo sequenza immagini
dissolvenzaK = 1.5 // tempo in secondi per dissolvenza immagini, (!) inferiore a intervalloK (!)
imgK = ""; // radice nome immagine ; (per per esempio "pippo"; per immagini numerate: pippo0 > pippo100)
estensioneK=".png" // estensione del tipo di file immagine, per esempio: ".jpg"; ".png"; ".webp"
//==========================================
// --- sezione fissa, ...non alterare ======================
indiceK1=1;
indiceK2=0;
indiceK3=0;
randomK=0;
setInterval(function(){ //K1>
randomK = Math.floor(Math.random() * totImgK)+1;
indiceK1=randomK;
$("#img_K2").attr("src", imgK+indiceK2+estensioneK);
$("#img_K1").attr("src", imgK+indiceK1+estensioneK).fadeOut(0);
if (indiceK1<=totImgK){ //K2>
indiceK1++;
$("#img_K1").fadeIn(dissolvenzaK*1000);
indiceK2=randomK} //K1<<
else { //K2>
indiceK1=1;
} //K2<<
},intervalloK*1000); //K1<<
//--- fine --- K --------
</script>
.
Author
Grazie per la tua preziosa informazione, sicuramente mi tornerà utile per qualche progetto.
... OK ...quando e se proverai, e nel caso necessitassero chiarimenti o aggiustamenti, apri un nuovo Argomento postando anche il link del tuo esempio...
.
ciao
.