You can use separate thumbnails, so loading will be faster.
if you have something like
<div id="galleria">
<img src="image1.jpg>
<img src="image2.jpg>
...
</div>
it will look like:
<div id="galleria">
<a href="image1.jpg>
<img src="thumb1.jpg>
</a>
<a href="image2.jpg>
<img src="thumb2.jpg>
</a>
...
</div>
You can also use thumbnails:lazy
option and JSON to serve data.
Than you will have something like
<div id="galleria"></div>
<script>
var var data = [
{
thumb: 'thumb1.jpg',
image: 'image1.jpg',
},
{
thumb: 'thumb2.jpg',
image: 'image2.jpg',
},
...
]
Galleria.configure({
thumbnails:'lazy',
dataSource:data
});
Galleria.ready(function(){
this.lazyLoadChunks(3);//loads 3 thumbnails, and than another 3, ...
});
</script>
references: