Flyout

O Flyout Viewer é um visualizador de imagens. Ele exibe uma imagem estática com a versão ampliada mostrada na visualização de flyout que um usuário ativa. Este visualizador funciona com conjuntos de imagens e a navegação é feita usando amostras. Ele foi projetado para funcionar em desktops e dispositivos móveis.

O tipo de visualizador é 504.

Consulte Requisitos e pré-requisitos do sistema.

URL de demonstração

https://s7d9.scene7.com/s7viewers/html5/FlyoutViewer.html?asset=Scene7SharedAssets/ImageSet-Views-Sample

Usando o Flyout Viewer

O Flyout Viewer representa um arquivo JavaScript principal e um conjunto de arquivos auxiliares (uma única inclusão do JavaScript com todos os componentes do Viewer SDK usados por este visualizador específico, ativos, CSS) baixados pelo visualizador em tempo de execução

O Flyout Viewer destina-se apenas ao uso incorporado, o que significa que ele está integrado à página da Web usando a API documentada. Nenhuma página da Web pronta para produção está disponível para o Flyout Viewer.

A configuração e a capa são semelhantes às dos outros visualizadores. Você pode usar CSS personalizado para aplicar capas.

Consulte Referência de comando comum para todos os visualizadores - Atributos de configuração e Referência de comando comum para todos os visualizadores - URL

Interação com o Flyout Viewer

O Flyout Viewer suporta gestos de toque único e multitoque que são comuns em outros aplicativos móveis.

O visualizador também oferece suporte à entrada de toque e à entrada de mouse em dispositivos Windows com tela sensível ao toque e mouse. No entanto, esse suporte é limitado somente aos navegadores da Web Chrome, Internet Explorer 11 e Edge.

Este visualizador está totalmente acessível pelo teclado.

Consulte Acessibilidade e navegação do teclado.

Incorporando o Flyout Viewer

Páginas da Web diferentes têm necessidades diferentes para o comportamento do visualizador. A página da Web pode ter um layout de página estático ou usar um design responsivo que é exibido de forma diferente em dispositivos diferentes ou para tamanhos de janela de navegador diferentes. Para acomodar essas necessidades, o visualizador suporta dois modos de operação principais: incorporação de tamanho fixo e incorporação de design responsivo.

O modo de incorporação de tamanho fixo é usado quando o visualizador não altera seu tamanho após a carga inicial. Essa opção é melhor para páginas da Web que tenham um layout de página estático.

O modo de incorporação de design responsivo supõe que o visualizador talvez precise ser redimensionado durante o tempo de execução em resposta à alteração de tamanho de seu container DIV. O caso de uso mais comum é adicionar um visualizador a uma página da Web que use um layout de página flexível.

Ao usar o modo de incorporação de design responsivo com o Flyout Viewer, certifique-se de especificar pontos de interrupção explícitos para a imagem de visualização principal usando o parâmetro imagereload. Idealmente, combine seus pontos de interrupção com os pontos de interrupção da largura do visualizador, conforme indicado pelo CSS da página da Web.

No modo de incorporação de design responsivo, o visualizador se comporta de forma diferente dependendo da maneira como uma página da Web dimensiona seu container DIV. Se a página da Web definir somente a largura do container DIV, deixando sua altura sem restrições, o visualizador escolherá automaticamente sua altura de acordo com a proporção do ativo usado. Isso significa que o ativo se encaixa perfeitamente na visualização, sem qualquer preenchimento lateral. Esse caso de uso em particular é o mais comum para páginas da Web que usam estruturas de layout de design responsivas, como Bootstrap, Base e assim por diante.

Caso contrário, se a página da Web definir a largura e a altura do container do visualizador DIV, o visualizador preencherá somente essa área e seguirá o tamanho fornecido pelo layout da página da Web. Um bom exemplo de caso de uso é incorporar o visualizador em uma sobreposição modal, na qual a sobreposição é dimensionada de acordo com o tamanho da janela do navegador da Web.

Incorporação de tamanho fixo

Você adiciona o visualizador a uma página da Web, fazendo o seguinte:

1. Adicionar o arquivo JavaScript do visualizador à sua página da Web.

2. Definindo o container DIV.

3. Definição do tamanho do visualizador.

4. Criação e inicialização do visualizador.

