Cannot use PhotoViewer with jquery datatable

[barokurniawan]

Description

I use PhotoViewer together with jquery datatable with the expectation that the image in the datatable can be zoomed with PhotoViewer

Issue

With expectations as in the description I encountered the following problems:

Uncaught TypeError: Cannot read property 'src' of undefined
    at PhotoViewer.init (photoviewer.js:1917)
    at new PhotoViewer (photoviewer.js:1906)
    at HTMLAnchorElement.<anonymous> (<anonymous>:15:13)
    at HTMLAnchorElement.dispatch (jquery.3.2.1.min.js:3)
    at HTMLAnchorElement.q.handle (jquery.3.2.1.min.js:3)

Here are some screenshots :

but somehow it's work for some image

And this is the error one

[nzbin]

Maybe some images have no src, you can show me the codes.

[barokurniawan]

Maybe some images have no src, you can show me the codes.

Here Is the code :

JS section

$("#add-row").DataTable({
    drawCallback: function(){
        $('[data-gallery=photoviewer]').unbind('click').click(function (e) {
            e.preventDefault();
            var items = [],
            options = {
                index: $(this).data('index'),
            };

            $('[data-gallery=photoviewer]').each(function () {
                items.push({
                    src: $(this).attr('href'),
                    title: $(this).attr('data-title')
                });
            });

            new PhotoViewer(items, options);
        });
    }
});

HTML Section

<table id="add-row" class="display table table-striped table-hover">
    <thead>
        <tr>
            <th></th>
            <th>Jenis</th>
            <th>Silinder Mesin (CC)</th>
            <th>Kapasitas (TON)</th>
            <th>Panjang Karoseri(CM)</th>
            <th>Lebar Karoseri(CM)</th>
            <th>Tinggi Karoseri(CM)</th>
            <th>Volume Karoseri(CBM)</th>
            <th>Created at</th>
            <th style="width: 10%">Action</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($jenis_kendaraan as $i => $jenis)
        <tr>
            <td>
                <a data-index="{{ $i }}" href="{{ $jenis->getImage() }}" data-gallery="photoviewer" data-title="{{ $jenis->name }}">
                    <div class="img-upload-preview img-circle" style="
                    background-image: url({{ $jenis->getImage() }}); height: 80px; width: 80px;
                    background-size: cover;
                    background-position: center;
                    border-radius: 10%;
                    "></div>
                </a>
            </td>
            <td>{{ $jenis->name }}</td>
            <td>{{ $jenis->cilinder }}</td>
            <td>{{ $jenis->kapasitas }}</td>
            <td>{{ $jenis->panjang   }}</td>
            <td>{{ $jenis->lebar }}</td>
            <td>{{ $jenis->tinggi }}</td>
            <td>{{ $jenis->volume }}</td>
            <td>{{ $jenis->created_at->format("d/m/Y H:i") }}</td>
            <td>
                <div class="form-button-action">
                    <a data-toggle="tooltip"
                        href="{{ route("internal.jenis-kendaraan.update", $jenis->id) }}"
                        class="btn btn-link btn-primary btn-lg" data-original-title="Edit">
                        <i class="fa fa-edit"></i>
                    </a>
                    <a onclick="return confirm('Delete {{ $jenis->name }} ?');"
                        href="{{ route("internal.jenis-kendaraan.delete", $jenis->id) }}"
                        data-toggle="tooltip" class="btn btn-link btn-danger"
                        data-original-title="Remove">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

I implement PhotoViewer in datatable drawCallback.

[nzbin]

$(this).data('index') maybe incorrect, you should check whether $(this).data('index') is the correct index of $('[data-gallery=photoviewer]')