jQuery插件galleria的配置和使用

Galleria是个不错的相册插件,官网:http://galleria.io 我在使用这个插件做图片展示,遇到了大量问题,经过一边翻译官网一边测试终于做出了一些简单的效果, 因此在这里写下来:

引入插件

<script  type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<script  type="text/javascript" src="./js/galleria-1.2.8.min.js"></script>

HTML结构

<div id="galleria">
    <image src="" alt="">
    <image src="" alt="">
</div>

调用插件

官网只提供这两行

Galleria.loadTheme('./js/galleria.classic.js'); 
Galleria.run('#galleria');
//就可以调用成功了

下面是我使用的

Galleria.loadTheme('./js/galleria.classic.js');
Galleria.run('#galleria',{
    autoplay:1000,         //实现自动播放单位毫秒, 默认是关闭自动播放
    idleMode:true,          //图象进入空闲时间过后自动运行, 
    idleTime:3000,
    idleSpeed:200
 
    transition:'fadeslide',// fade | pulse |slide | fadeslide |flash  //图片进入5种方式
     
    extend:function(options){       //extend的使用,下面是调用内部方法,实现打开就全屏
                $('#galleria').data('galleria').enterFullscreen('enter');         
            },
    });
     
    //图像进入空闲时候的事件('idle_enter')的使用方法  Galleria.on('事件名',function(){}) 
    Galleria.on('idle_enter',function(){
        $('#galleria').data('galleria').play('1000');   //调用图像播放的函数方法                                
})