web-dev-qa-db-fra.com

Galleria Fatal error: impossible d'extraire une hauteur de scène du CSS. Hauteur tracée: 0px

Si j'ai la ligne <style type="text/css"></style>, même s'il est vide, Galleria envoie le message d'erreur "Erreur fatale: impossible d'extraire une hauteur de scène du CSS. Hauteur tracée: 0px."

Il semblerait que même si je dis à Galleria d'utiliser une hauteur de 300 via:

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

il essaie d'abord de déterminer la hauteur et la ligne CSS la confond, il renvoie donc cette erreur. Si je supprime cette seule ligne, plus d'erreur.

Y a-t-il quand même que je peux encore utiliser <style type="text/css"></style>? nous l'utilisons pour personnaliser l'apparence de notre site en fonction du client qui l'utilise.

jquerygalleria
36
SLoret

Assurez-vous d'inclure:

Tête:

<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>

Aussi le style de page:

#galleria{height:467px}

Et en dessous des images:

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

Si vous avez des problèmes avec ce dépannage avec une installation propre et ajoutez jusqu'à ce que vous trouviez la cause.

53
Emilio

Vous devez donner au conteneur d'image galleria une hauteur en CSS. C'est là que la galleria montre les images (elle doit donc être plus petite que la hauteur de la galleria elle-même).

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

Cela pourrait aider quelqu'un, qui obtient toujours cette erreur: -

J'ai eu cette erreur car j'avais une galerie cachée.

CORRECTIF: - Donnez une hauteur à la galerie div en CSS, puis en fichier js,

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

Voir ces liens pour plus d'informations: - http://galleria.io/docs/references/errors/

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

10
Divyanshu Das

J'ai eu cette erreur uniquement dans IE. La solution est de forcer la hauteur.

Dans le CSS galleria.classic.css, ajoutez une hauteur pour la classe .galleria-stage

exemple.

.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;
}
5
Dacarts

Scenerio

Si cela vous arrive, c'est probablement parce que l'élément Galleria est masqué lors du chargement de la page. Cela est mentionné dans quelques autres réponses, mais les solutions que ces réponses décrivent ne sont pas nécessairement les meilleures méthodes.

Problème

Pour moi, j'ai le conteneur Galleria réglé sur display:none; au lancement de la page. L'objet Galleria est dans une lightbox, il n'apparaît donc pas tant que l'utilisateur n'a pas cliqué sur un bouton. Cette display:none la propriété est à l'origine du problème.

Solution

Au lieu de masquer l'élément avec display:none; utilisez une grande marge gauche négative comme left:-9999px; ou margin-left:9999px. L'une ou l'autre de ces méthodes garantira que Galleria se charge correctement.

3
VictorKilo

Essayez de définir le DocType comme ci-dessous si vous utilisez un thème classique avec la définition de la hauteur et de la largeur dans la classe css .galleria-stage dans le fichier galleria.classic.css

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

J'ai eu le même problème lors de l'utilisation de jQuery galleria et je l'ai résolu. J'ai modifié certains paramètres dans galleria-1.2.5.min.js.

Ici est le lien pour télécharger la bibliothèque, copiez simplement le code et collez-le dans votre fichier js.

2
simo

Selon les instructions , section Setting dimensions, faites ceci dans votre CSS (évitez évidemment #galleria quelle que soit la façon dont vous identifiez votre emballage, j'utilise une classe appelée galleria, donc j'utilise .galleria)

#galleria { width: 700px; height: 400px; }
1
Serj Sagan

j'avais l'habitude d'avoir le même pb. alors j'ai essayé autre chose. tous mes fichiers javascript étaient à la fin de mon fichier html. j'ai donc essayé de les déplacer tous juste avant le </head> balise de fermeture.

<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>

je ne suis pas vraiment content de coder de cette façon (c'est-à-dire javascript à la fin). de toute façon ça semble marcher et la galerie est super!

1
youn

J'ajoute une réponse à cette question car tout ce qui précède n'a pas fonctionné pour moi. Dans mon cas, je chargeais galleria (1.2.7) dynamiquement dans un widget javascript cross-domaine intégré. Même si la hauteur de la scène était correctement définie, les scripts étaient chargés et la galleria initialisée correctement, ce message d'erreur s'affichait périodiquement.

J'ai fini par modifier la source de la galleria pour empêcher l'affichage des messages d'erreur (peut-être qu'une meilleure option serait de rendre cela dépendant du drapeau de débogage, mais je n'en ressentais pas le besoin)

Galleria.raise = function( msg, fatal ) {

    var type = fatal ? 'Fatal error' : 'Error',

        self = this,

        css = {
            display: none;
        },
1
Jesse