CONTENIDO 665772
- 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 611o5v
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.webp" class="highslide" onclick="return hs.expand (this)">
<img src = alt "thumbnail.webp" = "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 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.webp" class="highslide"
onclick="return hs.expand (this, {src:'images/large-image.webp'} )">
<img src = "thumbnail.webp" 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.webp" class="highslide" rel="highslide">
<img src = alt "thumbnail.webp" = "Highslide JS" title = "Haga Click para agrandar"
height = "100" width = "100" />
</a>
|
REGLAS CSS r3w
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 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 b6638
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 423m40
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 s 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 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.webp" class="highslide"
onclick="return hs.expand (this, {slideshowGroup: 1, thumbnailId:'thumb1'} )">
<img src = "thumbnail1. webp "alt =" Highslide JS "title =" Haga Click para agrandar
"height =" 100 "width =" 100 "/>
</a>
<a href =" image1.webp "class =" highslide
"onclick =" return hs .expand (esto, {slideshowGroup: 1, thumbnailId: 'thumb1'}) ">
<img src =" thumbnail1.webp "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.webp" class="highslide"
onclick="return hs.expand (this, config1 )">
<img src = "thumbnail1.webp" alt = "Highslide JS" title = "Haga Click para agrandar"
height = "100" width = "100" />
</a>
<a href="image1.webp" class="highslide"
onclick="return hs.expand (this, config1 )">
< img src = alt "thumbnail1.webp" = "Highslide JS" title = "Haga Click para agrandar"
height = "100" width = "100" />
</a>
|
SUBTÍTULOS Y ENCABEZADOS 2z1t6z
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.webp" class="highslide"
onclick="return hs.expand (this)">
<img src = "thumbnail.webp" 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 62172h
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 2y13d
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 4g1so
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 6fw44
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.Overlay función. La función toma un objeto de matriz como primer parámetro. Ver hs.Overlay 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 311hw
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.webp" alt = "" usemap = "# imgmap1" />
<map id = "imgmap1" name = "imgmap1">
<area shape = "" alt = "rect" title = "Islandia Islandia "coords =" 1,43,110,135
"href =" iceland.webp "onclick =" return hs.expand (este) "/>
<area shape =" círculo "alt =" "title =" Dinamarca "coords =" Dinamarca 239.352, 36
"href =" denmark.webp "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 5b5b5n
|
.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 5aw2n
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 y3i2g
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 2s2x65
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.webp);
position: relative;
top: 3px;
left:
3px;}
|
UN CONTROLADOR DE TAMAÑO DE LA VENTANA EMERGENTE 1w5p68
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.webp" alt = "Redimensionar" />
</ span>
|
EL USO DE CONTENIDO EN LÍNEA CON UN CONTENIDO ENVOLTORIO PRESTACIÓN AUTO 4v4j2t
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 6a526k
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 .
|
<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 6q5o14
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 c663h
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 30827
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>
|