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

SimpleUi

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.
  2. No novo ui_presentation, informe as dimensões da apresentação nos atributos data-width e data-height com os valores desejados (em pixels), ex: data-width="600" data-height="400".
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Opcionalmente, use o atributo data-scalable="true" para que a apresentação seja redimensionada proporcionalmente, independente do tamanho disponível, ex: data-width="600" data-height="400" data-scalable="true".
  2. A navegação padrão será horizontal. Para alterar a navegação da apresentação, adicione o atributo data-cases. Esse atributo pode ter valores os notáveis data-cases="horizontal" (padrão) ou data-cases="vertical". 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 vazias) 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"
  3. A apresentação será automaticamente substituida por uma miniatura clicável para abrir a navegação em tela cheia quando a largura da apresentação é superior ao tamanho disponível de tela (não aplicáveis para data-scalable="true", uma vez que a largura será sempre ajustada a janela)
    • É possível forçar esse comportamento, ainda que haja espaço disponível para a apresentação. Para isso, use data-force-trigger="true".
    • Também é possível aplicar esse comportamento apenas para mobile. Para isso, use data-force-trigger-mobile="true".
    • Para alterar o rótulo da miniatura clicável, use o atributo data-force-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, exceto para data-scalable="true", uma vez que a largura sempre se adequa a janela.
O mesmo comportamento pode ser aplicado apenas para dispositivos móveis. Para isso, use: data-force-trigger-mobile="true".

A janela terá de largura e de altura.
A largura será escalonável Padrão: false. Saiba mais
Se aplicado, a apresentação escalonável será ajustada à janela em que ela está inserida (largura).

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