5. Adicionar o arquivo JavaScript do visualizador à sua página da Web.

   A criação de um visualizador requer a adição de uma tag de script no cabeçalho HTML. Antes de usar a API do visualizador, certifique-se de incluir FlyoutViewer.js. FlyoutViewer.js está localizado na seguinte html5/js/ subpasta da sua implantação padrão do IS-Viewers:

<s7viewers_root>/html5/js/FlyoutViewer.js

Você pode usar um caminho relativo se o visualizador for implantado em um dos servidores Adobe Dynamic Media e ele for disponibilizado a partir do mesmo domínio. Caso contrário, especifique um caminho completo para um dos servidores Adobe Dynamic Media com os IS-Viewers instalados.

Um caminho relativo tem a seguinte aparência:

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/FlyoutViewer.js"></script>

1. Definindo o DIV do container.

   Adicione um elemento DIV vazio à página onde deseja que o visualizador apareça. O elemento DIV deve ter sua ID definida, pois essa ID é passada posteriormente para a API do visualizador.

   O espaço reservado DIV é um elemento posicionado, o que significa que a propriedade position CSS está definida como relative ou absolute.

   É responsabilidade da página da Web especificar o z-index apropriado para o elemento DIV do espaço reservado. Isso garante que a parte de flyout do visualizador apareça na parte superior dos outros elementos da página da Web.

   A seguir está um exemplo de um elemento DIV de espaço reservado definido:

   <div id="s7viewer" style="position:relative;z-index:1"></div> 
   

2. Definição do tamanho do visualizador.

   Este visualizador exibe miniaturas ao trabalhar com conjuntos de vários itens. Em sistemas desktop, as miniaturas são colocadas abaixo da visualização principal. Ao mesmo tempo, o visualizador permite a troca do ativo principal durante o tempo de execução usando a API setAsset(). Como desenvolvedor, você tem controle sobre como o visualizador gerencia a área de miniaturas na área inferior quando o novo ativo tem apenas um item. É possível manter o tamanho do visualizador externo intacto e deixar a visualização principal aumentar sua altura e ocupar a área de miniaturas. Ou você pode manter o tamanho da visualização principal estático e reduzir a área do visualizador externo, permitindo, assim, que o conteúdo da página da Web se mova para cima e, em seguida, usar o espaço livre da página nas miniaturas.

   Para manter os limites do visualizador externo intactos, defina o tamanho para .s7flyoutviewer classe CSS de nível superior em unidades absolutas. O dimensionamento no CSS pode ser colocado diretamente na página HTML ou em um arquivo CSS do visualizador personalizado, que é posteriormente atribuído a um registro predefinido do visualizador no Dynamic Media Classic, ou passado explicitamente usando o comando style.

   Consulte Personalizando o Flyout Viewer para obter mais informações sobre como estilizar o visualizador com CSS.

   A seguir está um exemplo de como definir o tamanho do visualizador externo estático em uma página HTML:

   #s7viewer.s7flyoutviewer { 
    width: 640px; 
    height: 480px; 
   }
   

   Você pode ver o comportamento com uma área fixa do visualizador externo na seguinte página de amostra. Observe que quando você alterna entre os conjuntos, o tamanho do visualizador externo não muda:

   https://marketing.adobe.com/resources/help/en_US/s7/viewers_ref/samples/FlyoutViewer-fixed-outer-area.html

   Para tornar as dimensões de visualização principais estáticas, defina o tamanho do visualizador em unidades absolutas para o componente SDK interno Container usando o seletor de CSS .s7flyoutviewer .s7container. Além disso, você deve substituir o tamanho fixo definido para a classe CSS .s7flyoutviewer de nível superior no CSS do visualizador padrão, definindo-o como auto.

   A seguir está um exemplo de como definir o tamanho do visualizador para o componente SDK interno Container para que a área de visualização principal não altere seu tamanho ao alternar o ativo:

   #s7viewer.s7flyoutviewer { 
    width: auto; 
    height: auto; 
   }  
   #s7viewer.s7flyoutviewer .s7container { 
    width: 640px; 
    height: 480px; 
   }
   

   A página de amostra a seguir mostra o comportamento do visualizador com um tamanho de visualização principal fixo. Observe que quando você alterna entre os conjuntos, a visualização principal permanece estática e o conteúdo da página da Web se move verticalmente:

   https://marketing.adobe.com/resources/help/en_US/s7/viewers_ref/samples/FlyoutViewer-fixed-main-view.html

   Além disso, observe que o CSS do visualizador padrão fornece um tamanho fixo para sua área externa pronta para uso.

