Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    Consiglio su come impaginare e mostrare le foto in una pagina

    Ciao Ragazzi,
    sto rifacendo il mio sito web e vorrei un'impostazione "migliore" per mostrare le foto nelle pagine relative.
    Al momento nella versione "vecchia" del mio sito le mostro così:
    http://www.la-maglia-rosanero.com/Ma..._2005-2006.htm

    Ma vorrei sfruttare qualche script o stile css (non sapendo cosa usare ho pubblicato nella sezione HTML) che faccia al caso mio.
    Ad esempio mi piacerebbe un effetto che cliccando sulla foto dia l'effetto di zoom e la mostri in un riquadro tipo popup e poi cliccando fuori dal riquadro lo stesso si chiude.

    Accetto consigli su tutto…
    Grazie

  2. #2
    Ciao, questo è un piccolo esempio fatto in css, dovresti adattare parte del tuo codice html ovviamente, inoltre ti consiglio di lavorare sulla compressione delle foto, sono troppo grandi per il web, utilizza programmi come caesium oppure paint.net che sono gratuiti.

    codice HTML:
    <!DOCTYPE html>
    <html lang="it">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .thumbnail {
                width: 320px;
                height: 240px;
            }
    
            .lightbox {
                /** Default lightbox to hidden */
                display: none;
                /** Position and style */
                position: fixed;
                z-index: 999;
                width: 100%;
                height: 100%;
                text-align: center;
                top: 0;
                left: 0;
                background: rgba(0, 0, 0, 0.8);
    
            }
    
            .lightbox img {
                /** Pad the lightbox image */
                max-width: 90%;
                max-height: 80%;
                margin-top: 2%;
                cursor: pointer;
                animation-name: zoom;
                animation-duration: 0.5s;
            }
    
            .lightbox:target {
                /** Remove default browser outline */
                outline: none;
                /** Unhide lightbox **/
                display: block;
            }
    
            @keyframes zoom {
                from {
                    transform: scale(0)
                }
                to {
                    transform: scale(1)
                }
            }
        </style>
    </head>
    
    <body>
    
        <a href="#P1010002">
            <img class="thumbnail" src="P1010002.JPG">
        </a>
        <a class="lightbox" href="#" id="P1010002">
            <img src="P1010002.JPG">
        </a>
    
    </body>
    </html>

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 © 2020 vBulletin Solutions, Inc. All rights reserved.