javascript - 如何将数据从 JSON 或 HTML 传递到 Galleria 'image' 事件？

Question

我有一个数据，如下所示

[
   {
      "picture": "http://i.imgur.com/7Osllxil.jpg",
      "name": "Kitty",
      "age": 2
   }
   //and so on
]

根据上面的数据，我想使用 Galleria 展示一个画廊。在图库中，每次用户看到图像时，我都想处理上面的数据。

代码如下。完整代码可见JsFiddle http://jsfiddle.net/petrabarus/pajn8q3z/4/

<div id="gallery">
    <a href="http://i.imgur.com/7Osllxil.jpg" data-name="Kitty" data-age="2">
        <img src="http://i.imgur.com/7Osllxil.jpg"/>
    </a>
    <a href="http://i.imgur.com/YACmI1G.jpg" data-name="Tom" data-age="3">
        <img src="http://i.imgur.com/YACmI1G.jpg"/>
    </a>
    <a href="http://i.imgur.com/af4ZDy8.jpg" data-name="Felix" data-age="4">
        <img src="http://i.imgur.com/af4ZDy8.jpg"/>
    </a>

Galleria.run('#gallery');
Galleria.on('image', function(e){
    var name = 'Kitty'; //Where to get this?
    var age = 2; //Where to get this?
    $('#caption').html('Hi, my name is ' + name + '. My age is ' + age);
});

既然 Galleria 会构建自己的 DOM，那么如何将上面的 name 和 age 数据传递给 image 事件呢？

如果我使用

console.dir(e.imageTarget);

它将显示

<img width="153" height="230" style="display: block; min-width: 0px; min-height: 0px; max-width: none; max-height: none; transform: translate3d(0px, 0px, 0px); width: 153px; height: 230px; position: absolute; top: 0px; left: 164px; opacity: 1;" src="http://i.imgur.com/7Osllxil.jpg">

Answer 1

刚刚得到答案，我所需要做的就是将数据放入 img 标签中，如下所示。

<div id="gallery">
    <a href="http://i.imgur.com/7Osllxil.jpg">
        <img src="http://i.imgur.com/7Osllxil.jpg" data-name="Kitty" data-age="2"/>
    </a>
    <a href="http://i.imgur.com/YACmI1G.jpg">
        <img src="http://i.imgur.com/YACmI1G.jpg" data-name="Tom" data-age="3"/>
    </a>
    <a href="http://i.imgur.com/af4ZDy8.jpg">
        <img src="http://i.imgur.com/af4ZDy8.jpg" data-name="Felix" data-age="4"/>
    </a>
</div>

如果发生这种情况，我可以使用e.galleriaData.original。

Galleria.on('image', function(e){
    var o = $(e.galleriaData.original);
    var name = o.data('name');
    var age = o.data('age');
    $('#caption').html('Hi, my name is ' + name + '. My age is ' + age);
});

工作答案可以在这个http://jsfiddle.net/petrabarus/pajn8q3z/中看到。