If you do not specify a height in Galleria, `Fatal error: Could not extract a stage height from the CSS.` will appear.

The JavaScript library Galleria implements an image gallery.

Fatal error: Could not extract a stage height from the CSS. Traced height:0px.

The error appears.

#galleria{
  height —500px;
}

As shown in , height worked fine, but the height value is not fixed because the size of the image inside varies depending on the implementation page.

I'd like to move the gallery without fixing the height, but I'd like you to tell me the solution.

I will reproduce it with this.If you put #galleria {height:500px;} in the style, it will work.

// Load the classic theme
Galleria.loadTheme('http://cdnjs.cloudflare.com/ajax/libs/galleria/1.4.2/themes/classic/galleria.classic.min.js');

// Initialize Galleria
Galleria.run('#galleria');

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/galleria/1.4.2/themes/classic/galleria.classic.css"/>

<divid="galleria">
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Lion_waiting_in_Namibia.jpg/250px-Lion_waiting_in_Namibia.jpg">
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Okonjima_Lioness.jpg/250px-Okonjima_Lioness.jpg">
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/galleria/1.4.2/galleria.min.js"></script>

javascript css jquery galleria

2022-09-30 19:54

3 Answers

The error is listed in the plug-in provider.
First, please check if it corresponds to the items listed there.
Galleria error messages

In summary,

$().height() is 0.
Does the animation take more than 5 seconds to complete?
element display:none?

What is the reason that the specified element height is 0

2022-09-30 19:54

Would it be possible to initialize after the size is known, or resize it with $('#galleria') .width(400).height(300).resize() later?

2022-09-30 19:54

I have confirmed the symptom.
It seems that Galleria.run() should specify the height.

// Load the classic theme
Galleria.loadTheme('http://cdnjs.cloudflare.com/ajax/libs/galleria/1.4.2/themes/classic/galleria.classic.min.js');

// Initialize Galleria
Galleria.run('#galleria', {
    width—300,
    height: 200, // これThis is required
    transition: 'fade', // image switching effect
    imageCrop:false,//Reduce the image to view the entire picture
    _toggleInfo: Caption display of alt attribute of false//img
});

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/galleria/1.4.2/themes/classic/galleria.classic.css"/>

<divid="galleria">
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Lion_waiting_in_Namibia.jpg/250px-Lion_waiting_in_Namibia.jpg">
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Okonjima_Lioness.jpg/250px-Okonjima_Lioness.jpg">
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/galleria/1.4.2/galleria.min.js"></script>

width is the size of the entire screen if you do not specify it, but height is specified.
height Galleria Docentation

Galleria need a height to work property.
(Translation: height is required for Galleria to work properly.)

I understand that the height varies depending on the implementation page, but it seems that this value needs to be set dynamically if necessary.

2022-09-30 19:54

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656