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

Mapa do site


SimpleUi

Atualizando

Código para Apresentação Download

? - +
Apresentação de imagem
  1. Envolva a imagem em um contâiner com a classe ui_presentation.
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Para alterar a navegação da apresentação, crie um novo atributo data-cases. Esse atributo pode ter valores os notáveis data-cases="vertical" ou data-cases="horizontal". Para outras situações, informe um valor com todas as posições da imagem, conforme descrição abaixo:
    • Cada posição é composta por: Left[px], Top[px], Zoom[% ou px(default)], Easing[String], Time[Number-MiliSeconds], Texto[String]. Texto, que representa a legenda, pode ser false, vazio (aspas ou a posição vazia) ou pode não existir. Pode, inclusive, existir em um frame, mas não em outro.
    • Cada case deve estar separado por ponto e vírgula, sendo que a última posição não deve ter tal separação
    • Veja um exemplo com 3 cases completos: data-cases="0,0,570,easeOutExpo,2000,Texto 1;540,230,1370,easeOutExpo,2000,Texto 2;160,730,2000,easeOutExpo,2000,Texto 3"
  2. Por padrão, a dimensão da apresentação será 100%, tanto para a largura, quanto para a altura, tornando-a flexível à janela onde está inserida
    • Para alterar essas dimensões, insira na div ui_presentation os atributos data-width e data-height e informe os valores desejados (em pixels), ex: data-width="570" data-height="370".
    • O valor de data-width ou data-height pode ser auto para que a janela se ajuste a mesma dimensão da imagem (largura ou altura). Evite usar auto nos dois atributos na mesma apresentação. Evite também altura auto para apresentação (data-case) vertical e largura auto para apresentação (data-case) horizontal.
    • O valor 100% (padrão) fará com que a apresentação se ajuste à janela em que ela está inserida (largura ou altura). Já o valor auto ajustará a apresentação à dimensão original da imagem (também largura ou altura).
    • O valor também pode ser em %, como data-width="100%" ou data-height="100%", que podem ser declarados, caso necessário.
    • Se a largua e altura estiverem em px, é possível usar o atributo data-scalable="true" (beta) para que a apresentação seja redimensionada proporcionalmente, independente do tamanho disponível, ex: data-width="4" data-height="3" data-scalable="true".
  3. Quando a largura da apresentação é superior ao tamanho disponível de tela, a apresentação será apenas uma miniatura clicável para abrir a navegação somente em tela cheia, muito comum em dispositivos móveis.
    • É possível forçar esse comportamento, ainda que haja espaço disponível para a apresentação. Para isso, use data-mobile-force-trigger=true.
    • Para alterar o rótulo da miniatura clicável, use o atributo data-mobile-trigger-label e informe o texto desejado.
  4. Os controles escondem e reaparecem quando o cursor estiver em cima da apresentação
    • Para deixar os controles sempre visíveis, insira o atributo data-autohide="false" em ui_presentation
  5. Para retirar o botão para visualizar a apresentação em tela cheia, use o atributo data-fullscreen="false" em ui_presentation
  6. Para retirar a navegação, use o atributo data-nav="false" em ui_presentation
    • Para visualizar a navegação completa com todas as páginas, use o atributo data-nav="big" em ui_presentation
  7. Para retirar a legenda, use o atributo data-text="false" em ui_presentation
  8. Caso necessário, é possível alterar a orientação dos botões de navegação. Para isso, use o atributo data-prev-next-orientation em ui_presentation. O valor pode ser vertical ou horizontal (padrão).
  9. Também é possível alterar o formato da apresentação quando ela estiver em fullscreen. Use o atributo data-fullscreen-stretching e informe um dos valores: uniform (padrão), fill ou fit.
  1. Para usuário avançados, é possível alterar a paginação por meio de ajax
    • Para isso, inclua um link chamando a função presChange
    • Ex: onclick="javascript:presentationChange("caminho.jpg"*, <Cases>*, Largura*, Altura*, css, xdi);
    • Onde css são atributos de css passados para ui_presentation e xdi é o identificador do elemento (caso não seja passado, será o primeiro presentation). Ambos os campos são opicionais.
  2. Os objetos de controle podem ser implementados diretamente no Html, caso necessário. Dessa forma, os objetos podem estar localizados em qualquer posição da árvore DOM, não necessariamente abaixo de ui_presentation, como é feito automaticamente pela Ui.
    • Os objetos são: ui_presentationPrev e ui_presentationNext; ui_presentationPaginationMin ou ui_presentationPaginationBig; ui_presentationLegenda; ui_presentationFull.
    • Caso opte por incluir os objetos diretamente no Html, não é necessário implementar todos eles. É possível implementar apenas um, alguns ou todos os objetos-controle. Aqueles que não estiverem explícitamente escritos no Html continuarão sendo implementados pela Ui.
    • Cada objeto encontrado em DOM fará referência para o presentation de acordo com a sua ordem de renderização. Ou seja, o primeiro ui_presentationPrev irá controlar o primeiro ui_presentation renderizado no código-fonte e assim sucessivamente.
    • Atenção: Se existir mais de um presentation na página, é desejável que todos eles sigam o mesmo padrão, ou seja, se escolher implementar algum controle diretamente no Html, faça isso com todos os controles do mesmo tipo. Exemplo: Se há 3 presentations, sendo que um deles precisa que a ui_presentationLegenda esteja direto no Html, logo os outros 2 também precisam ter ui_presentationLegenda implementados diretamente no Html.
  3. A função retorna eventos do tipo callback de ações e estado da apresentação, são eles:
    • presentationOnBefore(pos,id); presentationFirstShow(pos,id); presentationFirstHide(pos,id); presentationLastShow(pos,id); presentationLastHide(pos,id); presentationOnAfter(pos,id)
    • Onde pos é a posição atual da apresentação e id é o identificador da apresentação
    • Todas 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 uma função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
