Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2021
    Messaggi
    4

    Effetto ingrandimento immagine...

    Ciao,ho cercato nei post precedenti senza però trovare qualcosa che sia d'aiuto, vi chiedo qualche suggerimento per favore, premetto di essere un neofita della programmazione, ho cercato già codici utili nel web per creare gallerie d' immagini, ma o non danno l'effetto desiderato o non riesco a farli funzionare, si tratta in realtà di una semplice galleria, cliccando l'immagine dovrebbe ingrandirsi nella stessa pagina lasciando visibile il resto della pagina sullo sfondo diciamo in "penombra", senza frecce di scorrimento, ma ogni immagine da aprire e chiudere singolarmente, per ora ho creato una Section Gallery con le icone piccole e i ralativi link alle immagini grandi, ma sono fermo qui...Grazie
    codice:
    <section id="gallery">
                            <a href="images/001.jpg"><img src="images/001p.jpg" alt=" immagine 1" id="img001p"></a>
                            <a href="images/002.jpg"><img src="images/002p.jpg" alt=" immagine 2" id="img002p"></a>
                            <a href="images/003.jpg"><img src="images/003p.jpg" alt=" immagine 3" id="img003p"></a>
                            <a href="images/004.jpg"><img src="images/004p.jpg" alt=" immagine 4" id="img004p"></a>
                            <a href="images/005.jpg"><img src="images/005p.jpg" alt=" immagine 5" id="img005p"></a> 
                            <a href="images/006.jpg"><img src="images/006p.jpg" alt=" immagine 6" id="img006p"></a> 
                            <a href="images/007.jpg"><img src="images/007p.jpg" alt=" immagine 7" id="img007p"></a> 
                            <a href="images/008.jpg"><img src="images/008p.jpg" alt="immagine8" id="img008p"></a> 
        </section>

  2. #2
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    207
    Ti ho scritto un piccolo esempio che ovviamente può essere migliorato e riadattato in base alle tue esigenze.

    codice:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
                background-color: brown;
            }
    
            #preview {
                display: none;
                position: absolute;
                background-color: rgba(0, 0, 0, 0.5);
                user-select: none;
                align-items: center;
                justify-content: center;
            }
    
            #preview img {
                width: 95%;
                margin: 20px;
                border: 2px solid white;
            }
    
            #previewClose {
                color: white;
                position: absolute;
                right: 10px;
                top: 10px;
                cursor: pointer;
            }
    
            @media (max-width: 1000px) {
                #preview {
                    height: 100%;
                }
            }
        </style>
    
    </head>
    
    <body>
        <div id="preview">
            <div id="previewClose">X</div>
        </div>
        <section id="gallery">
            <a href="images/001.jpg"><img src="images/001p.jpg" alt="immagine 1" id="img001p"></a>
            <a href="images/002.jpg"><img src="images/002p.jpg" alt="immagine 2" id="img002p"></a>
            <a href="images/003.jpg"><img src="images/003p.jpg" alt="immagine 3" id="img003p"></a>
            <a href="images/004.jpg"><img src="images/004p.jpg" alt="immagine 4" id="img004p"></a>
            <a href="images/005.jpg"><img src="images/005p.jpg" alt="immagine 5" id="img005p"></a>
            <a href="images/006.jpg"><img src="images/006p.jpg" alt="immagine 6" id="img006p"></a>
            <a href="images/007.jpg"><img src="images/007p.jpg" alt="immagine 7" id="img007p"></a>
            <a href="images/008.jpg"><img src="images/008p.jpg" alt="immagine 8" id="img008p"></a>
        </section>
    
        <script>
            const gallery = document.getElementById('gallery')
            const preview = document.getElementById('preview')
            const previewClose = document.getElementById('previewClose')
            const imgPreview = document.createElement('img')
    
            gallery.addEventListener('click', (e) => {
                e.preventDefault()
                imgPreview.setAttribute('src', e.target.parentElement.attributes[0].value)
                preview.appendChild(imgPreview)
                preview.style.setProperty('display', 'flex')
            })
            previewClose.addEventListener('click', () => {
                preview.removeChild(imgPreview)
                preview.style.setProperty('display', 'none')
            })
        </script>
    </body>
    
    </html>

  3. #3
    Utente di HTML.it
    Registrato dal
    Jun 2021
    Messaggi
    4
    Grazie mille ninja72.

  4. #4
    Utente di HTML.it
    Registrato dal
    Jun 2021
    Messaggi
    4

    Problema incomprensibile

    Ciao, la gallery funziona perfettamente, grazie, ho notato per� successivamente un problema che sinceramente ho provato a risolvere da solo ma senza capire da cosa sia dovuto, come detto le immagini si aprono perfettamente cliccandoci sopra, se per� viene cliccato lo spazio vuoto appena vicino a queste, si apre un 'immagine vuota, ho controllato il percorso e porta nella cartella del sito a un oggetto inesistente, nel codice per� non c'� traccia di questo percorso, non ci sono errori, non sono esperto ma sembra incomprensibile.
    Se qualcuno ha una qualche idea sarebbe di grande aiuto grazie.

  5. #5
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    207
    Si effettivamente non mi ero accorto, è un piccolo problema relativo al testo mancante nell'anchor che crea una sorta di spazio non voluto. Ti mando anche delle modifiche relative all'effetto di apertura e chiusura dell'imagine con un effetto di fade-in fade-out che rende il tutto più gradevole alla vista.

    Modifiche CSS:

    codice:
     #gallery {
                user-select: none;
            }
    
            #gallery a {
                font-size: 0;
            }
    
            #preview {
                position: absolute;
                background-color: rgba(0, 0, 0, 0.5);
                user-select: none;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: opacity .2s ease;
            }

    JS

    codice:
            const gallery = document.getElementById('gallery')
            const preview = document.getElementById('preview')
            const previewClose = document.getElementById('previewClose')
            const imgPreview = document.createElement('img')
    
            gallery.addEventListener('click', (e) => {
                e.preventDefault()
                imgPreview.setAttribute('src', e.target.parentElement.attributes[0].value)
                preview.appendChild(imgPreview)
                preview.style.setProperty('display', 'flex')
                preview.style.setProperty('opacity', '1')
            })
            previewClose.addEventListener('click', () => {
                preview.style.setProperty('opacity', '0')
                setTimeout(() => {
                    preview.removeChild(imgPreview)
                }, 200)
            })

  6. #6
    Utente di HTML.it
    Registrato dal
    Jun 2021
    Messaggi
    4
    Grazie di nuovo ninja72!

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