galeria - jquery gallery with thumbnails

Error fatal de Galleria: no se pudo extraer una altura de etapa del CSS. Altura trazada: 0px

Question

Si tengo la línea <style type="text/css"></style> , aunque esté en blanco, Galleria arroja el mensaje de error "Fatal error: Could not extract height height from the CSS. Altura trazada: 0px. "

Parece que a pesar de que le digo a galleria que use una altura de 300 a través de:

$(''#galleria'').galleria({
width: 300,
height: 300,
transition: ''fade''
});

primero intenta determinar la altura y la línea CSS lo confunde, por lo que arroja este error. Si elimino esa línea, no hay más error.

¿Hay alguna forma de que todavía pueda usar <style type="text/css"></style> ? lo utilizamos para personalizar la apariencia de nuestro sitio según el cliente que lo usa.

Answer 1

Scenerio

Si esto le sucede a usted, es más probable porque tiene el elemento Galleria oculto cuando se carga la página. Esto se menciona en un par de otras respuestas, pero las soluciones que esas respuestas describen no son necesariamente los mejores métodos.

Problema

Para mí, tengo el contenedor Galleria configurado para display:none; cuando la página se inicia. El objeto Galleria está en una caja de luz, por lo que no aparece hasta que el usuario haga clic en un botón. Esta display:none propiedad es lo que está causando el problema.

Solución

En lugar de ocultar el elemento con display:none; use un gran margen izquierdo negativo como el left:-9999px; o margin-left:9999px . Cualquiera de estos métodos asegurará que Galleria se cargue correctamente.

Answer 2

Asegúrate de incluir:

Cabeza:

<link type="text/css" rel="stylesheet" href="galleria/themes/classic/galleria.classic.css">
<script type="text/javascript" src="js/galleria-1.2.5.min.js"></script>
<script type="text/javascript" src="galleria/themes/classic/galleria.classic.min.js"></script>

También el estilo en la página:

#galleria{height:467px}

Y debajo de las imágenes:

<script type="text/javascript">
$(''#gallery'').galleria({
width: 700,
height: 467 //--I made heights match
});
</script>

Si tiene problemas con esta solución de problemas con una instalación limpia y agregue hasta encontrar la causa.

Answer 3

De acuerdo con las instructions , sección Setting dimensions , haz esto en tu CSS (obviamente, cambia de #galleria por cualquier forma en que identifiques tu contenedor, utilizo una clase llamada galleria para usar .galleria )

#galleria { width: 700px; height: 400px; }

Answer 4

Debes darle al contenedor de imagen galleria una altura en css. Aquí es donde Galleria muestra las imágenes (por lo que debe ser más pequeño que la altura de la galería).

.galleria-stage {
height: 450px;
position: absolute;
top: 10px;
bottom: 60px;
left: 10px;
right: 10px;
overflow: hidden;
}

Answer 5

Después de varios intentos, ninguna de las soluciones anteriores funcionó para mí. Es un error extraño, ya que es difícil de replicar y rastrear, a veces funciona y otras no.

Pero al intentar cosas encontradas en la red, esta parece funcionar, por el momento. Para aquellos atrapados con esto, supongo que vale la pena intentarlo:

• Abre galleria-1.2.6.min.js
• Reemplazar el timeout:1E4 cadena para el timeout:1E10 de timeout:1E10

Answer 6

Estoy agregando una respuesta a esta pregunta ya que todo lo anterior no funcionó para mí. En mi caso, estaba cargando galleria (1.2.7) dinámicamente dentro de un widget javascript cross domain incrustado. Aunque la altura de la etapa se estableció correctamente, las secuencias de comandos se cargaron y Galleria se inicializó correctamente, este mensaje de error se mostraría periódicamente.

Terminé modificando la fuente de galleria para evitar que se muestren los mensajes de error (quizás una mejor opción sería hacer que esto dependa del indicador de depuración, sin embargo, no sentí la necesidad)

Galleria.raise = function( msg, fatal ) {
var type = fatal ? ''Fatal error'' : ''Error'',
self = this,
css = {
display: none;
},

Answer 7

Intente configurar el DocType como se muestra a continuación si está utilizando un tema clásico junto con la configuración del alto y el ancho en la clase css de etapa galleria en el archivo galleria.classic.css

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">

Answer 8

Podría ayudar a alguien, que todavía obtiene este error: -

Recibí este error porque tenía una galería oculta.

REVISIÓN: - Dale a la galería div una altura en CSS, luego en el archivo js,

Galleria.run(''#gallery'', {
height: parseInt($(''#gallery'').css(''height'')),
wait: true
});

Vea estos enlaces para más información: - http://galleria.io/docs/references/errors/

http://galleria.io/docs/options/wait/

Answer 9

Solía ​​tener el mismo pb. entonces probé algo más. todos mis archivos javascript solían estar al final de mi archivo html. así que traté de moverlos a todos justo antes de la etiqueta de cierre </head> .

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="lib/galleria/galleria-1.2.5.js" /></script>
<script type="text/javascript" src="lib/galleria/themes/classic/galleria.classic.min.js"></script>
</head>

No estoy realmente feliz de escribir de esta manera (es decir, javascript al final). de todos modos, parece funcionar y ¡la galería es genial!

Answer 10

Tuve el mismo problema al usar jQuery galleria y lo resolví. Modifiqué algunos parámetros en galleria-1.2.5.min.js.

Here está el enlace para descargar la biblioteca, solo copie el código y péguelo en su archivo js.

Answer 11

Tuve este error solo en IE. La solución es forzar la altura.

En el CSS de galleria.classic.css agrega una altura para la clase .galleria-stage

ejemplo.

.galleria-stage {
height:450px; <-- set this to any height and i should work :)
position: absolute;
top: 10px;
bottom: 60px;
left: 10px;
right: 10px;
overflow:hidden;
}