Sabemos o quanto é difícil para um desenvolvedor web escolher e trabalhar com componentes e bibliotecas de construção de interfaces. Pensando nisso, desenvolvemos uma solução usando javascript puro para facilitar o gerencimento de um processo extremamente custoso: a construção de galerias de imagens; que permite mais agilidade e otimiza o seu tempo. Essa biblioteca está sendo projetada para ter alta escalabilidade e flexibilizade, além de integrar fielmente ao design definido.
⚠️ Esse projeto está em fase beta, por esse motivo não deve ser usado no ambiente de produção
- Tenha o NPM e NodeJS instalado em seu sistema.
$ git clone [email protected]:brunofamiliar/photus.git
$ cd photus
$ npm install
$ npm run build<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/photus.min.js"></script>
- Copie os arquivos gerados dentro do diretório "photus/dist" para a raiz do seu projeto;
- Para utilizar a lib em seu projeto, importe os arquivos .js e .css compilados e crie uma tag div com a id "pht__endpoint", essa tag é necessária para a injeção de dependência. Ex: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/main.css">
<title>Photus - Simple Gallery</title>
</head>
<body>
<div id="pht__endpoint"></div>
</body>
<script src="./photus.min.js"></script>
</html>| Propriedade | Descrição | Tipo | Padrão |
|---|---|---|---|
| type | Defina o tipo de layout a ser utilizado | string | grid |
| images | Carrega as imagens da galeria | object[] | [] |
| style | Edite o estilo para adaptar ao design | object[] | [] |
| Propriedade | Descrição | Tipo | Padrão |
|---|---|---|---|
| name | Nome da imagem (será utilizado também como label) | string | - |
| path | Url a ser buscado a imagem | string | - |
| Propriedade | Descrição | Tipo | Padrão |
|---|---|---|---|
| columns | Quantidade de colunas | number | 4 |
| cardSize | Tamanho do cartão de imagem | number | 200 |
| contentWidth | Largura total do container | number | - |
| gap | Espaçamento entre cards | number | 1 |
| borderRadius | Borda dos cards (top, right, bottom, left) | array[number] | [] |