Необходимо добавить в JS-галерею Fancybox3 (
fancyapps.com/fancybox/3/ или похожую на нее) возможность накладывать изображение поверх на заданные координаты.
Суть:
- Есть большое изображение (скриншот, накладывать на него).
- Есть маленькое изображение (указатель/иконка, накладывать его).
- Хочу получить возможность передавать в data-параметрах (например "data-icon-position") ссылку иконки и ее координаты на большом изображении, чтобы при открытии большого изображения в Fancybox пользователь видел два изображения как одно (или временное объединенное изображение).
Пример готового изображения:
imgur.com/a/BCNjHvM (скриншот FL большое изображение, зеленая рука маленькое изображение).
Пример желаемой реализации в Fancybox3:
<a data-fancybox="test_gallery" href="big_2.jpg" data-icon-href="img/hand.png" data-icon-position="200,300"><img src="small_2.jpg"></a>
Уточнения:
- Координаты: расстояние в пикселях от верха и левой стороны до верхнего левого пикселя маленького изображения
- Маленькое изображение в png, прозрачность должна сохраняться
- Маленькое изображение должно быть частью большого с точки зрения Fancybox, то есть увеличиваться/уменьшаться/перемещаться вместе с большим.
Собственно, если есть более простые варианты реализации или варианты с другой библиотекой готов рассмотреть. В остальном, хочу понять сроки/бюджет :)