https://github.com/nearius-river/nachos-gallery

Uma simples página que atua como uma "galeria" de imagens com apoio da biblioteca Masonry, escrito em puro HTML/CSS/JS.
https://github.com/nearius-river/nachos-gallery

gallery html-css-javascript masonry

Last synced: about 1 month ago
JSON representation

Uma simples página que atua como uma "galeria" de imagens com apoio da biblioteca Masonry, escrito em puro HTML/CSS/JS.

• Host: GitHub
• URL: https://github.com/nearius-river/nachos-gallery
• Owner: Nearius-River
• Created: 2024-09-13T18:32:16.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-13T19:02:38.000Z (4 months ago)
• Last Synced: 2024-09-14T09:55:39.996Z (4 months ago)
• Topics: gallery, html-css-javascript, masonry
• Language: JavaScript
• Homepage:
• Size: 11.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Nachos Gallery

Este projeto é uma galeria de imagens dinâmica e responsiva, que permite o carregamento de imagens diretamente de pastas do seu computador. A galeria oferece layout otimizado para visualização, utilizando **Masonry.js** e **ImagesLoaded** para garantir uma exibição fluida, e implementa técnicas de carregamento progressivo para gerenciar grandes volumes de imagens.

## Funcionalidades Principais

- **Carregamento de Pastas**: Permite selecionar uma pasta local para carregar todas as imagens contidas nela.

- **Layout Dinâmico**: O layout utiliza **Masonry.js** para organizar as imagens de forma eficiente, mantendo os espaços entre as imagens minimizados.

- **Otimização de Carregamento**: Apenas uma quantidade inicial de imagens (100 por padrão) é carregada no início. A navegação é através de um sistema por páginas, oferecendo controles de navegação no fundo da galeria.

- **Modal de Detalhes**: Ao clicar em uma imagem, uma visualização em destaque é exibida, centralizando a imagem e mostrando informações adicionais (nome, formato, data de criação, dimensões e tamanho).

- **Pesquisa e Ordenação**: Oferece ferramentas para buscar e filtrar imagens por nome, tipo, data ou tamanho, além de permitir ordenação personalizada.

- **Animações Suaves**: Animações sutis ao passar o mouse e ao carregar imagens, oferecendo uma experiência visual mais agradável.

## Tecnologias Utilizadas

- **Frontend**:

  - HTML5

  - CSS3

  - JavaScript (com **Masonry.js** e **ImagesLoaded**)

## Utilização

Como este projeto apenas utiliza de puro HTML/CSS/JS, no momento, basta apenas baixar o conteúdo da pasta `src` e abrir a página index.html normalmente. **Há planos de expandir este projeto no futuro**, incluindo para utilizar um backend adequado com Node.js, Express e um Banco de dados.

## Contribuições

Contribuições são bem-vindas! O projeto ainda está em sua fase inicial, portanto, se encontrar um bug ou tiver sugestões, abra uma issue ou envie um pull request.

## Licença

Este projeto está licenciado sob a **MIT License**.