Visualizzazione dei risultati da 1 a 6 su 6

Discussione: Ordinare miniature disposte in maniera disordinata

  1. #1

    Ordinare miniature disposte in maniera disordinata

    Buon pomeriggio afoso a tutti...
    Smanetto da tempo sul mio forlgio di stile ma non riesco a ordinare per bene le miniature delle gallerie del mio sito.

    http://www.stefanoforcina.com/pages/...leria=ritratti

    Questa è una delle tante.
    Ci sono foto verticali ed orizzontali ma non capisco perchè mi restano molti spazi vuoti così brutti a vedersi.

    Il codice che le gestisce è:

    Codice PHP:
    echo '<div class="col-md-3 portfolio-item">
                                 <a href="' 
    $pathB'/'$file,'" data-lightbox="$galleria">
                                     <img class="img-responsive" src="'
    $pathB'/'$file,'">
                                </a>'
    ;
                                if (
    $file[6] == "v") {
                                echo 
    '<a href="shop.php?foto='$file,'&galleria='$galleria,'&citazione='$citazione'&autore='$autore,'">
                                     <div class="cartImg"><img src="../img/cart.png"></div>
                                </a>'
    ; }
                       echo 
    '</div>'
                       

    Se qualcuno potesse illuinarmi e farmi capire dov'è che ho sbagliato gliene sarei grato.
    Grazie.

  2. #2
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    114
    La foto verticale suppongo abbia, come tutte le altre, un float: left
    Il buco si crea nel momento in cui tu posizioni un'immagine orizzontale e dopo una verticale.
    Prendiamo in esame il primo caso, nella 5a riga. L'immagine orizzontale pone, tramite float left, le altre immagini alla sua destra all'interno della stessa riga. Quella verticale è ovviamente più alta, e dunque aumenta l'altezza della riga di riferimento: ti faccio notare che è alta più di 2 immagini orizzontali messe insieme e quindi occupa il "triplo" dello spazio verticale. Anch'essa ha float left, e dunque tutti gli elementi che vengono inseriti successivamente nel codice, vengono posti nuovamente alla sua destra finché "c'è spazio", ovvero per 3 righe.
    Per evitare il problema dovresti, dopo aver ritagliato l'immagine verticalmente (ad occhio bastano 20-25 px):
    1) mettere l'immagine verticale all'inizio della riga, oppure
    2) prima dell'immagine verticale creare un div che contenga 2 immagini orizzontali ogni volta che stai per far comparire 1 immagine verticale.

    Spero di essermi spiegato in modo almeno comprensibile, altrimenti provo a fartelo capire diversamente.

  3. #3
    Tutto molto chiaro, grazie.
    Il "problema" è che carico le immagini con un pannello di upload e il lato lungo è di 1000px (orizzontali e verticali).
    Da queste vengono generate tutte le altre (miniature e immagini della pagina vendita).
    So che il problema si presenta con le immagini verticali e devo trovare il modo tramite css di ritagliarle "e farle diventare orizzontali", non mi interessa se nelle miniature perderò elementi della foto, si vedranno poi se ci si clicca su.
    Credo che se tutte le immagini avranno stesse proporzioni il problema non dovrebbe comparire poichè occuperebbero tutte lo stesso spazio.

    Ps. anche se il massimo per me sarebbe raggiungere questa veste grafica:
    http://leganerd.com/

    Lo so, non sono foto ma articoli. Comunque anche se di altezze differenti non rispettano la "regola delle righe", vanno ad occupare tutti gli spazi ed esteticamente mi piace molto.
    Ultima modifica di flip-flop; 11-07-2017 a 18:45

  4. #4
    Ciao. Io ho risolto in questo modo.
    Ti faccio prima vedere la pagina e poi te la illustro.
    http://www.imede.it/smarrimenti/galleria.asp

    Ho una cartella dove ci sono solo le immagini da mostrare. Queste immagini vengono caricare dagli utenti e quindi con orientamenti diversi e dimensioni diverse.

    Prima di tutto leggo la cartella e riempio 2 array con i nomi delle immagini secondo orientamento; in questo modo ho sia l'array portrait che quello landscape.

    Ho stabilito la larghezza delle immagini (width) che è lo stesso sia per portrait che landscape.
    L'altezza per landscape deve essere esattamente il doppio di portrait.
    Nella pagina è ben visibile il CSS utilizzato.

    Successivamente mostro prima le landscape e poi le portrait. Se inverto è la stessa cosa ma non possono essere mischiate.

    Ovviamente questo rischia di distorcere la miniatura. Per evitare grosse distorsioni faccio ridimensionare le immagini direttamente dal server che le proporziona correttamente.
    Questo mi serve anche per velocizzare il caricamento lato client.
    Se le immagini sono troppo sproporzionate, una distorsione la si vede comunque ma nel mio caso non posso farci nulla; non sono io che scatto foto e non posso ogni volta metterci mano.

    La mia intenzione era quella di averle tutte attaccate e senza spazietti orfani.
    Come avrai notato non sto utilizzando bootstrap. La gestione della galleria è tutta fatta a mano.

  5. #5
    Interessante la soluzione di separare le landscape dalle portrait. Così facendo in effetti si possono meglio gestire le foto e far si che 2 landscape occupino le stesso spazio di una portrait.
    Qualcosa in php so, il sito l'ho fatto da zero, ora spero di riuscire a creare i dovuti array per gestire i file in questo modo...
    Ti ringrazio, buona giornata.

  6. #6
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    542
    Tempo fa mi era capitato un problema simile con un sito di un cliente, che caricava le sue gallery, con foto che lui ridimensionava (e non ce n'era una uguale all'altra).

    Prova ad adattare questa soluzione al tuo caso.

    Aggiungi queste regole CSS:

    codice:
     .grid-wrapper{
            max-width: 260px;
            height: 160px;
            overflow: hidden;
            margin:0 auto;
            padding-bottom:10px;
            padding-top:10px;
        }
        
        .grid-content img {
            max-width: 260px;
        }

    Poi aggiungi due div, in questo modo:

    codice:
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_001.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_001.jpg">
    </a>
    </div>
    </div>
    </div>


    Ho fatto un veloce test con le tue foto e non mi sembra malaccio, poi vedi tu.

    codice:
    <div class="row">
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_001.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_001.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_002.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_002.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_003.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_003.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_004.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_004.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_005.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_005.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_006.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_006.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_007.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_007.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_008.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_008.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_009.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_009.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_010.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_010.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_011.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_011.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_012.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_012.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_013.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_013.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_014.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_014.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_015.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_015.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_016.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_016.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_017.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_017.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_018.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_018.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_019.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_019.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_020.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_020.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_021.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_021.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_022.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_022.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_023.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_023.jpg">
    </a>
    </div>
    </div>
    </div>
    
    <div class="col-md-3 portfolio-item">
    <div class="grid-wrapper">
    <div class="grid-content">
    <a href="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_024.jpg" data-lightbox="$galleria">
    <img class="img-responsive" src="http://www.stefanoforcina.com/img/gallerie/big/ritratti/ri_024.jpg">
    </a>
    </div>
    </div>
    </div>
    
    </div>

  7. #7
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    542
    Anch'io avevo pensatodi filtrare le foto in base alle dimensioni, ma al cliente non piaceva l'idea che, in questo modo, veniva cambiato l'ordine delle foto.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.