使用Galleria幻灯片放映图片

时间:2013-05-03 10:06:26

标签: jquery jquery-plugins gallery galleria

我使用Galleria以幻灯片形式显示图像。当与网站的连接速度变慢时,我的显示图像出现问题。 Galleria脚本在处理幻灯片放映之前等待在网站上加载完成的图像。因此,我不知道如何配置Galleria脚本以立即实现幻灯片放映,而不是等待页面加载完成的图像。 提前致谢

1 个答案:

答案 0 :(得分:3)

您可以使用单独的缩略图,因此加载速度会更快。

如果您有类似

的内容
<div id="galleria">
    <img src="image1.jpg>
    <img src="image2.jpg>
...
</div>

它看起来像:

<div id="galleria">
    <a href="image1.jpg>
        <img src="thumb1.jpg>
    </a>
    <a href="image2.jpg>
        <img src="thumb2.jpg>
    </a>
...
</div>

您还可以使用thumbnails:lazy选项和JSON来提供数据。 比你有点像

<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>

的引用:

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

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