Highslide Tutorial


CONTENIDO

  • Highslide JS Core
  • Marcado en miniatura
  • Reglas CSS
  • Reglas CSS individuales
  • Tres niveles de personalización
  • Los títulos y encabezados
  • Cerrando el expansor de un enlace de texto
  • Un controlador de movimiento para la imagen
  • Enlaces anterior y siguiente
  • Posicionamiento del contenido ampliado
  • Superposiciones personalizadas
  • Los mapas de imagen

Con Galería
  • Adición de una presentación de diapositivas

Con HTML
  • Normas adicionales de CSS
  • Controlar el tamaño del expansor
  • Controlar los encabezados y pies
  • Envoltorios de contenido auto representación
  • Un controlador de tamaño para la imagen
  • El uso de contenido en línea Ancho de un envoltorio de prestación auto
  • Viendo el contenido AJAX
  • Viendo el contenido de iframe
  • AJAX vs iframe - pros y contras
  • Viendo el contenido de Flash
  • Referencia de la API
  

MARCADO EN MINIATURA


La forma básica de marcar la uña del pulgar es poner un -tag alrededor de una img -tag. El un -tag tiene que ser suministrado por la correcta clase y onclick atributos como a continuación. En este caso el navegador apunta directamente a la imagen si la secuencia de comandos falla. Si está utilizando galerías, Highslide utiliza el atributo onclick para indexar las imágenes en miniatura, así que es importante que la attrubute onclick está escrito en texto plano y no se define en un controlador de eventos en otras partes de la página.

<a href="large-image.jpg" class="highslide" onclick="return hs.expand (this)"> 
    <img src = alt "thumbnail.jpg" = "Highslide JS" 
        title = "Haga Click para agrandar" height = "100" width = "100" /> 
</a> 

Es posible que desee crear una página HTML para mostrar si el script falla en los navegadores antiguos o si el usuario ha desactivado jаvascript. Esta es una buena idea para los sitios de alimentación de base de datos, donde se puede mostrar la leyenda de texto en la página de reserva. Para lograr esto usted suministra la llamada a la función del onclick -attribute con un segundo parámetro en el que se especifica un hs.src. Lea más acerca de estos parámetros en tres niveles de personalización de abajo.

<a href="showimage.php?src=images/large-image.jpg" class="highslide" 
        onclick="return hs.expand (this, {src:'images/large-image.jpg'} )"> 
    <img src = "thumbnail.jpg" alt = "Highslide JS" title = "Haga Click para agrandar" 
        height = "100" width = "100" /> 
</a>

Si prefiere separar el contenido de la conducta en el código, se puede descargar una configuración Highslide con "discreto" en el Configurador y marcar la miniatura de la siguiente forma limpia utilizando rel = "highslide". En este caso se puede añadir opciones adicionales utilizando el hs.onSetClickEvent evento y el hs.isUnobtrusiveAnchor función de devolución de llamada.
<a href="large-image.jpg" class="highslide" rel="highslide"> 
    <img src = alt "thumbnail.jpg" = "Highslide JS" title = "Haga Click para agrandar" 
        height = "100" width = "100" /> 
</a> 

REGLAS CSS

Highslide JS se basa en una serie de reglas CSS para el diseño y la funcionalidad para trabajar. Puede modificar las propiedades de presentación, como frontera, fondo, acolchado etc. para adaptarse a su diseño. Otras propiedades, como la posición y la pantalla, deben permanecer intactos. Estos CSS-reglas se definen:
 
.highslide contenedor
 
El contenedor de alto nivel de todo el contenido dinámico generado por Highslide. Esta clase tiene una declaración familia de fuentes y el tipo que por defecto se aplica a todas las ventanas emergentes.
 
.highslide
 
Se utiliza en la una -tag que rodea la imagen en miniatura para aplicar el cursor de zoom.
 
ancla .highslide activo
 
Desde la versión 3.3, el nombre de clase adicional dado al ancla cuando se abre. Para ocultar la miniatura cuando se abre una imagen completa, establezca la visibilidad: oculto en .highslide-activa-presentadora img.
 
.highslide-leyenda
 
Estilos para el subtítulo. Obviamente es necesario sólo si utiliza subtítulos.
 
