Zoom in-line

O Visualizador de zoom incorporado é um visualizador de imagens. Ele exibe uma imagem estática com a versão com zoom mostrada sobre a imagem estática quando um usuário passa sobre ou toca a visualização principal. 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

https://s7d9.scene7.com/s7viewers/html5/FlyoutViewer.html?asset=Scene7SharedAssets/ImageSet-Views-Sample&config=Scene7SharedAssets/Universal_HTML5_Zoom_Inline&stagesize=500,400

Usando o Visualizador de zoom incorporado

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

O Visualizador de zoom em linha pode ser usado no modo pop-up usando a página de HTML pronta para produção fornecida com os Visualizadores do servidor de imagens ou no modo incorporado, onde é integrado em uma página da Web de destino usando a API documentada.

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

Interagir com o visualizador de zoom em linha

O Visualizador de zoom integrado suporta 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 pelo teclado.

Incorporação do visualizador de zoom em linha

Páginas da Web diferentes têm necessidades diferentes para o comportamento do visualizador. Às vezes, uma página da Web fornece um link clicável que abre o visualizador em uma janela do navegador separada. Em outros casos, pode ser necessário incorporar o visualizador diretamente na página de hospedagem. No último caso, 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 do navegador. Para acomodar essas necessidades, o visualizador é compatível com três modos de operação principais: pop-up, incorporação de tamanho fixo e incorporação responsiva.

Pop-up

No modo pop-up, o visualizador é aberto em uma janela ou guia separada do navegador da Web. Ela ocupa toda a área da janela do navegador e se ajusta quando a janela do navegador é redimensionada ou a orientação do dispositivo é alterada.

Esse modo é o mais comum para dispositivos móveis. A página da Web carrega o visualizador usando window.open() Chamada de JavaScript, configurada corretamente A elemento HTML, ou de qualquer outra forma adequada.

É recomendável usar a página de HTML para o modo pop-up chamado FlyoutViewer.html. Ele está localizado sob o html5/ subpasta da implantação padrão do Image Serving-Viewers:

<s7viewers_root>/html5/FlyoutViewer.html

Também é necessário ter o componente FlyoutZoomView configurado para funcionar no modo de zoom em linha. É recomendável usar o pronto para uso Scene7SharedAssets/Universal_HTML5_Zoom_Inline para o visualizador de Zoom em linha ou uma predefinição personalizada derivada dele. A personalização visual pode ser obtida ao aplicar CSS personalizado.

Veja a seguir um exemplo de código HTML que abre o visualizador em uma nova janela:

 <a href="http://s7d1.scene7.com/s7viewers/html5/FlyoutViewer.html?asset=Scene7SharedAssets/ImageSet-Views-Sample&config=Scene7SharedAssets/Universal_HTML5_Zoom_Inline"target="_blank">Open popup viewer</a>

Incorporação de tamanho fixo e Incorporação responsiva

No modo incorporado, o visualizador é adicionado à página da Web existente, que pode já ter algum conteúdo de cliente não relacionado ao visualizador. O visualizador normalmente ocupa apenas uma parte do espaço físico da página da Web.

Os principais casos de uso são páginas da Web orientadas para desktops ou dispositivos tablets e também páginas da Web responsivas que ajustam o layout automaticamente dependendo do tipo de dispositivo.

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 zoom em linha, 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 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 forma como um contêiner de página da Web DIV é dimensionado. Se a página da Web definir somente a largura do container DIV, deixando sua altura irrestrita, o visualizador escolhe 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 ou Foundation.

Caso contrário, se a página da Web definir a largura e a altura do container do visualizador DIV, o visualizador preenche somente essa área e segue 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:

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

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

3. Definindo o tamanho do visualizador.

4. Criar e inicializar o visualizador.

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

   A criação de um visualizador exige a adição de uma tag de script no cabeçalho de HTML. Antes de usar a API do visualizador, inclua FlyoutViewer.js. FlyoutViewer.js está no seguinte html5/js/ subpasta da 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 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>

1. Definição do container DIV.

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

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

   É responsabilidade da página da Web especificar as z-index para o elemento DIV do espaço reservado. Isso garante que a parte da imagem suspensa do visualizador apareça sobre os outros elementos da página da Web.

   Veja a seguir um exemplo de um elemento DIV de espaço reservado definido:

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

