Думаю Вы сами решите, ответив на несколько вопросов:
- нужен ли паралакс этих элементов?
- будет ли меняться картинка внутри?
- как это должно выглядеть на мобильных устройствах?
- интересно ли Вам реализовать это стилями?
- заплатят ди Вам за эту заморочку?

Для этого есть опция "closeExisting", по умолчанию она "false"

// Закрыть открытое окно, перед открытием нового (простите за тавтологию)
$.fancybox.defaults.closeExisting = true;

Установить Gulp cli (глобально)
npm i -g gulp-cli

Установить Gulp (локально)
npm i gulp --save-dev

Установить Gulp LiveReload (локально)
npm i --save-dev gulp-livereload

Разрешить выполнение скриптов PowerShell (файлов с расширением .ps1) в Windows
Set-ExecutionPolicy unrestricted

gulpfile.js

let gulp       = require('gulp'),
    livereload = require('gulp-livereload');

gulp.task('LiveReload', function () {
  livereload.listen();
  gulp.watch('./**/*', {delay: 600}, async function () {
    livereload.reload();
  });
});

Запустить livereload в IDE
View | Tool Windows | Gulp

Или через консоль
gulp LiveReload

Включить в браузере расширение LiveReload