DmitrySorokin

Логично, тк значение у тебя записывается в момент выбора города (клик в попапе). Соответственно, при обновлении страницы, попап ты уже не показываешь, тк уже записана кука (modal_shown)> а раз нет попапа, то и не отрабатывает событие "currentCity = $('.header-city').text("Ижевск");"

Нужно дописать обе функции:

$(".overlay-1").click(function(){
            $('.overlay').toggleClass('hidden');
            currentCity = $('.header-city').text("Ижевск");
//записываем в куку значение города
$.cookie('city', 'ijevsk', { expires: 7, path: '/' });
            return currentCity;
        });

        $(".overlay-2").click(function(){
            $('.overlay').toggleClass('hidden');
            currentCity = $('.header-city').text("Москва");
//записываем в куку значение города
$.cookie('city', 'moscow', { expires: 7, path: '/' });
            return currentCity;
        });


$(document).ready(function(){
//здесь нужно добавить инструкцию, которая проверяет куку и записывает значение куки в блок,если кука есть

});

А еще лучше на клик по попапу просто записывать куку. И потом проверяя значение куки дописывать его в блок.

Если подключен jquery, то

$( document ).ready(function() {
var pane = $('.scroll-pane');
pane.jScrollPane({
		showArrows: true
	});
var api = pane.data('jsp');
   api.scrollTo( 100,  200);
});

И меняешь числа на нужные тебе

Можно добавить функцию на событие изменения окна браузера. B внутри вызывать вашу функцию:
$( window ).resize(function() {
alignCenter();
});
Можно еще добавить небольшой таймаут на функцию, чтобы она не отрабатывала многократно при ресайзе, а с задержкой в 200 -300 милескунд. - будет меньше грузить браузер.

Но вообще, я бы посоветовал решить это с помощью css (нужно всегда стараться максимально использовать css+html для стилиации(ваш случай) и только в крайнем случае js).
Например, с использованием инлайн блоков и псевдоэлемента :
(источник https://css-tricks.com/centering-in-the-unknown/)

/* Родительский блок  */
.block {
  text-align: center;
  white-space: nowrap;
}
 
/* Псевдоэлемент, который занимает всю высоту родителя. Относительно его центра будет выравниваться позиция выравниваемого элемента */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* Выравниваемый элемент с неопределенной шириной и высотой */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

В той же статье можно найти и другие способы

Так, если по простому совсем делать, то можно попробовать такой вариант:
1. Дописать всем ссылкам на главной странице в атрибут href соответствующий параметр(можно также реализовать через куку, но такой вариант будет проще):
href="gallery.html"
заменить на

href="gallery.html?kl1"
href="gallery.html?kl2"
href="gallery.html?kl3"
...
href="gallery.html?obiv"

итд.

2. Далее, уже на странице с галереей нужно этот параметр прочитать из урла. Если параметр совпадает, симулируем нажатие на соответствующий фильтр:

$( document ).ready(function() {
    if(window.location.href.indexOf("kl1") > -1) {// ищем в урле параметр
     $('[data-category="kl1"]').click(); //симулируем нажатие на выбор категории на странице с галереей
    } else if(window.location.href.indexOf("kl2") > -1){
$('[data-category="kl2"]').click(); //симулируем нажатие на выбор категории на странице с галереей
} .... (window.location.href.indexOf("obiv") > -1){
$('[data-category="obiv"]').click(); //симулируем нажатие на выбор категории на странице с галереей
} 
});

в файле custom.js в коде:

/*====================================
SLIDER SCRIPTS
======================================*/
$('#carousel-slider').carousel({
interval: 2000 //TIME IN MILLI SECONDS
});

замени число 2000 на большее. Это число в миллисекундах. То есть 1000ms = 1 секунде. У тебя сейчас интервал прокрутки получается равен 2 секундам

Нужно в callback добавить функцию:
https://jsfiddle.net/suyxa7ke/1/

Можно также создать триггер на изменение класса элемента:
https://api.jquery.com/change/