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

从我所看到的，e.imageTarget指的是DOM对象。如果要将数据添加到dom的data-attr，可以使用jQuery＆＃39; $data。

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

或do it in the vanilla JS way：

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

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

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

使用HTML

只要您拥有图像元素中的数据，而不是锚元素，就会出现这个词。
```
<img src="http://i.imgur.com/7Osllxil.jpg"  data-name="Kitty" data-age="2">
```

使用dataConfig

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

使用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
   });

Answer 2

刚刚得到答案，我需要做的只是将数据放在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/

中查看工作答案

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

2 个答案: