If certain images cannot be loaded, handle it in a graceful way so users aren't confronted with a broken, ugly gallery.
There are two types of Galleria errors, fatal, and warnings. Fatal errors will throw a JavaScript exception and stop all following JavaScript from running. Warnings will cause Galleria to not show an image and then present an error box to the user.
Fatal errors can result from the following reasons:
Not being able to load the theme file
Not finding that target HTML element to create the gallery
Hitting the browser stylesheet limit (Internet Explorer related)
Not finding the theme
Not determining gallery width and height
Width or height is too small for displaying gallery
Warnings can result from the following:
Another gallery instance already running
HTML running in quirks mode
Failing to load image data
Not extracting width and height from image
Not finding an image
Not being able to scale an image
We'll use two separate methods to handle each of these types of errors in Galleria to help handle them better.
To implement our error handlers, let's create a file named errors-example.html in the development directory. The contents can be a very basic Galleria setup as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery.min.js">
</script>
<script src="../galleria-1.2.8.min.js"></script>
<script>
$(document).ready(function(){
Galleria.loadTheme(
'../themes/classic/galleria.classic.min.js');
Galleria.run('#galleria');
});
</script>
</head>
<body>
<div id="galleri1a" style="height: 500px;">
<a href="images/image1-1600px.jpg">
<img data-title="Image 1"
data-description="Image 1 description"
src="images/image1-200px.jpg"
data-link="images/image1-1600px.jpg" />
</a>
<!-- other images -->
</div>
</body>
</html>Since fatal errors prevent other JavaScript from executing on the page, it's especially important that we handle these errors. In addition, it's important to give the user an indication that the Galleria failed to load.
As for warnings, they'll most likely be caused by incorrect configuration but there are still ways to prevent them from being too much of a nuisance.
To override the default error handling strategy, let's work through the following code:
<script>
$(document).ready(function(){
Galleria.loadTheme(
'../themes/classic/galleria.classic.min.js');
Galleria.run('#galleria', {
debug: false,
dummy: 'images/dummy.jpg'
});
});
</script>