.highslide-controles
 
El elemento contenedor para los controles superpuestos en la imagen en el modo de presentación de diapositivas. Nombre de la clase de cada solo botón
 
.highslide-créditos
 
La etiqueta de créditos, "Powered by ...".
 
.highslide-oscurecimiento
 
Cuando se utiliza una página de fondo atenuado, aquí es donde se especifica el color del fondo.
 
.highslide-full-ampliar
 
Desde la versión 3.3, la regla CSS donde se define la imagen de fondo y otras propiedades en la etiqueta completa-expandirse.
 
.highslide-encabezamiento
 
Estilos para el rubro.
 
.highslide imagen
 
Aquí es donde se especifica las fronteras para la imagen ampliada.
 
.highslide-image-desenfoque
 
Se produce en la imagen expandida cuando otra imagen se expande en la parte superior de la misma. Los estilos de .highslide imagen se heredan de la imagen borrosa, pero se puede especificar propiedades adicionales. Por ejemplo, una diferente-color de borde para la imagen borrosa.
 
.highslide de carga
 
Estilos para la Carga -elemento que aparece en la parte superior de la imagen cuando la imagen de tamaño completo se está cargando. Se muestra un gráfico de carga mediante la definición de una imagen de fondo para este elemento. Para la carga no -text para mostrar, ajustar el hs.loadingText.
 
.highslide-move
 
El nombre de clase que se utiliza si quiere un ancla de texto en el título para permitir al usuario mover la imagen. Ver Un tirador de desplazamiento de la imagen.
 
.highslide número
 
El estilo para el número de índice, como "Imagen 1 de 5".
 
.highslide-superposición
 
El nombre de la clase inicial de superposiciones personalizadas. Esta clase sólo establece que la pantalla de la propiedad debe ser ninguno. Usted puede utilizar otros nombres de clase para su superposición si se especifica la correcta visualización.

REGLAS CSS INDIVIDUALES

Usted puede dar a cada expansor específico él es poseer las propiedades CSS. Proporcione la llamada a la función del onclick -attribute con un segundo parámetro en el que se especifica un hs.wrapperClassName. Lea más acerca de estos parámetros en tres niveles de personalización de abajo.
 
onclick = "return hs.expand (esto, {wrapperClassName: 'mi-envoltorio de clase'})"
 
Ahora se puede definir nuevas reglas CSS que heredan las reglas generales, pero cuyas propiedades sobrescribir los de las normas generales:
.mi-envoltorio de clase .highslide imagen 
    {border-color: 
negro;} 
.my-envoltorio de clase .highslide-caption 
    {border-color: negro; 
    background-color: gris, 
    color: 
blanco;} 

TRES NIVELES DE PERSONALIZACIÓN

1) Ajustes para todo el sitio
 
Aunque usted puede ajustar la configuración en la parte superior de los highslide.js sí mismo, este enfoque puede ser desafortunado si usted desea actualizar a una nueva versión de Highslide JS más tarde, ya que hay que cambiar la configuración en el nuevo archivo. Además, si se utiliza la versión compacta de la secuencia de comandos, no se puede hacer esto. Las mejores prácticas para la configuración del sitio es crear un archivo separado, por ejemplo highslide.cfg.js e incluirlo directamente después highslide.js. En este archivo, se define la configuración de esta manera:

hs.graphicsDir = 'mi-highslide-dir / gráficos /'; hs.outlineType = 'resplandor exterior';

2) Ajustes para cada sola página HTML
 
Usted puede cambiar la configuración para el objeto en la página HTML en sí. Esto tiene que ser posterior a la inclusión de la escritura en el código fuente. Si no desea que el bloque de secuencia de comandos en la parte superior de todos sus archivos HTML, lo puso en un archivo separado, como en el ejemplo anterior. El siguiente ejemplo muestra cómo configurar un nuevo directorio de gráficos y un no-default esquema gráfico, así como traducir cadenas de idioma.

<script type = "text / jаvascript" src = "mis-highslide-dir / highslide.js"> </ script> 
<script type = "text / jаvascript"> hs.graphicsDir = 'mi-highslide-dir / gráficos / '; hs.outlineType =' outer-resplandor '; </ script>