Customizar


Controles

Padrão: Sim (true) / horizontal
Padrão: Sim (true) / uniform
Padrão: Sim (true)
Padrão: Sim (true)

Dimensões

(remover navegação). Padrão: Não (false)
O texto da miniatura será .
Ps: Esse modo removerá a navegação, que só ficará disponível no modo de tela cheia, por meio de um clique inicial na miniatura. Esse modo é automático quando a largura da apresentação for maior do que o tamanho de tela disponível.

A janela terá de largura e de altura. Padrão: 100%. Saiba mais
O valor 100% (padrão) fará com que a apresentação se ajuste à janela em que ela está inserida (largura ou altura). Já o valor auto ajustará a apresentação à dimensão original da imagem (também largura ou altura). Evite altura (data-height) auto para apresentação (data-case) vertical e largura (data-width) auto para apresentação (data-case) horizontal.
Se a largua e altura estiverem em px, é possível usar o atributo data-scalable="true" beta para que a apresentação seja redimensionada proporcionalmente, independente do tamanho disponível, ex: data-width="4" data-height="3" data-scalable="true".

Casos

A apresentação será Padrão: horizontal com posições. Escolha
A posição 1 está a px da margem e px do topo.
Sua imagem deve ter px de largura.
A animação acontecerá em ms.
A legenda será
A posição 2 está a px da margem e px do topo.
Sua imagem deve ter px de largura.
A animação acontecerá em ms.
A legenda será
A posição 3 está a px da margem e px do topo.
Sua imagem deve ter px de largura.
A animação acontecerá em ms.
A legenda será
A posição 4 está a px da margem e px do topo.
Sua imagem deve ter px de largura.
A animação acontecerá em ms.
A legenda será
A posição 5 está a px da margem e px do topo.
Sua imagem deve ter px de largura.
A animação acontecerá em ms.
A legenda será
A posição 6 está a px da margem e px do topo.
Sua imagem deve ter px de largura.
A animação acontecerá em ms.
A legenda será
A posição 7 está a px da margem e px do topo.
Sua imagem deve ter px de largura.
A animação acontecerá em ms.
A legenda será
A posição 8 está a px da margem e px do topo.
Sua imagem deve ter px de largura.
A animação acontecerá em ms.
A legenda será
A posição 9 está a px da margem e px do topo.
Sua imagem deve ter px de largura.
A animação acontecerá em ms.
A legenda será
Tem certeza que deseja reiniciar todos os valores?

Resultado para Apresentação