javascript - NanoGallery2如何获取图像id

Question

我正在使用 NanoGallery2 库，并且我想获取图像 ID，我不知道如何获取它。我的代码:

<div id="ng2" data-nanogallery2>
  @foreach ($photos as $photo)
    <a id="{{ $photo->id }}" href="{{ asset('uploads/'.$photo->path) }}" data-ngThumb="{{ asset('uploads/'.$photo->path) }}"> {{ $photo->image_name }} </a>
  @endforeach
</div>

@foreach 来自 BladeLaravel。

Here ，在 API 文档上，有 itemSelected 事件，但我只能获取“标题”，例如图像名称。

如果我这样做:

$("#ng2").on( 'itemSelected.nanogallery2', writePhotoName );
function writePhotoName(e){
   items = $("#ng2").nanogallery2('itemsSelectedGet');
   console.log(items);
}

结果: image

嗯..谢谢。

Answer 1

使用GetID()检索项目(图像或相册)ID

item.GetID();

或:

items[n].GetID();

[编辑]

对于您的用例，您有两种可能性:
- 使用属性data-ngid设置内部ID

<div id="ng2" data-nanogallery2>
  @foreach ($photos as $photo)
    <a data-ngid="{{ $photo->id }}" href="{{ asset('uploads/'.$photo->path) }}" data-ngThumb="{{ asset('uploads/'.$photo->path) }}"> {{ $photo->image_name }} </a>
  @endforeach
</div>

并检索 ID:items[n].GetID()
- 或使用属性data-ngcustomData来存储自定义数据:

<div id="ng2" data-nanogallery2>
  @foreach ($photos as $photo)
    <a data-ngcustomData='{ "myID"="{{ $photo->id }}" }' href="{{ asset('uploads/'.$photo->path) }}" data-ngThumb="{{ asset('uploads/'.$photo->path) }}"> {{ $photo->image_name }} </a>
  @endforeach
</div>

并检索 ID:items[n].customData.myID

请参阅 codenpen 上的示例