3) Los ajustes para cada imagen individual

Algunos ajustes se pueden anular en línea para cada imagen en su página web. Esto se aplica a los valores que figuran en hs.overrides. Suministrar los ajustes como un objeto literal en el segundo parámetro de la hs.expand función:
onclick = "return hs.expand (esto, {wrapperClassName: 'mi-envoltorio de clase', alinee: 'centro'})" 
Si prefiere dejar caer el atributo onclick y separar el contenido de la conducta, ver hs.onSetClickEvent.

Para usuarios avanzados: puede crear propiedades personalizadas para enviar al objeto hs.Expander. Las propiedades se suministran en el tercer parámetro del hs.expand llamada a la función. Por ejemplo, puede proporcionar una url para utilizar dentro HsExpander:
onclick = "return hs.expand (esto, null, {url: 'https://google.com'})"
La variable personalizada puede entonces tener acceso dentro del objeto hs.Expander través del this.custom propiedad. Este ejemplo muestra cómo se puede anular acción, haga clic en el hs.Expander.prototype.onImageClick evento:

hs.Expander.prototype.onImageClick = function () 
   {window.location.href = 
this.custom.url;}
La agrupación de pop-ups individuales utilizando objetos de configuración con nombre En # 3 anterior se define el objeto de configuración individual directamente en el segundo parámetro de hs.expand. En algunos casos puede pedir a un grupo de imágenes a tener las mismas opciones, pero no todos. Así que no puede especificar las opciones a nivel mundial, y la especificación de la misma config otra vez para cada una de las miniaturas del grupo provoca código repetitiva como esto:
 
<a id="thumb1" href="image1.jpg" class="highslide" 
        onclick="return hs.expand (this, {slideshowGroup: 1, thumbnailId:'thumb1'} )"> 
    <img src = "thumbnail1. jpg "alt =" Highslide JS "title =" Haga Click para agrandar 
        "height =" 100 "width =" 100 "/> 
</a> 
<a href =" image1.jpg "class =" highslide 
        "onclick =" return hs .expand (esto, {slideshowGroup: 1, thumbnailId: 'thumb1'}) "> 
    <img src =" thumbnail1.jpg "alt =" Highslide JS "title =" Haga Click para agrandar 
        "height =" 100 "width =" 100 "/> 
</a>

Este código es ineficiente y muchas veces más difícil de mantener. Si desea cambiar una opción para todos los artículos del grupo, tienes que cambiarlo para cada uno de ellos. Una mejor opción es crear una variable llamada para el objeto de configuración y definirlo en la parte superior de su página web o en highslide.config.js. Esto es lo que se hace en algunos de los ejemplos proporcionados, así como en el código generado por el Editor.
En la sección de la cabeza, o en highslide.config.js:
 

var config1 = {slideshowGroup: 1, thumbnailId: 'thumb1'}
El código HTML:

<a id="thumb1" href="image1.jpg" class="highslide" 
        onclick="return hs.expand (this, config1 )"> 
    <img src = "thumbnail1.jpg" alt = "Highslide JS" title = "Haga Click para agrandar" 
        height = "100" width = "100" /> 
</a> 
<a href="image1.jpg" class="highslide" 
        onclick="return hs.expand (this, config1 )"> 
    < img src = alt "thumbnail1.jpg" = "Highslide JS" title = "Haga Click para agrandar" 
        height = "100" width = "100" /> 
</a> 

SUBTÍTULOS Y ENCABEZADOS

Los títulos y epígrafes son tipos especiales de superposiciones personalizados, que por defecto aparece debajo y por encima de la imagen, respectivamente. Simples subtítulos y encabezados textos pueden ser retirado del alt o título atributo de la miniatura utilizando hs.captionEval y hs.headingEval, escrito en los hs.captionText y hs.headingText opciones o definida como una oculta div en su página web que contiene HTML. Para utilizar HTML, se crea un div directamente después de su <a> miniatura y darle un nombre de clase de highslide-caption o highslide-encabezamiento.
 
Si quieres un mejor control, consulte hs.captionId y hs.headingId.
 
Un HTML subtítulo como se indica en el punto 3 anterior:
<a id="thumb1" href="large-image.jpg" class="highslide" 
        onclick="return hs.expand (this)"> 
    <img src = "thumbnail.jpg" alt = "Highslide JS" title = "Haga Click para agrandar" 
        height = "100" width = "100" /> 
</a> 
<div class = 'highslide-caption> Leyenda de texto o HTML adicional va aquí </ div>
También puede establecer hs.captionId = 'theCaption' en la cabeza de la sección de reutilizar el mismo título para todas las imágenes.
 

Usted puede agregar cualquier HTML que desea dentro del epígrafe div, por ejemplo un enlace Close (ver más abajo).

CIERRE DE LA IMAGEN DE UN ENLACE DE TEXTO

Es posible que desee poner un enlace Cerrar o gráfico dentro de la leyenda, en una plantilla personalizada o en el contenido HTML. Llame hs.close () así:

<a href="#" onclick="return hs.close (this)"> Cerrar </a>
Si desea cerrar la imagen de otra parte de la página, dar la imagen de un -tag una Identificación -attribute, a continuación, llamar hs.close con el id de esta manera:
<a href="#" onclick="return hs.close ('thumb1')"> Cerrar </a>

UN CONTROLADOR DE MOVIMIENTO PARA LA IMAGEN

Un controlador de movimiento también se puede colocar dentro de la leyenda, en una plantilla personalizada o en el contenido HTML. Todo lo que tienes que hacer es proporcionar el enlace con el nombre de clase highslide-move.

 
<a href="#" class="highslide-move"> 
    Move 
</a>
  
ENLACES ANTERIOR Y SIGUIENTE
 
Si usted tiene una serie de fotos, puede poner enlaces Anterior y Siguiente en el rubro, en una plantilla personalizada o en el contenido HTML:
 
<a href="#" onclick="return hs.previous (this)"  title="Previous (left flecha key)"> </a> Anterior <a href = "#" onclick = "return hs.next (esto ) "title =" Siguiente (derecha Tecla de flecha) "> Siguiente </a>

POSICIONAMIENTO DEL CONTENIDO AMPLIADO


Por defecto el contenido ampliado aparece centrado por encima de la abertura de anclaje si la vista permite. Si los bumbps emergentes en uno de los lados de la ventana gráfica, se moverá de manera que todo el contenido es visible. La posición puede ser controlado en detalle mediante el uso de uno de los siguientes métodos. Estos requieren que use la configuración de highslide full.js, o usted consigue su propia configuración del Configurador con "Posicionamiento Avanzado" encendido.

Para centrar el expansor en el visor, utilice el hs.align ajuste.
 
Utilice la hs.anchor establecer para controlar dónde la ventana emergente se expande en relación con el ancla de apertura.
Utilice los hs.marginTop, hs.marginRight, hs.marginBottom o hs.marginLeft ajustes para hacer espacio, por ejemplo, para un menú superior o izquierdo.

Utilice hs.targetX y hs.targetY para obtener el control con precisión de píxel de la posición del contenido ampliado.

SUPERPOSICIONES PERSONALIZADAS

Highslide JS utiliza internamente dos superposiciones en la imagen, es decir, los créditos y el enlace a tamaño real, ampliar que aparece cuando el tamaño de la imagen se ha reducido para adaptarse a la cliente. Si utiliza subtítulos o títulos, esos también se añaden internamente como superposiciones.
Además, puede definir sus propias plantillas. En primer lugar, crear un div en algún lugar de la página, y póngale el nombre de la clase highslide-overlay. El div también necesita una única identificación. Por favor, observe que usted no puede utilizar este ID para aplicar estilos, porque todo el div se clona internamente en el guión, y el clon pierde el ello. En su lugar, puede aplicar nombres de clases adicionales para controlar los estilos CSS.
<div id = "barra de control" class = "controlbar-highslide superposición"> 
    <a href="#" onclick="return hs.previous (this)" 
            title="Previous (left flecha key)"> 
        Anterior 
    </a> 
    <a href="#" onclick="return hs.next (this)" 
            title="Next (right flecha key)"> 
        Siguiente 
    </a> 
    <a href = "#" class = título "highslide-move" = "Haga clic y arrastre para mover" 
            style = "margin-left: 10px"> 
        Mover 
    </a> 
    <a href="#" onclick=" hs.close (this)"> 
        Cierre 
    </a> 
