Kot Matpockuh

Так есть ведь готовые решения: code.mendhak.com/angular-intro.js/example/index.html

1) html, body min-width?
2) viewport: https://developer.mozilla.org/ru/docs/Web/CSS/@viewport

upd1:
css:

body{
  min-width: 650px;
}

в .html в "бошке" добавить метатег viewport с контентом width=650

либо сделать проверку ширины так:

<meta name="viewport" content="width=device-width" id="viewportVal">

затем:

<script>
        window.onload = function () {
            if(screen.width <= 650) {
                var vp = document.getElementById('viewportVal');
                vp.setAttribute('content','width=650');
            }
        }
    </script>

Работа с joomla GK inStyle впервые,

ну тут скорее работаю с jQuery впервые)

в темплейте посмотреть какой класс вешается на эти картинки
и затем, установив fancybox в стартовом js файле шаблона: $(".megaclass").fancybox();

P.S.
Первое что пришло в голову забить на все CMS и пилить хорошее кастомное приложение)