3. Criação e inicialização do visualizador.

   Depois de concluir as etapas acima, crie uma instância da classe s7viewers.FlyoutViewer, passe todas as informações de configuração para o construtor e chame o método init() em uma instância do visualizador. As informações de configuração são passadas ao construtor como um objeto JSON. No mínimo, esse objeto deve ter o campo containerId que contém o nome da ID do container do visualizador e o objeto JSON aninhado params com parâmetros de configuração compatíveis com o visualizador. Nesse caso, o objeto params deve ter pelo menos o URL de disponibilização de imagem transmitido como propriedade serverUrl e o ativo inicial como parâmetro asset. A API de inicialização baseada em JSON permite que você crie e start o visualizador com uma única linha de código.

   É importante ter o container do visualizador adicionado ao DOM para que o código do visualizador possa encontrar o elemento do container por sua ID. Alguns navegadores atrasam a criação de DOM até o final da página da Web. Para obter compatibilidade máxima, chame o método init() logo antes da tag BODY de fechamento ou no evento body onload().

   Ao mesmo tempo, o elemento container ainda não deve fazer parte do layout da página da Web. Por exemplo, ele pode estar oculto usando o estilo display:none atribuído a ele. Nesse caso, o visualizador atrasa seu processo de inicialização até o momento em que a página da Web traz o elemento de container de volta ao layout. Quando isso ocorre, o carregamento do visualizador é retomado automaticamente.

   A seguir está um exemplo de criação de uma instância do visualizador, passando as opções mínimas de configuração necessárias para o construtor e chamando o método init(). O exemplo supõe que flyoutViewer é a instância do visualizador; s7viewer é o nome do espaço reservado DIV; http://s7d1.scene7.com/is/image/ é o URL de disponibilização de imagens; e Scene7SharedAssets/ImageSet-Views-Sample é o ativo:

   <script type="text/javascript"> 
   var flyoutViewer = new s7viewers.FlyoutViewer({ 
    "containerId":"s7viewer", 
   "params":{ 
    "asset":"Scene7SharedAssets/ImageSet-Views-Sample", 
    "serverurl":"http://s7d1.scene7.com/is/image/" 
   } 
   }).init(); 
   </script>
   

   O código a seguir é um exemplo completo de uma página trivial da Web que incorpora o Flyout Viewer com um tamanho fixo:

   <!DOCTYPE html> 
   <html> 
   <head> 
   <script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/FlyoutViewer.js"></script> 
   <style type="text/css"> 
   #s7viewer.s7flyoutviewer { 
    width: 640px; 
    height: 480px; 
   } 
   </style> 
   </head> 
   <body> 
   <div id="s7viewer" style="position:relative;z-index:1;"></div> 
   <script type="text/javascript"> 
   var flyoutViewer = new s7viewers.FlyoutViewer({ 
    "containerId":"s7viewer", 
   "params":{ 
    "asset":"Scene7SharedAssets/ImageSet-Views-Sample", 
    "serverurl":"http://s7d1.scene7.com/is/image/" 
   } 
   }).init(); 
   </script> 
   </body> 
   </html>
   

Incorporação de design responsivo com altura sem restrições

Com incorporação de design responsivo, a página da Web normalmente tem algum tipo de layout flexível no lugar que determina o tamanho do tempo de execução do container do visualizador DIV. No exemplo a seguir, suponha que a página da Web permita que o container do visualizador DIV tome 40% do tamanho da janela do navegador da Web, deixando sua altura sem restrições. O código HTML da página da Web se parece com o seguinte:

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.holder { 
 width: 40%; 
} 
</style> 
</head> 
<body> 
<div class="holder"></div> 
</body> 
</html>

Adicionar o visualizador a uma página assim é semelhante às etapas para incorporação de tamanho fixo. A única diferença é que você precisa substituir o dimensionamento fixo do CSS do visualizador padrão pelo tamanho definido em unidades relativas.

1. Adicionar o arquivo JavaScript do visualizador à sua página da Web.
2. Definindo o container DIV.
3. Definição do tamanho do visualizador.
4. Criação e inicialização do visualizador.