</ div>
 

A continuación, usted tiene que atar la superposición de una o más imágenes en miniatura. En la sección principal de la página HTML, después de la highslide.js se incluye la escritura, llame al hs.registerOverlay función. La función toma un objeto de matriz como primer parámetro. Ver hs.registerOverlay para qué opciones que tiene para la personalización de la superposición.

Cuando desea agregar superposiciones individuales para cada expansor, hs.Expander.prototype.createOverlay es generalmente una mejor opción. O puede utilizar el hs.Expander.prototype.onCreateOverlay evento para cambiar las propiedades de la plantilla antes de que se añade a cada sola expansor.

LOS MAPAS DE IMAGEN

Desde la versión 4.0 Highslide está optimizado para los mapas de imágenes. Como se muestra por debajo de la zona objeto está marcado con un atributo onclick. Ver un ejemplo vivo en el ejemplo-image-map.html.

<img src = "scandinavia.jpg" alt = "" usemap = "# imgmap1" /> 
<map id = "imgmap1" name = "imgmap1"> 
    <area shape = "" alt = "rect" title = "Islandia Islandia "coords =" 1,43,110,135 
        "href =" iceland.jpg "onclick =" return hs.expand (este) "/> 
    <area shape =" círculo "alt =" "title =" Dinamarca "coords =" Dinamarca 239.352, 36 
        "href =" denmark.jpg "onclick =" return hs.expand (este) "/> 
</ map>
Con Galería

Desde la versión 4.0, Highslide apoya galerías de imágenes con diapositivas, la navegación interna y controles compartidos. Ver hs.addSlideshow para un ejemplo de código y demostración en vivo.
 
Con HTML

La extensión Highslide HTML permite plena contenido HTML que se muestra en una ventana emergente Highslide. Para utilizar esta funcionalidad, usted tiene que utilizar una versión de Highslide con las opciones apropiadas controladas en el Configurador. La forma básica de marcar el expansor HTML es el siguiente:
<a href="fallback.htm" class="highslide" 
onclick="return hs.htmlExpand (this, 
    {contentId:'my-content'} )"> 
Haga clic aquí 
</a> <div class = "highslide-html -contenido "id =" "mi contenido     style =" width: 200px ">     <a href="#" onclick=" hs.close (this)">         Cerrar     </a>     <div class =" highslide-cuerpo " >         Recuerde incluir un medio de cerrar         el expansor.     </ div> </ div>
Como puede ver, el contenido vive de forma anónima en algún lugar de tu página igual que la imagen leyendas, hasta que se levantó y se muestran por Highslide. Mediante el uso de contenido AJAX o contenido iframe puede mover el contenido de la página.
 

NORMAS ADICIONALES DE CSS

 
.highslide-html
Como highslide-imagen, aquí es donde se especifica las fronteras para el contenido HTML.
.highslide-html-desenfoque
Equivalente a highslide-image-desenfoque.
.highslide-html-content
Clase general que se aplica al elemento que desea expandir.
.highslide-redimensionar
El nombre de clase que se utiliza si desea que un elemento dentro del contenido de comportarse como un controlador de tamaño.
.highslide cuerpo
Si el contenido HTML elemento contiene un elemento con este nombre de clase, este elemento se mostrará barras de desplazamiento si se supera el tamaño del expansor. De esta manera usted puede crear encabezados y pies de página. Si no, las barras de desplazamiento se muestran en el elemento exterior. También, cuando se muestra AJAX, Iframe o contenido de Flash, que se colocará en el envase.
.highslide-header , .highslide-footer , .highslide-previous , .highslide-next , .highslide-move , .highslide-close
 
Estas son las reglas CSS asociados a la prestación de auto.

CONTROLAR EL TAMAÑO DEL EXPANSOR

Usted controla el tamaño de la expansión mediante el establecimiento de anchura y altura de CSS en el div contenido. Al establecer ninguna en absoluto el expansor se está comportando como un div normal y lleva toda la anchura de la ventana gráfica si el contenido lo quiere. Mediante el establecimiento de ancho alto y no, el expansor tiene la altura que necesita dentro de la ventana gráfica.

Para un control más detallado de cada solo expansor, utilice hs.width y hs.height. Estas propiedades tienen prioridad sobre aquellos conjunto el uso de CSS en el div contenido. Cuando se utiliza auto prestación envoltorios de contenido, esto es generalmente una forma más fácil de utilizar por separado hs.wrapperClassName propiedades y definir las reglas CSS correspondientes.

El tamaño también es afectada por hs.allowSizeReduction, hs.allowWidthReduction y hs.allowHeightReduction.

CONTROLAR LOS ENCABEZADOS Y PIES

Si el contenido ocupa más área de pantalla de la ventana expandida, aparecerán barras de desplazamiento. Sin embargo, usted es capaz de controlar dónde colocar el área de desplazamiento, por lo que puede mostrar encabezados y pies de página que no se desplazan. Si define un div con nombre de clase highslide-cuerpo, este div se tragará a todos los que excedan de contenido y mostrar barras de desplazamiento. Recuerde que usted puede ajustar el aspecto de la zona de desplazamiento mediante el uso de los márgenes de CSS.
<div class = "highslide-html-content" id = "ejemplo1"> 
    <! - cabecera -> 
    <a href="#" onclick=" hs.close (this)"> 
        Cerrar 
    </a> 
    <! - contenido de desplazamiento -> 
    <div class = "highslide-cuerpo"> 
        Algunos larga contenido aquí. 
    </ div> 
    <! - pie de página ->         
    <div> Pie de página </ div> </ div> 

ENVOLTORIOS DE CONTENIDO AUTO REPRESENTACIÓN


Desde la versión 3.3, si hs.contentId no está ajustada para un expansor de HTML, se crea un auto prestado contenido envoltorio internamente en Highslide. El contenido principal es entonces o bien agarró por el Ajax, Iframe, Flash o maincontent palabra clave. Este contenedor está destinado a ser en gran medida de estilo mediante CSS, y se puede usar el estilo, por ejemplo, para eliminar los elementos que no desea. Las cadenas de idioma se pueden localizar a través de la hs.lang objeto. Para modificar el código HTML de la envoltura, reemplazar la propiedad contentWrapper del hs.skin objeto.

La estructura HTML del contenido auto prestado se parece a la siguiente. El contenido incluido se inyecta en el cuerpo highslide.

<div class = "highslide-header"> 
    <ul> 
        <li class = "-highslide anterior"> 
            <a href = título de "#" = "{hs.lang .previousTitle}" onclick = "return hs.previous (esto ) "> 
            <span> {hs.lang .previousText} </ span> </a> 
        </ li> 
        clase <li =" highslide-siguiente "> 
            <a href =" "title =" # {hs.lang. nextTitle} "onclick =" return hs.next (este) "><span>
{hs.lang .nextText} </ span> </a>         </ li>         clase <li =" highslide-move ">             <a href = "#" title = "{hs.lang .moveTitle}" onclick = "return false">             <span> {hs.lang .moveText} </ span> </a>         </ li>         clase <li = "highslide -cerca ">             <a href="#" title="{ hs.lang .closeTitle}" onclick="return hs.close (this)">             <span> {hs.lang .closeText} </ span> </ a>         </ li>     </ ul> </ div> <div class => </ div> "highslide-cuerpo" <div class => <div> "highslide-pie de página"     clase <span = "highslide-cambio de tamaño" title = "{hs.lang .resizeTitle}"> <span> </ span> </ span> </ div> </ div>

