How can I make the fancybox image enlarge on click on the icon link?

Question

JavaScript

Hey! Such a problem. The layout does not have a slider, and there is a magnifying glass icon in the top left corner of the picture. The mechanics are clear, by clicking on the magnifying glass, the picture in the slider increases. Please help me solve the problem or direct me in the right direction, I tried several options, it doesn’t work, it is displayed after clicking the div with the picture and the icon, or only the icon. The image appears in the desired size only after clicking on the image itself.
What the slide looks like:


Now the code is like this:

<a href="" class="zoom"> </a>
< div class="b-our-projects__slider__img-outer">
        <img src="images/hotel1.jpg" alt="гостиница Юбилейная" class="b-our-projects__slider__img-inner"/>
 </div>

$('.zoom').on('click',function(){
    $('.b-our-projects__slider__img-outer').fancybox();
  });