Loading image using galleria slide show

Question

I'm using Galleria to display images as slide show. I'm getting problem with display images when the connection to the website slow. The Galleria script waits to load completed images on the website before process slide show. So I don't know how to config Galleria script to implement slide show instantly images instead waiting page loaded completed images. Thanks in advance

Answer 1

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:

http://galleria.io/docs/references/optimize/

http://galleria.io/docs/references/data/