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

Question

我有一个数据，如下所示

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

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

代码如下。完整代码可见JsFiddlehttp://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/中看到有效的答案

Answer 2

据我所知，e.imageTarget 指的是 DOM 对象。如果你想将数据添加到dom的data-attr，你可以使用jQuery的$data。

$(e.imageTarget).data("name", "Tom");

或do it in the vanilla JS way:

e.imageTarget.dataset.name = "Tom";

---

[更新] 问题是 Galleria 为你创建了一个新的 DOM 没有设置数据集。

所以在这种情况下you have 3 options:

1. 使用 HTML

   只要您在图像元素而不是锚元素中有数据，这就是字词。

   <img src="http://i.imgur.com/7Osllxil.jpg"  data-name="Kitty" data-age="2">
   

2. 使用dataConfig

   Galleria.run('.galleria', {
       dataConfig: function(img) {
           return {
               description: $(img).next('p').html()
           }
       }
   

3. 使用dataSource

     var data = [
       {
     "picture": "http://i.imgur.com/7Osllxil.jpg",
     "name": "Kitty",
     "age": 2
     },
      {
     "picture": "http://i.imgur.com/7Osllxil.jpg",
     "name": "Kitty",
     "age": 2
     }
     ];
     Galleria.run('.galleria', {
          dataSource: data
      });