画廊（Gallery）

功能说明

实现图片滑动切换，可以图片可以定义触发事件。

HTML5

<gallery id="gallery1" itemindex="0" onitemclick="imageclick()" scaletype="fitcenter" spacing="12" datasource="[{&quot;src&quot;:&quot;bz1.png&quot;}, {&quot;src&quot;:&quot;bz4.png&quot;}]" itemwidth="200"/>

属性列表

支持公共属性
参见公共属性说明

事件列表

支持公共事件
参见公共事件说明

实例

1、如何动态加载图片

<div id="viewPage0">
    <gallery id="gallery0" onload="onload()" itemindex="3" scaletype="" spacing="12dp" itemwidth="200" datasource=""/>
</div>

function onload(sender, args){
    var data = [
        {"src":"http://g.hiphotos.baidu.com/image/pic/item/a2cc7cd98d1001e9df04b209ba0e7bec54e797f8.jpg"},
        {"src":"http://b.hiphotos.baidu.com/image/w%3D400/sign=5812b482d42a60595210e01a1835342d/adaf2edda3cc7cd9840d6c923a01213fb80e915c.jpg"},
        {"src":"http://e.hiphotos.baidu.com/image/w%3D400/sign=01a2b2f3b0b7d0a27bc9059dfbee760d/3b292df5e0fe992510a7b71136a85edf8cb171cc.jpg"}
    ]
    $id("gallery0").set("datasource", data);
}

2、点击具体图片时弹出图片的信息

<gallery id="gallery0" itemindex="3" onitemclick="this.onitemclick()" spacing="12dp" itemwidth="200"/>

function onitemclick(sender,args){
    $alert("id:" + sender + "
" + "itemindex:" + args.itemindex + "
" + "item:" + args.item.src);//用户点击图片的json
}

3、点击不同图片时执行不同的方法

<gallery id="gallery0" itemindex="3" onitemclick="this.onitemclick()" spacing="12dp" itemwidth="200"/>

function onitemclick(sender, args){
    if(args.itemIndex == 0){
        xxx();
    }else if(args.itemIndex == 1){
        yyy();
    }else{
        zzz();
    }
}

手机运行效果