viewer doesn't trigger or respond to clicks

[Chamberlainfrancis]

I have spent some hours trying to get viewerjs work on my app but it has not been able to respond even though I followed the recommended way from the documentation.

on the documentation it is said that I can define where to get the original image URL for viewing by specifying the url: "source" in the options array.

but here in my code the viewer doesn't trigger or respond even though the image src is specified but if I remove attribute data-src from <img> the viewer triggers, I can easily just remove the data-src and have it work but it needs to be in my code anyways because it has some other functionality.

take a look at code below is there something I am not doing right ?

<ul class="list-unstyled image-gallery border-0" data-columns="1">
  <li class="gallery">
    <img alt="" data-src="https://hivefirm.gumlet.com/public_diary/hive_5f578188d4b75070526280.jpg"  src="https://hivefirm.gumlet.com/public_diary/hive_5f578188d4b75070526280.jpg" class="grid-item-2 bg-light rounded-0 border-0" >
  </li>
</ul>

$(".gallery").viewer({
        url: "data-src",
        inline: false,
        toolbar: false,
        title: false,
        movable: false,
        scalable: false,
        toggleOnDblclick: false,
        viewed: function() {
            this.viewer.zoom(0.2)
        }
});

Thanks for the help.

[fengyuanchen]

It seems your config is right, I am need a full demo (an online demo as CodePen will be better) if you need more suggestion.

[PabloRN]

I'm using it with Vue, I didn't test it with Jquery but in my case I create the viewer instance from image-gallery and not from li class .gallery to show the gallery and create a button to call show(). It should work if you click the image but in my case I just add a gallery.show() method.

[fengyuanchen]

In your case, you may need to call the viewer.show() method manually once click on the image.