Nextjs affiche un nouveau div en cliquant sur

Question

J'ai une image et je souhaite créer un nouveau div (au clic) avec une version plus grande de la même image.

J'ai essayé quatre méthodes :

1. Rendu div en un clic

function zoom_img (event) {
    console.log(event.target);
    console.log(event.target['data-loaded-src'])
    const src = event.target['data-loaded-src']
    
    return (
      <div className='w-screen h-screen fixed flex justify-center items-center'>
        <div className='w-9/12 h-5/6 bg-slate-200 opacity-50'>
          <Image src={src} fill={true} />
        </div>
      </div>
    )
  }

...

<Image src={'/gafas.png'} width={150} height={150} alt='Gafas 1' onClick={zoom_img}/>

2. Composants personnalisés

function Glasses ({src, height, width, alt}) {
    function enlrg() {
      console.log(src);
      return (
        <div className='w-screen h-screen fixed flex justify-center items-center'>
          <div className='w-9/12 h-5/6 bg-slate-200 opacity-50'>
            <Image src={src} fill={true} />
          </div>
        </div>
      )
    }
    return (
      <Image src={src} width={width} height={height} alt={alt} onClick={enlrg} />
    )
  }


...

<Glasses src={'/gafas.png'} width={150} height={150} alt='Gafas 1' />

3. Div existant onClick supprimer la classe cachée

function Glasses2 ({src, height, width, alt}) {
    function enlrg() {
      console.log(src);
      let x = document.getElementById('temp');
      x.classList.remove('hidden');
      x.classList.add('flex');
    }
    return (
      <Image src={src} width={width} height={height} alt={alt} onClick={enlrg} />
    )
  }


...

<Glasses2 src={'/gafas.png'} width={150} height={150} alt='Gafas 1' />
<div id='temp' className='w-screen h-screen fixed hidden justify-center items-center'>
  <div className='w-9/12 h-5/6 bg-slate-200 opacity-50'>
    <Image src={'/gafas.png'} fill={true} />
  </div>
</div>

4. Cela fonctionne mais j'ai perdu l'optimisation de l'image nextjs

function zoom_img (event) {
    console.log(event.target);
    console.log(event.target['data-loaded-src'])
    const src = event.target['data-loaded-src']
    const new_cont = document.createElement('div');
    const new_div = document.createElement('div');
    const main = document.getElementById('main');
    new_cont.classList.add('w-screen', 'h-screen', 'fixed', 'flex', 'justify-center', 'items-center');
    new_div.classList.add('w-9/12', 'h-5/6', 'bg-slate-200', 'opacity-50');
    // add img tag here
    new_cont.appendChild(new_div);
    main.appendChild(new_cont);
  }


...

<Image src={'/gafas.png'} width={150} height={150} alt='Gafas 1' onClick={zoom_img} />

Dans chaque méthode, je peux voir les journaux dans la console, mais seulement dans la méthode 4, je peux voir le nouveau div.

La méthode 4 est-elle la seule correcte ? Je préférerais utiliser un composant d'image si possible. Qu'en penses-tu?

Answer 1

Merci beaucoup @Atena Dadkhah. Votre réponse est très valable.

Dans le projet, il n'y a pas une mais un tas d'images, donc le code final ressemble à ceci :

function enlarge(e) {
    setLrg(true);
    let img = document.getElementById('largerImage'),
        src = e.target['data-loaded-src'];
    img['src'] = src;
  }

Puis un tas d'images comme ceci :

Puis le div caché :

Il manque encore le comportement de fermeture du div, mais cela devrait être facile à ajouter.

Encore une fois. Merci :)

Answer 2

Vous pouvez essayer quelque chose comme ceci :

Définir le crochet :

[zoomImage, setZoomImage] = useState(false)

 setZoomImage(true)}/>

// zoomed image


   

Dans ce code, vous dites essentiellement à Next.JS de changer la variable zoomImage en true chaque fois que l'utilisateur clique sur l'image, de sorte que l'image plus grande masquée par défaut aura un bloc d'affichage. (Je suppose que vous utilisez tailwindcss)