2. Definindo o tamanho do visualizador.

   Este visualizador exibe miniaturas ao trabalhar com conjuntos de vários itens. Nos sistemas 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 de 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 usar o espaço livre da página deixado nas miniaturas.

   Para manter intactos os limites do visualizador externo, 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 do HTML ou em um arquivo CSS do visualizador personalizado e, posteriormente, atribuído a um registro predefinido do visualizador no Dynamic Media Classic, ou passado explicitamente usando o comando style.

   Consulte Personalizando o Visualizador de Zoom em Linha para obter mais informações sobre como estilizar o visualizador com CSS.

   Veja a seguir 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 página de exemplo a seguir. Observe que, ao alternar entre conjuntos, o tamanho do visualizador externo não é alterado:

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

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

   Veja a seguir um exemplo de definição do tamanho do visualizador para o Container Componente do SDK para que a área de exibição principal não altere o 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 quando você alternar entre conjuntos, a exibição principal permanecerá estática e o conteúdo da página da Web se moverá verticalmente:

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

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

3. Criar e inicializar o visualizador.

   Quando tiver concluído as etapas acima, você criará uma instância de s7viewers.FlyoutViewer classe, transmita 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 ao construtor como um objeto JSON. No mínimo, esse objeto deve ter a containerId campo que contém o nome da ID do contêiner de visualização e aninhado params Objeto JSON com parâmetros de configuração compatíveis com o visualizador. Neste caso, o params objeto deve ter pelo menos o URL do Servidor de imagens passado como serverUrl propriedade; o ativo inicial como asset parâmetro, caminho base para carregar CSS como contentUrl e o nome da predefinição como config parâmetro. A API de inicialização baseada em JSON permite criar e iniciar o visualizador com uma única linha de código.

   É importante adicionar o contêiner do visualizador 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 do DOM até o fim da página da Web. Para obter compatibilidade máxima, chame o init() método antes do fechamento BODY ou no corpo onload() evento.

   Ao mesmo tempo, o elemento de contêiner não deve necessariamente fazer parte do layout da página da Web ainda. Por exemplo, pode ser 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 de contêiner de volta ao layout. Quando essa ação acontece, o carregamento do visualizador é retomado automaticamente.

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

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

   O código a seguir é um exemplo completo de uma página da Web trivial que incorpora o Visualizador de zoom em linha 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 inlineZoomViewer = new s7viewers.FlyoutViewer({
    "containerId":"s7viewer",
   "params":{
    "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
   "config" : "Scene7SharedAssets/Universal_HTML5_Zoom_Inline",
   "contenturl" : "http://s7d1.scene7.com/is/content/",
    "serverurl":"http://s7d1.scene7.com/is/image/"
   }
   }).init();
   </script>
   </body>
   </html>
   

Incorporação responsiva de design com altura irrestrita

Com a incorporação responsiva de design, 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 container do visualizador DIV. Para o exemplo a seguir, considere que a página da Web permite o container do visualizador DIV para obter 40% do tamanho da janela do navegador 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.

1. Adicionar o arquivo JavaScript do visualizador à página da Web.
2. Definição do contêiner DIV.
3. Definindo o tamanho do visualizador.
4. Criar e inicializar o visualizador.

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

• adicionar o contêiner DIV ao "detentor" existente DIV;
• adicionado imagereload parâmetro com pontos de interrupção explícitos;
• em vez de definir um tamanho fixo do visualizador usando unidades absolutas, use CSS que defina o visualizador width e height a 100% como no seguinte:

#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 inlineZoomViewer = new s7viewers.FlyoutViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
"config" : "Scene7SharedAssets/Universal_HTML5_Zoom_Inline",
"contenturl" : "http://s7d1.scene7.com/is/content/",
 "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 ao vivo

Local de demonstração alternativo

Incorporação de tamanho flexível 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 o "holder" DIV e 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 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 inlineZoomViewer = new s7viewers.FlyoutViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
"config" : "Scene7SharedAssets/Universal_HTML5_Zoom_Inline",
"contenturl" : "http://s7d1.scene7.com/is/content/",
 "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 sem args. O uso deste construtor de API não aceita parâmetros e os parâmetros de configuração são especificados usando setContainerId(), setParam(), e setAsset() Métodos de API do, 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 inlineZoomViewer = new s7viewers.FlyoutViewer();
inlineZoomViewer.setContainerId("s7viewer");
inlineZoomViewer.setParam("serverurl", "http://s7d1.scene7.com/is/image/");
inlineZoomViewer.setParam("config", "Scene7SharedAssets/Universal_HTML5_Zoom_Inline");
inlineZoomViewer.setParam("contenturl", "http://s7d1.scene7.com/is/content/");
inlineZoomViewer.setAsset("Scene7SharedAssets/ImageSet-Views-Sample");
inlineZoomViewer.init();
</script>
</body>
</html>