Vinculación de visores de zoom a páginas web

1. En el panel Biblioteca de recursos del lado izquierdo, navegue a la carpeta de recursos que contenga el visor de zoom cuya URL desee copiar.

2. Encima del panel de exploración de recursos, en la parte derecha de la barra de herramientas, realice una de las siguientes acciones:

   • Haga clic en Vista de cuadrícula o Vista de lista . En el panel de exploración de recursos, haga doble clic en un único recurso para abrirlo en la vista de detalles. En el panel URL y código incrustado de la derecha, haga clic en Copiar URL a la derecha del visor que desee.

   • Haga clic en Vista de cuadrícula . En el panel de exploración de recursos, seleccione un único recurso y, a continuación, haga clic en Vista previa > Lista del visor debajo de la imagen en miniatura.

     En la página Lista del visor, en la columna Acciones de la tabla, haga clic en Copiar URL .

   • Haga clic en Vista de lista . En el panel de exploración de recursos, seleccione un único recurso y, a continuación, haga clic en Vista previa > Lista del visor a la derecha de la imagen en miniatura.

     En la página Lista del visor, en la columna Acciones de la tabla, haga clic en Copiar URL .

   • Haga clic en Vista de cuadrícula , Vista de lista o Vista de detalles . En la misma barra de herramientas, haga clic en Vista previa > Lista del visor .

     En la página Lista del visor, en la columna Acciones de la tabla, haga clic en Copiar URL .

Normalmente, los visitantes de un sitio web aplican zoom en las imágenes seleccionando primero un icono de zoom (representado por un icono de lupa, por lo general). Si se selecciona este icono, se inicia una página web dinámica (ASP o JSP) que muestra la imagen en una ventana emergente. Es en esta ventana emergente donde los visitantes aplican zoom en la imagen.

A continuación mostramos un ejemplo de código que puede crear el personal de TI para abrir una ventana emergente para la aplicación de zoom:

<a href="javascript:zoom_window();"> 
<img src="http://www.scene7.com/images/buttons/zoomMag.gif" width="50" height="50" border="0" /></a>

Observe que el vínculo llama a una función de JavaScript, zoom_window() . La función zoom_window() se coloca encima de la etiqueta </HEAD> en el código HTML de la página web:

<script language="javascript"> 
<!-- 
function zoom_window() { 
window.open("http://s7d4.scene7.com/s7ondemand/zoom/flasht_zoom.jsp 
?company=S7Web&sku=Backpack1&zoomwidth=420&zoomheight=470& 
vc=skin=/is-viewers/flash/basicZoomSkin.swf","", "toolbar=no,location=no,directories=no," 
+ "status=no,menubar=no,scrollbars=yes"+ "resizable=yes,width=500,height=450,top=0,left=0,right=0,bottom=0") 
} 
--> 
</script>

Observe que la URL en la ventana emergente es una URL de Scene7 ( http://s7d4.scene7.com/s7ondemand/zoom/flasht_zoom.jsp ). Esta URL llama a la ventana emergente de zoom (una página JSP) que contiene el visor Flash de zoom y la imagen principal. La página JSP, el visor de zoom y la imagen principal se encuentran en servidores de Scene7. Reemplace la URL de Scene7 en el código con la URL de zoom.

En la URL verá un parámetro de SKU ( &sku=Backpack1 ). La cadena que sigue a &sku= es Backpack1 . El vínculo emergente para la función de zoom del producto contiene una SKU de producto diferente, que indica a la página JSP de Scene7 JSP la imagen de producto que debe mostrar.

El usuario selecciona el vínculo para la función de zoom en la página de detalles del producto que abre la pantalla.

El uso de la función de código incrustado permite revisar el código del visor de zoom seleccionado. También puede copiar el código en el portapapeles para pegarlo en sus páginas web para la implementación del visor. No se permite la edición del código en el cuadro de diálogo Código incrustado.

Para copiar el código incrustado de un visor de zoom

1. En el panel Biblioteca de recursos del lado izquierdo, navegue a la carpeta de recursos que contenga el visor de zoom cuyo código incrustado desee copiar.

2. Encima del panel de exploración de recursos, en la parte derecha de la barra de herramientas, realice una de las siguientes acciones:

   • Haga clic en Vista de cuadrícula . En el panel de exploración de recursos, haga doble clic en un único recurso para abrirlo en la vista de detalles. En el panel URL y código incrustado de la derecha, haga clic en Código incrustado a la derecha del visor que desee.

   • Haga clic en Vista de cuadrícula . En el panel de exploración de recursos, seleccione un único recurso y, a continuación, haga clic en Vista previa > Lista del visor debajo de la imagen en miniatura.

     En la página Lista del visor, en la columna Acciones de la tabla, haga clic en Código incrustado .

   • Haga clic en Vista de lista . En el panel de exploración de recursos, seleccione un único recurso y, a continuación, haga clic en Vista previa > Lista del visor a la derecha de la imagen en miniatura.

     En la página Lista del visor, en la columna Acciones de la tabla, haga clic en Código incrustado .

   • Haga clic en Vista de cuadrícula , Vista de lista o Vista de detalles . En la misma barra de herramientas, haga clic en Vista previa > Lista del visor .

     En la página Lista del visor, en la columna Acciones de la tabla, haga clic en Código incrustado .

3. En el cuadro de diálogo Código incrustado, haga clic en Copiar al portapapeles .

   No se permite la edición del código en el cuadro de diálogo Código incrustado.

4. Haga clic en Cerrar.