Todas as etapas acima são as mesmas que com a incorporação de tamanho fixo com as três exceções a seguir:

• adicionar o container DIV ao "detentor" existente DIV;
• foi adicionado o parâmetro imagereload com pontos de interrupção explícitos;
• em vez de definir um tamanho fixo do visualizador usando unidades absolutas, use o CSS que define a largura e a altura do visualizador como 100%, como a seguir:

#s7viewer.s7flyoutviewer { 
 width: 100%; 
 height: 100%; 
}

O código a seguir é um exemplo completo. Observe como o tamanho do visualizador muda quando o navegador é redimensionado e como a proporção do visualizador corresponde ao ativo.

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/FlyoutViewer.js"></script> 
<style type="text/css"> 
.holder { 
 width: 40%; 
} 
#s7viewer.s7flyoutviewer { 
 width: 100%; 
 height: 100%; 
} 
</style> 
</head> 
<body> 
<div class="holder"> 
<div id="s7viewer" style="position:relative;z-index:1"></div> 
</div> 
<script type="text/javascript"> 
var flyoutViewer = new s7viewers.FlyoutViewer({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample", 
 "serverurl":"http://s7d1.scene7.com/is/image/", 
 "imagereload":"1,breakpoint,200;400;800;1600" 
} 
}).init(); 
</script> 
</body> 
</html>

A página de exemplos a seguir ilustra os usos mais reais da incorporação responsiva de design com altura irrestrita:

Demos ao vivo

Incorporação flexível de tamanho com largura e altura definidas

No caso de incorporação de tamanho flexível com largura e altura definidas, o estilo da página da Web é diferente. Ele fornece ambos os tamanhos para o "holder" DIV e o centraliza na janela do navegador. Além disso, a página da Web define o tamanho dos elementos HTML e BODY como 100%.

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
html, body { 
 width: 100%; 
 height: 100%; 
} 
.holder { 
 position: absolute; 
 left: 20%; 
 top: 20%; 
 width: 60%; 
height: 60%; 
} 
</style> 
</head> 
<body> 
<div class="holder"></div> 
</body> 
</html>

O restante das etapas de incorporação são idênticos às etapas usadas para incorporação de design responsivo com altura irrestrita. O exemplo resultante é o seguinte:

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/FlyoutViewer.js"></script> 
<style type="text/css"> 
html, body { 
 width: 100%; 
 height: 100%; 
} 
.holder { 
 position: absolute; 
 left: 20%; 
 top: 20%; 
 width: 60%; 
height: 60%; 
} 
#s7viewer.s7flyoutviewer { 
 width: 100%; 
 height: 100%; 
} 
</style> 
</head> 
<body> 
<div class="holder"> 
<div id="s7viewer" style="position:relative;z-index:1"></div> 
</div> 
<script type="text/javascript"> 
var flyoutViewer = new s7viewers.FlyoutViewer({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample", 
 "serverurl":"http://s7d1.scene7.com/is/image/", 
 "imagereload":"1,breakpoint,200;400;800;1600" 
} 
}).init(); 
</script> 
</body> 
</html>

Incorporação usando a API baseada em Setter

Em vez de usar a inicialização baseada em JSON, é possível usar a API baseada em setter e o construtor no-args. O uso desse construtor de API não aceita parâmetros e parâmetros de configuração são especificados usando os métodos de API setContainerId(), setParam() e setAsset(), com chamadas JavaScript separadas.

O exemplo a seguir ilustra o uso da incorporação de tamanho fixo com a API baseada em setter:

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/FlyoutViewer.js"></script> 
<style type="text/css"> 
#s7viewer.s7flyoutviewer { 
 width: 640px; 
 height: 480px; 
} 
</style> 
</head><body> 
<div id="s7viewer" style="position:relative;z-index:1;"></div> 
<script type="text/javascript"> 
var flyoutViewer = new s7viewers.FlyoutViewer(); 
flyoutViewer.setContainerId("s7viewer"); 
flyoutViewer.setParam("serverurl", "http://s7d1.scene7.com/is/image/"); 
flyoutViewer.setAsset("Scene7SharedAssets/ImageSet-Views-Sample"); 
flyoutViewer.init(); 
</script> 
</body> 
</html>