Visão de galeria de imagens com opção de salvar

README.md

Galeria de imagens

Como usar

• Salve o link Galeria na sua barra de favoritos (dica: arraste o link para a barra).
• Clique com o botão direito do mouse no link da barra de favoritos, use a opção "Editar favorito" e substitua o endereço/URL pelo código logo abaixo das instruções.
• Vá para a página de rede social
• Use o link da barra de favoritos
• Vai aparecer uma visão de galeria na própria página. Clique nas imagens desejadas
  • botão esquerdo = abre numa nova janela
  • botão direito = menu com opção de salvar imagem
• Para voltar, use o botão Fechar no canto superior direito, ou aperte Esc

Código para URL do favorito

javascript:(function()%7Bfunction%20abrirGaleria(imgs)%20%7B%0A%20%20const%20overlay%20%3D%20document.createElement('div')%3B%0A%20%20Object.assign(overlay.style%2C%20%7B%0A%20%20%20%20position%3A%20'fixed'%2C%20inset%3A%20'0'%2C%20zIndex%3A%20'2147483647'%2C%0A%20%20%20%20background%3A%20'%23111'%2C%20overflow%3A%20'auto'%2C%20padding%3A%20'20px'%2C%0A%20%20%7D)%3B%0A%0A%20%20const%20onKeydown%20%3D%20(e)%20%3D%3E%20%7B%0A%20%20%20%20if%20(e.key%20%3D%3D%3D%20'Escape')%20fechar()%3B%0A%20%20%7D%3B%0A%0A%20%20const%20fechar%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20overlay.remove()%3B%0A%20%20%20%20document.removeEventListener('keydown'%2C%20onKeydown)%3B%0A%20%20%7D%3B%0A%0A%20%20const%20btnFechar%20%3D%20document.createElement('button')%3B%0A%20%20btnFechar.textContent%20%3D%20'%E2%9C%95%20Fechar'%3B%0A%20%20Object.assign(btnFechar.style%2C%20%7B%0A%20%20%20%20position%3A%20'fixed'%2C%20top%3A%20'10px'%2C%20right%3A%20'10px'%2C%0A%20%20%20%20padding%3A%20'8px%2012px'%2C%20cursor%3A%20'pointer'%2C%20zIndex%3A%20'1'%2C%0A%20%20%7D)%3B%0A%20%20btnFechar.onclick%20%3D%20fechar%3B%0A%0A%20%20const%20galeria%20%3D%20document.createElement('div')%3B%0A%20%20Object.assign(galeria.style%2C%20%7B%0A%20%20%20%20display%3A%20'flex'%2C%20flexWrap%3A%20'wrap'%2C%20gap%3A%20'20px'%2C%20marginTop%3A%20'50px'%2C%0A%20%20%7D)%3B%0A%0A%20%20for%20(const%20src%20of%20imgs)%20%7B%0A%20%20%20%20const%20a%20%3D%20document.createElement('a')%3B%0A%20%20%20%20a.href%20%3D%20src%3B%0A%20%20%20%20a.target%20%3D%20'_blank'%3B%0A%0A%20%20%20%20const%20img%20%3D%20document.createElement('img')%3B%0A%20%20%20%20img.src%20%3D%20src%3B%0A%20%20%20%20Object.assign(img.style%2C%20%7B%20maxWidth%3A%20'300px'%2C%20display%3A%20'block'%20%7D)%3B%0A%0A%20%20%20%20a.appendChild(img)%3B%0A%20%20%20%20galeria.appendChild(a)%3B%0A%20%20%7D%0A%0A%20%20overlay.append(btnFechar%2C%20galeria)%3B%0A%20%20document.body.appendChild(overlay)%3B%0A%20%20document.addEventListener('keydown'%2C%20onKeydown)%3B%0A%7D%0AabrirGaleria(Array.from(document.querySelectorAll('div%3Eimg%5Bcrossorigin%3Danonymous%5D')).map(i%20%3D%3E%20i.src))%7D)()%3B

(É um pouco longo! Copie tudo)

full.js

function abrirGaleria(imgs) {
  const overlay = document.createElement('div');
  Object.assign(overlay.style, {
    position: 'fixed', inset: '0', zIndex: '2147483647',
    background: '#111', overflow: 'auto', padding: '20px',
  });

  const onKeydown = (e) => {
    if (e.key === 'Escape') fechar();
  };

  const fechar = () => {
    overlay.remove();
    document.removeEventListener('keydown', onKeydown);
  };

  const btnFechar = document.createElement('button');
  btnFechar.textContent = '✕ Fechar';
  Object.assign(btnFechar.style, {
    position: 'fixed', top: '10px', right: '10px',
    padding: '8px 12px', cursor: 'pointer', zIndex: '1',
  });
  btnFechar.onclick = fechar;

  const galeria = document.createElement('div');
  Object.assign(galeria.style, {
    display: 'flex', flexWrap: 'wrap', gap: '20px', marginTop: '50px',
  });

  for (const src of imgs) {
    const a = document.createElement('a');
    a.href = src;
    a.target = '_blank';

    const img = document.createElement('img');
    img.src = src;
    Object.assign(img.style, { maxWidth: '300px', display: 'block' });

    a.appendChild(img);
    galeria.appendChild(a);
  }

  overlay.append(btnFechar, galeria);
  document.body.appendChild(overlay);
  document.addEventListener('keydown', onKeydown);
}
abrirGaleria(Array.from(document.querySelectorAll('div>img[crossorigin=anonymous]')).map(i => i.src))