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>
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
.display:none
?What is the reason that the specified element height is 0
Would it be possible to initialize after the size is known, or resize it with $('#galleria') .width(400).height(300).resize()
later?
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.
© 2024 OneMinuteCode. All rights reserved.