Você está usando um navegador desatualizado. Para a visualização correta, atualize seu navegador:

Mapa do site


SimpleUi

Atualizando

Código para Miniaturas Download

? - +
Perfilar imagens de um box
  1. Use a class ui_thumb no box que contém a imagem, desde que esse box tenha uma largura e altura definidas.
  2. É possível usar a função de miniaturas em layouts fluídos, onde não há uma largura definida para o box.
    • Nesse caso, use data-thumb-fluid="true". Assim, não é necessário definir uma dimensão do box, muito útil em layouts fluidos.
    • Opcionalmente, é possível complementar data-thumb-fluid="true" com o atributo data-thumb-fluid-ratio e definir a proporção desejada da miniatura, ex: 4:3 (padrão), 16:9, 1:1, etc.
Pronto! Isso é suficiente. Entenda a função:
  1. A função identifica o perfil da imagem do box entre: vertical, quadrado ou horizontal. A partir disso, ela determina qual será o redimensionamento apropriado para cada imagem, se pela largura ou altura do box.
  2. A imagem não precisa ter altura e largura prévias, afinal, ela será redimensionada. O box, por sua vez, deve ter as 2 dimensões informadas, seja por estilo inline, incorporado ou importado. Através dessas informações as imagens serão ajustadas.
Caso queira, você pode customizar a função:
  1. Por padrão, as imagens são centralizadas no box, sejam elas verticais ou horizontais
    • Para alterar esse comportamento, insira o atributo data-thumb-align na imagem ui_thumb e indique "true" para centralizar (padrão), "false" para não centralizar ou "true-vportrait" para que as imagens horizontais continuem centralizadas, mas alinhadas em uma proporção áurea aproximada (golden-ratio) para as imagens verticais, o que pode ser muito útil para retratos.
  1. Após o ajuste das imagens, usuários avançados podem implementar uma função do tipo callback
    • Para isso, crie a função callback_thumb(total) quando todas as imagens estiverem configuradas, onde obj é o elemento que envolve a imagem, xdi é o contador da imagem, img é a imagem propriamente dita e total é o total de miniaturas.
    • Essas funções não são obrigatórias, ou seja, só serão executadas se existirem. Caso positivo, para evitar duplicidades, lembre-se de implementar as funções callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
Customizar


Número de elementos

Exibir miniaturas.

Perfil

Escolha o perfil das imagens:
A 1ª imagem será e Padrão: centralizada (true).
A 2ª imagem será e Padrão: centralizada (true).
A 3ª imagem será e Padrão: centralizada (true).
A 4ª imagem será e Padrão: centralizada (true).
A 5ª imagem será e Padrão: centralizada (true).
A 6ª imagem será e Padrão: centralizada (true).
A 7ª imagem será e Padrão: centralizada (true).
A 8ª imagem será e Padrão: centralizada (true).
A 9ª imagem será e Padrão: centralizada (true).
A 10ª imagem será e Padrão: centralizada (true).
A 11ª imagem será e Padrão: centralizada (true).
Saiba mais
"centralizada" signigica que todas as imagens serão centralizadas, sejam elas verticais ou horizontais.
"centralizada (horiz.) e retrato (vert.)" significa que as imagens horizontais continuarão centralizadas, já as verticais serão alinhadas em uma proporção áurea aproximada (golden-ratio), muito útil para retratos.

Box

Escolha quais elementos terão conteúdo:
O 1º box terá px de largura e px de altura.
O 2º box terá px de largura e px de altura.
O 3º box terá px de largura e px de altura.
O 4º box terá px de largura e px de altura.
O 5º box terá px de largura e px de altura.
O 6º box terá px de largura e px de altura.
O 7º box terá px de largura e px de altura.
O 8º box terá px de largura e px de altura.
O 9º box terá px de largura e px de altura.
O 10º box terá px de largura e px de altura.
O 11º box terá px de largura e px de altura.
Também é possível usar o atributo data-thumb-fluid (não obrigatório) para redimensionar a miniatura em layouts fluidos, onde o box não tem largura definida ou quando ela é variável, principalmente no redimensionamento da tela.
Conjuntamente, há o atributo data-thumb-fluid-ratio (não obrigatório) para definir uma proporção para a imagem dentro desse redimensionamento fluído. Pesquise como fazer isso no manual da função.
Tem certeza que deseja reiniciar todos os valores?

Resultado para Miniaturas