Este es un ejemplo de cómo el estilo el contenido auto-rendido. Este ejemplo define el aspecto de un envoltorio con el wrapperClassName defecto, "highslide-wrapper". Para crear grupos o popups individuales con diferente estilo, aplique una hs.wrapperClassName a ella, y redefinir las reglas CSS para ese envoltorio.
.highslide-wrapper 
    {background-color: 
blanco;} 
/ * Establecer 400px como el ancho predeterminado para expansores * / 
.highslide-wrapper .highslide-html-content 
    {anchura: 400px; 
    padding: 
5px;} 
/ * La lista de controles * / 
.highslide-wrapper .highslide-header ul 
    {margin: 0; 
    padding: 0; 
    text-align: 
right;} 
.highslide-wrapper .highslide-header ul li 
    {display: inline; 
    padding-left: 
1em;} 
/ * Ocultar los enlaces anterior y siguiente * / 
.highslide-wrapper .highslide-header-ul li.highslide anterior, .highslide-wrapper .highslide-header-ul li.highslide próxima 
    {display: 
none;} 
.highslide-wrapper .highslide -header a 
    {font-weight: bold; 
    color: gray; 
    text-transform: mayúsculas; 
    text-decoration: 
none;} 
.highslide-wrapper .highslide-header a: hover 
    {color: 
negro;} 
.highslide .highslide-wrapper -header .highslide-mover un 
    {cursor: 
movimiento;} 
.highslide-wrapper .highslide-pie de página 
    {altura: 
11px;} 
.highslide-wrapper .highslide-pie de página .highslide-resize 
    {cursor: nw-resize; 
    float: right; 
    altura: 11px; 
    anchura: 11px; 
    background: url (highslide / gráficos / resize.gif); 
    position: relative; 
    top: 3px; 
    left: 
3px;}

UN CONTROLADOR DE TAMAÑO DE LA VENTANA EMERGENTE


Un controlador de tamaño puede colocarse en el contenido. Todo lo que tienes que hacer es añadir un elemento con un nombre de clase highslide-cambio de tamaño. La mejor práctica es colocar el elemento en la parte inferior derecha. Para la prestación de auto contenido de un controlador de tamaño se inserta de forma automática, sino que depende de CSS para mostrar.
 
<span class = "highslide-resize"> 
    <img src = "resize.png" alt = "Redimensionar" /> 
</ span> 

EL USO DE CONTENIDO EN LÍNEA CON UN CONTENIDO ENVOLTORIO PRESTACIÓN AUTO

Desde la versión 4.0, se puede definir el contenido en línea que se inyecta en una envoltura común, a diferencia hs.contentId que te obliga a definir el encabezado y pie de página cada vez. De manera equivalente a los títulos y encabezados, el maincontent puede ser retirado del alt o título atributo de la miniatura utilizando hs.maincontentEval, escrito en el hs.maincontentEval opción o definida como una oculta div en su página web que contiene HTML. Para utilizar HTML, se crea un div directamente después de la apertura <a> y darle un nombre de clase de highslide-maincontent. Si quieres un mejor control, consulte hs.maincontentId.
 
Opción # 3 es la siguiente:
<a href="fallback.htm" onclick="return hs.htmlExpand (this)"> 
    Abrir popup 
</a> 
<div class = "highslide-maincontent"> 
    Este es el contenido principal 
</ div>

VIENDO EL CONTENIDO AJAX

La src del contenido AJAX se ajusta con el href atributo de la una, o de la hs.src parámetro de línea. La otra opción que necesitamos es tipoobjeto: 'ajax'. El ancho y el otro estilo de la ventana emergente AJAX se realiza a través de las reglas CSS asociados a la prestación de auto. Lo que separa el contenido AJAX de Iframe es que usted puede tomar un determinado Identificación del archivo de origen si el archivo es HTML. Hay tres profundidades de acaparamiento contenido AJAX:
 
Si el archivo de origen no contiene un cuerpo de etiqueta (no HTML), el contenido se insertará como es.

Si el archivo de origen contiene un cuerpo de etiquetas, solamente se inserta el contenido del cuerpo, para evitar que las etiquetas doctype y la cabeza para ser insertado en el cuerpo de la página principal. Esto significa que todos CSS no en línea desaparece, como documentos válidos sólo permiten las reglas CSS en la etiqueta de la cabeza.

Así que hay que definir las reglas CSS en la página principal y no en el archivo de origen AJAX.
 
Si los puntos href a una específica identificación en la página, por ejemplo href = "ajax.htm # intro", Highslide intenta agarrar el contenido interno de esa identificación. Esta es una gran manera de mantener a todos los contenidos de múltiples expansores en un solo archivo. También proporciona una buena reserva para personas con discapacidad de jаvascript agentes de usuario.

 <a href="ajax.htm#my-div"  onclick="return hs.htmlExpand (this, {objectType:'ajax'} )"> AJAX contenido </a>
 
