Flyout

O Flyout Viewer é um visualizador de imagens. Ele exibe uma imagem estática com a versão com zoom mostrada na exibição de flyout que um usuário ativa. Esse 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

Uso do 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 SDK do visualizador usados por esse visualizador específico, ativos, CSS) baixados pelo visualizador em tempo de execução

O Flyout Viewer é destinado apenas ao uso incorporado, o que significa que ele é 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 o esfolamento são semelhantes aos dos outros visualizadores. Você pode usar o CSS personalizado para aplicar a capa.

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

Interação com o Flyout Viewer

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

O visualizador também suporta 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.

Esse visualizador é totalmente acessível por teclado.

Consulte Acessibilidade e navegação do teclado.

Incorporando Visualizador de Flyout

Páginas da Web diferentes têm necessidades diferentes para o comportamento do visualizador. A página da Web pode ter layout de página estático ou usar design responsivo que é exibido de forma diferente em diferentes dispositivos ou para tamanhos de janela de navegador diferentes. Para acomodar essas necessidades, o visualizador aceita 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 é mais adequada para páginas da Web com layout de página estático.

O modo de incorporação de design responsivo supõe que o visualizador deve ser redimensionado durante o tempo de execução em resposta à alteração de tamanho de seu contêiner 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 Visualizador de Flyout, especifique pontos de interrupção explícitos para a imagem de exibição principal usando o imagereload parâmetro. Idealmente, associe seus pontos de interrupção aos pontos de interrupção da largura do visualizador, conforme determinado 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 um contêiner da página da Web DIV é dimensionado. Se a página da Web definir somente a largura do contêiner DIV, deixando a altura sem restrições, o visualizador escolhe automaticamente a altura de acordo com a proporção de aspecto do ativo usado. Essa funcionalidade significa que o ativo se encaixa perfeitamente na exibição sem nenhum preenchimento nas laterais. Esse caso de uso específico é o mais comum para páginas da Web que usam estruturas de layout de design responsivas, como Bootstrap e Foundation.

Caso contrário, se a página da Web definir a largura e a altura do contêiner do visualizador DIV, o visualizador preenche apenas essa área e segue 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, onde 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. Definição do contêiner 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 HTML head. Antes de usar a API do visualizador, verifique se você incluiu FlyoutViewer.js. FlyoutViewer.js está no 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 do Adobe Dynamic Media e ele for exibido no mesmo domínio. Caso contrário, especifique um caminho completo para um dos servidores Adobe Dynamic Media que têm os IS-Viewers instalados.

Um caminho relativo é semelhante ao seguinte:

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

1. Definição do DIV do contêiner.

   Adicione um elemento DIV vazio à página onde você 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 variável position A propriedade CSS está definida como relative ou absolute.

   É de responsabilidade da página da Web especificar o z-index para o elemento DIV de 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.

   Este é 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 de desktop, as miniaturas são colocadas abaixo da exibição principal. Ao mesmo tempo, o visualizador permite a troca do ativo principal durante o tempo de execução usando setAsset() API. 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 permitir que a exibição principal aumente sua altura e ocupe a área de miniaturas. Ou você pode manter o tamanho da exibição principal estático e recolher a área do visualizador externo, permitindo que o conteúdo da página da Web se mova para cima e, em seguida, usar o espaço real da página livre deixado 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, atribuído posteriormente a um registro predefinido do visualizador no Dynamic Media Classic, ou passado explicitamente usando o comando style.

   Consulte Personalizar o Flyout Viewer para obter mais informações sobre o estilo do visualizador com CSS.

   Este é um exemplo de definição do tamanho estático do visualizador externo em uma página de HTML:

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

   Você pode ver o comportamento com uma área fixa do visualizador externo na seguinte página de exemplo. Observe que, quando você alternar entre conjuntos, o tamanho do visualizador externo não é alterado:

   https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/flyout/FlyoutViewer-fixed-outer-area.html?lang=pt-BR?lang=pt-BR

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

   Este é um exemplo de definição do tamanho do visualizador para o interior Container Componente do SDK 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 exemplo a seguir mostra o comportamento do visualizador com um tamanho de exibição principal fixo. Observe que, ao alternar entre conjuntos, a exibição principal permanece estática e o conteúdo da página da Web se move verticalmente:

   https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/flyout/FlyoutViewer-fixed-main-view.html?lang=pt-BR?lang=pt-BR

   Além disso, 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 de s7viewers.FlyoutViewer classe , passe todas as informações de configuração para seu construtor e chame init() em uma instância do visualizador. As informações de configuração são passadas para o construtor como um objeto JSON. No mínimo, esse objeto deve ter a variável containerId campo que contém o nome da ID do contêiner do visualizador e aninhado params Objeto JSON com parâmetros de configuração compatíveis com o visualizador. Nesse caso, a variável params O objeto deve ter pelo menos o URL de disponibilização de imagens passado como serverUrl e o ativo inicial como asset parâmetro. A API de inicialização baseada em JSON permite criar e iniciar o visualizador com uma única linha de código.

   É importante ter o contêiner do visualizador adicionado ao DOM para que o código do visualizador possa encontrar o elemento do contêiner por sua ID. Alguns navegadores atrasam a criação de DOM até o fim da página da Web. Para ter compatibilidade máxima, chame a função init() método antes de fechar BODY ou no corpo onload() evento.

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

   Este é um exemplo de criação de uma instância do visualizador, transmitindo as opções mínimas necessárias de configuração ao construtor e chamando a função init() método . O exemplo assume 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 Visualizador de Flyout 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 irrestrita

Com a incorporação responsiva do design, a página da Web normalmente tem algum tipo de layout flexível em vigor que determina o tamanho de tempo de execução do contêiner do visualizador DIV. No exemplo a seguir, suponha que a página da Web permita o contêiner do visualizador DIV para obter 40% do tamanho da janela do navegador da Web, deixando sua altura sem restrições. O código de HTML da página da Web seria semelhante ao 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 essa página é semelhante às etapas para incorporação de tamanho fixo. A única diferença é que você deve 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. Definição do contêiner 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 contêiner DIV ao atual "detentor" DIV;
• adicionado imagereload parâmetro com pontos de interrupção explícitos;
• em vez de definir um tamanho de visualizador fixo usando unidades absolutas, use CSS que define a largura e a altura do visualizador como em:

#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:

Demonstrações ao vivo

Localização de demonstração alternativa

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

Se houver incorporação de tamanho flexível com largura e altura definidas, o estilo da página da Web será diferente. Ele fornece ambos os tamanhos para a variável "holder" O DIV e o centraliza na janela do navegador. Além disso, a página da Web define o tamanho da variável HTML e BODY para 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ênticas à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>

Como incorporar 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 utiliza parâmetros e parâmetros de configuração são especificados usando setContainerId(), setParam()e setAsset() Métodos de API, 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>