How to fasten to fancybox?

Question

HTML

Good afternoon!
It is necessary to place a kind of gallery on the site:

I inserted it into the code using an image map -

<div class="gal_item">
                            <img src="images/img_maps.png" class="img-responsive" usemap="#581a2739f1997">
                            <map name="581a2739f1997">
                                <area shape="poly" href="/тут_ссылка_на_соответствующую_картинку.png" coords="454,506,454,668,867,668,1280,668,1280,506,1280,343,867,343,454,343">
                                <area shape="poly" href="/тут_ссылка_на_соответствующую_картинку.png" coords="874,165,874,329,1077,329,1280,329,1280,165,1280,0,1077,0,874,0">
                                <area shape="poly" href="/тут_ссылка_на_соответствующую_картинку.png" coords="454,166,454,331,658,331,862,331,862,166,862,0,658,0,454,0">
                                <area shape="poly" href="/тут_ссылка_на_соответствующую_картинку.png" coords="0,334,0,668,221,668,442,668,442,334,442,0,221,0,0,0">
                            </map>
                        </div>

I attached the corresponding image to each href =.
Is it possible to bind fancybox to a tag in principle? The fact is that for each picture on the specified map, I need to make a small gallery - i.e. show 5-7 images.
Somehow I can't figure out this implementation...
Is it possible to give each area its own class? To tie up the fancybox script via js. Even if you can - how to implement the gallery itself ...
Thank you in advance for your help and hint.

Answer 1

Is it possible to give each area its own class?

Yes, class or id, they meet 1 time?
Why such difficulties with area? Why not 4 images? Why were they merged into one?
I would replace the fancy gallery with Owl or Slick in the fixed div, and a nice shadow with a stroke.