Problema Gallery

[Bhios]

Ciao a tutti, è la prima volta che scrivo ma vi leggo sempre. oggi ho deciso di registrarmi e chiedere ufficialmente aiuto per un problema che non riesco a risolvere, sto realizzando un piccolo sito per un amico, premetto che sto utilizzando un template free che sto modificando (uso dreamweaver). Andiamo al problema, durante la visualizzazione delle immagini nel browser, lo stesso carica solo la prima immagine e non le altre ma se aggiorno la pagina ecco apparire tutte le immagini della pagina, rendo il sito pubblico per permettere a chi di voi vorrà aiutarmi di vedere il problema, davvero non riesco a capire il perchè.

(ovviamente sono pronto a fornirvi tutto il codice o quello che serve)

Sono qui da principiante e autodidatta (quindi siate buoni per piacere) e scusate la sporcizia nel codice ma sto ancora lavorandoci. Grazie a tutti.

http://www.fazzaricostruzioni.com

PS
scrivo in questa sezione dopo aver cercato invano negli altri post, sono quasi sicuro che il problema sia nel css ma non ne vengo a capo.

[Vincent.Zeno]

stia parlando della gallery carousel? quella subito dopo la testata?
io la vedo muoversi con due immagini, anche se l'intervallo di tempo per lo scorrimento è abbastanza irregolare.
il primo movimento avviane dopo circa 20-25 secondi...

[Bhios]

stia parlando della gallery carousel? quella subito dopo la testata?
io la vedo muoversi con due immagini, anche se l'intervallo di tempo per lo scorrimento è abbastanza irregolare.
il primo movimento avviane dopo circa 20-25 secondi...

Hai ragione non sOno stato chiaro, ho scritto di fretta. Provo a spiegarmi meglio. se vai alla pagina https://www.fazzaricostruzioni.com/p...20dattilo.html (o una qualunque pagina interna della sezione "realizzazioni")


noterai che in fondo c'è la sezione "fasi di lavorazione", quando carichi la pagina si vede una singola immagine se aggiorni vedi tutte e se le foto (Senza titolo-3.jpg non capisco perchè... mi sta facendo impazzire)

[KillerWorm]

Ciao e benvenuto

Risposta breve:

Nel tuo main.js cerca la configurazione di "isotope" è inseriscila dentro l'evento load di window in questo modo:

$(window).load(function(){
    // Portfolio isotope and filter
    var portfolioIsotope = $('.portfolio-container').isotope({
        itemSelector: '.portfolio-item',
        layoutMode: 'fitRows',
    });
    $('#portfolio-flters li').on('click', function () {
        $("#portfolio-flters li").removeClass('active');
        $(this).addClass('active');
        portfolioIsotope.isotope({filter: $(this).data('filter')});
    });
});

Risposta lunga:

Le cause del problema non sono propriamente CSS ma sono da ricercare piuttosto nello script (quindi JavaScript/jQuery) che gestisce il posizionamento degli elementi nel layout della pagina. Parliamo del plugin jQuery "isotope.js".

Giusto per capire, faccio un excursus di alcune nozioni di HTML.

Gli elementi IMG, essendo elementi il cui contenuto è caricato runtime come risorsa esterna, non hanno delle dimensioni iniziali nel layout della pagina (per cui il loro ingombro iniziale è 0) a meno che non siano esplicitamente indicate come attributi (width, height) nel tag <img> o attraverso le analoghe proprietà CSS.

Ora, se le dimensioni dell'immagine non sono indicate, normalmente gli elementi che seguono tale immagine vengono spostati per "lasciare spazio" all'immagine stessa non appena questa è disponibile e viene mostrata nella pagina. Le dimensioni nominali dell'immagine saranno quindi accessibili solo quando l'immagine risulta caricata.

Il plugin in questione si occupa di ordinare/posizionare gli elementi creando eventuali effetti di transizione. Se vai a ridimensionare la finestra del browser puoi vederlo comunque in funzione dopo che la pagina è caricata (anche se le posizioni sono inizialmente errate); questo perché il plugin stesso esegue un refresh sull'evento resize della finestra.

Il fatto è che per poter determinare la posizione di ciascun elemento nella pagina, e l'uno rispetto all'altro, viene considerato il relativo ingombro in base alle proprie dimensioni.

Va da se che appena caricata la pagina, nel tuo specifico caso, le immagini non ancora caricate hanno ingombro 0. La seconda volta, le immagini sono già nella cache del browser, per cui vengono caricate istantaneamente prima che lo script stesso sia eseguito. In tal caso lo script ha tutte le informazioni disponibili per poter posizionare opportunamente tali elementi.

In sostanza, non essendo specificate le dimensioni delle immagini, gli elementi della galleria si posizionano come se le immagini stesse hanno dimensioni uguali a 0. In realtà non viene caricata solo la prima immagine (o la prima riga di immagini), ma vengono caricate tutte, andando però a sovrapporsi proprio per questa discrepanza nel calcolo delle altezze.

La larghezza è comunque dettata dai contenitori delle immagini stesse, per cui queste, una volta che sono caricate nella pagina, si dispongono correttamente una di fianco all'altra, ma non è così per l'altezza che resta automatica perché di fatto non è definita e risulta inizialmente a 0.

Dal momento che lo script è eseguito all'apertura della pagina, anche se è posto in fondo al body e quindi gli elementi sono già manipolabili, non può accedere alle informazioni delle risorse esterne non ancora caricate; per questo motivo ottieni quel risultato.

Puoi risolvere in diversi modi.

Se conosci a priori le dimensioni delle immagini, puoi definirle specificatamente nei tag <img> o in qualche modo via CSS. Queste saranno comunque ridimensionate poi nel layout in base al CSS, ma in questo modo vai ad attribuire esplicitamente quelle che sono le dimensioni di riferimento così che lo script riesca a calcolare opportunamente i posizionamenti.

In questo modo tali elementi saranno già posizionati nel layout anche se le immagini (come contenuti di quegli elementi) dovranno ancora essere caricate.

L'altra soluzione è JavaScript secondo quanto ho indicato sopra.

L'evento $(window).load (jQuery) infatti viene scaturito quando tutte le risorse della pagina (tra cui tutte le immagini) sono state caricate.
In tal caso lo script sarà eseguito "correttamente" quando tutte le informazioni necessarie sono disponibili.

Buon proseguimento

[Bhios]

Grazie, sia per le stringhe di codice sia per la spiegazione concisa ma chiara ed esplicativa, ho risolto. Ti devo pizza e birra

Grazie di nuovo