Flyout flyout

O Visualizador de imagem suspensa é um visualizador de imagem. Ela exibe uma imagem estática com a versão com zoom mostrada na visualização da imagem suspensa 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.

Tipo de visualizador 504.

Consulte Requisitos e pré-requisitos do sistema.

URL de demonstração section-e1c3106f5b3e445d9b95be337c2f94e2

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

Utilização do visualizador de imagem suspensa section-f21ac23d3f6449ad9765588d69584772

O Visualizador de imagem suspensa representa um arquivo JavaScript principal e um conjunto de arquivos auxiliares (uma única JavaScript inclui todos os componentes do SDK do Visualizador usados por esse visualizador específico, ativos, CSS) baixados pelo visualizador em tempo de execução

O Visualizador de imagem suspensa se destina 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 Visualizador de imagem suspensa.

A configuração e a aparência são semelhantes às dos outros visualizadores. Você pode usar CSS personalizado para aplicar a atribuição de 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 visualizador de imagem suspensa section-ab66eb6955aa4a8aa6d14a3b3acfed3f

O Visualizador de imagem suspensa é compatível com gestos de toque único e multitoque comuns em outros aplicativos móveis.

O visualizador também oferece suporte à entrada por toque e à entrada do mouse em dispositivos Windows com tela sensível ao toque e mouse. No entanto, esse suporte está limitado apenas aos navegadores Chrome, Internet Explorer 11 e Edge.

Este visualizador é totalmente acessível pelo teclado.

Consulte Acessibilidade e navegação do teclado.

Incorporação do visualizador de imagem suspensa section-6bb5d3c502544ad18a58eafe12a13435

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 diferentes dispositivos ou para diferentes tamanhos de janela de navegador. Para acomodar essas necessidades, o visualizador suporta dois modos de operação principais: incorporação de tamanho fixo e incorporação de design responsiva.

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

O modo de incorporação de design responsivo presume que o visualizador deve redimensionar 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 usa um layout de página flexível.

Ao usar o modo de incorporação de design responsivo com o Visualizador de imagem suspensa, especifique pontos de interrupção explícitos para a imagem de exibição principal usando o parâmetro imagereload. Idealmente, associe seus pontos de interrupção com os pontos de interrupção de largura do visualizador, conforme ditado 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 de página da Web DIV é dimensionado. Se a página da Web definir somente a largura do contêiner DIV, deixando sua altura irrestrita, o visualizador escolherá automaticamente sua altura de acordo com a proporção do ativo usado. Essa funcionalidade significa que o ativo se encaixa perfeitamente na exibição sem qualquer 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 preencherá somente essa área e seguirá o tamanho fornecido pelo layout da página da Web. Um bom exemplo de caso de uso é a incorporação do visualizador em uma sobreposição modal, em que 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:

<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 for distribuído no mesmo domínio. Caso contrário, você especificará um caminho completo para um dos servidores Adobe Dynamic Media que possuem os Visualizadores IS instalados.

Um caminho relativo tem a seguinte aparência:

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

Incorporação responsiva de design com altura irrestrita section-056cb574713c4d07be6d07cf3c598839

Com a incorporação de design responsivo, a página da Web normalmente tem algum tipo de layout flexível em vigor que determina o tamanho do tempo de execução do contêiner do visualizador DIV. Para o exemplo a seguir, considere que a página da Web permite que o contêiner do visualizador DIV ocupe 40% do tamanho da janela do navegador da Web, deixando sua altura irrestrita. 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 tamanho fixo do CSS do visualizador padrão pelo tamanho definido em unidades relativas.

Todas as etapas acima são as mesmas da incorporação de tamanho fixo, com as três exceções 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 taxa de 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 mais usos reais da incorporação responsiva de design com altura irrestrita:

Demonstrações em tempo real

Local de demonstração alternativo

Incorporação de tamanho flexível com largura e altura definidas section-0a329016f9414d199039776645c693de

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 o "holder" DIV e centraliza na janela do navegador. Além disso, a página da Web define o tamanho do elemento 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ênticas às etapas usadas para incorporação responsiva de design 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 section-af26f0cc2e5140e8a9bfd0c6a841a6d1

Em vez de usar a inicialização baseada em JSON, é possível usar a API baseada em setter e o construtor sem args. O uso deste construtor de API não aceita parâmetros e os 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>