Envolva a imagem em um contâiner com a classe ui_presentation.
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:
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".
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"
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.
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
Para retirar o botão para visualizar a apresentação em tela cheia, use o atributo data-fullscreen="false" em ui_presentation
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
Para retirar a legenda, use o atributo data-text="false" em ui_presentation
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).
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.
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
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.
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.
A função retorna eventos do tipo callback de ações e estado da apresentação, são eles:
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.