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 uma div com a class ui_presentation.
  2. 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"
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. 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 ao mesmo tempo e na mesma apresentação.
    • O valor default (data-width="100%" data-height="100%"), pode ser declarado, caso necessário.
  2. 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
  3. Para retirar o botão para visualizar a apresentação em tela cheia, use o atributo data-fullscreen="false" em ui_presentation
  4. 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
  5. Para retirar a legenda, use o atributo data-text="false" em ui_presentation
  6. 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).
  7. 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

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 ajusta à 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.

Casos

A apresentação será com posições. Escolha-os
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