Effetto ingrandimento immagine...

**Andrea1** · 26-06-2021, 21:56

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>

**ninja72** · 27-06-2021, 12:08

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>

**Andrea1** · 27-06-2021, 14:36

Grazie mille ninja72.

**Andrea1** · 05-07-2021, 22:55

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.

**ninja72** · 06-07-2021, 00:09

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)
        })

**Andrea1** · 06-07-2021, 01:24

Grazie di nuovo ninja72!

Discussione: Effetto ingrandimento immagine...

Strumenti discussione

Ricerca discussione

Visualizza

Effetto ingrandimento immagine...

Problema incomprensibile

Permessi di invio