Si prefiere separar el contenido de la conducta, de descarga highslide.js con discreto comprueban en el Configurador. Luego marcar su ancla de esta manera:

 <a href="ajax.htm#my-div" rel="highslide-ajax"> AJAX contenido </a>

Desde la versión 3.3 Highslide por defecto incluye el contenido de AJAX en un auto prestación envoltorio contenido. Para obtener el control total de la envoltura de contenido, que se extiende lo que puede hacer con CSS, usted hace un invisible div en algún lugar de su página. Esto se hace de la misma manera como con otros expansores HTML, mediante la definición de la contentId ajuste. Luego, dentro de la div contenido de algún lugar de poner otro div con nombre de la clase "highslide-cuerpo". Aquí es donde el contenido AJAX se pone de forma dinámica.

<a href="ajax.htm#my-div"  onclick="return hs.htmlExpand (this, {contentId:'my-content', objectType:'ajax'} )"> AJAX contenido </a>
<div class = "highslide-html-content" id = estilo "mi-contenidos" = "width: 700px">
<div><a href="#" onclick="return hs.close (this)">Cerrar</a></ div>
<div class = "highslide-cuerpo"></ div></ div>

VIENDO EL CONTENIDO EN UN IFRAME


La src del iframe se ajusta con el href atributo de la una, o de la hs.src parámetro de línea. El otro ajuste requerido es hs.objectType. Desde la versión 3.3 Highslide es capaz de detectar dinámicamente el tamaño del contenido del iframe, pero esto sólo se aplica a los iframes del mismo dominio que la página principal. Para las páginas externas es necesario establecer hs.objectWidth y hs.objectHeight. Además de éstos, hs.objectLoadTime afecta a la apariencia de la iframe. El estilo ancho y otra de la ventana emergente iframe se realiza a través de las reglas CSS asociados a la prestación de auto.

<a href="iframe.htm" 
        onclick="return hs.htmlExpand (this, 
            {objectType:'iframe'} )"> 
    contenido en iframe 
</a>

Si prefiere separar el contenido de la conducta, de descarga highslide.js con discreto comprueban en el Configurador. Luego marcar su ancla de esta manera:

<a href="iframe.htm" rel="highslide-iframe"> AJAX contenido </a>

Como con contenido AJAX, hs.contentId puede utilizarse para obtener el control total de la envoltura de contenido.

AJAX VS IFRAME - PROS Y CONTRAS


AJAX corre más suave en el navegador, ya que es (opcionalmente) precargado y copia en el árbol DOM local.
 
AJAX puede cargar el contenido de un elemento específico en el archivo de origen
 
Iframes son mejores si usted necesita para enlazar a otras páginas dentro de la ventana emergente, por ejemplo para las formas de varias páginas.

VIENDO EL CONTENIDO DE FLASH


Las capacidades Highslide JS flash hacen uso de SWFObject. Desde la versión Highslide se utiliza 4,0 SWFObject 2.x, y esto no es compatible con SWFObject 1.5.

El primer requisito es que usted incluye swfobject.js en su cabecera junto con highslide.js. Al igual que con iframes y Ajax, la dirección URL del archivo incluido va en el atributo href del anclaje de apertura, o en el hs.src opción. Luego utiliza hs.objectType = 'swf' junto con hs.objectWidth y hs.objectHeight para definir las opciones principales para la película incluida. Para obtener una funcionalidad extendida como el envío de variables para la película de Flash, consulte hs.swfOptions.


Al igual que con AJAX y iframes, el contenido Flash se inyecta en una prestación propia envoltura o un envoltorio generado utilizando hs.contentId. Otra cosa con el contenido de Flash es que se ve mal cuando el tamaño de la expansión se reduce para ajustarse a la ventana. Así que desea establecer hs.allowSizeReduction false. También tenga en cuenta que un error en Firefox y Camino para Mac requiere que si se utiliza una página de fondo de regulación, se establece hs.dimmingGeckoFix.

<a href="Flash.swf" 
    onclick="return hs.htmlExpand (this, {objectType:'swf', 
        objectWidth: 300, objectHeight: 250, allowSizeReduction: false} )" 
    class="highslide"> 
    Display Flash 
</ a>