Как изменить скрипт в зависимости от разрешения экрана?

Question

[denism300]

Есть скрипт, вызывающий галерею

$().fancybox({
    selector : '[data-fancybox="images"]',
    toolbar  : true,
    loop     : true,
	buttons  : [
		'slideShow',
		'fullScreen',
		'thumbs',
		'share',
		'zoom',
		'close'
	],
	thumbs   : {
		autoStart   : true,
		parentEl    : '.fancybox-container',
		axis        : 'x'
	},
});

Подскажите, как его модифицировать так, чтобы если разрешение по ширине меньше 768px, то параметр 'thumbs', не передавался бы в buttons

Answer 1

[Александр]

if(document.documentElement.clientWidth < 768)
{
$().fancybox({
    selector : '[data-fancybox="images"]',
    toolbar  : true,
    loop     : true,
  buttons  : [
    'slideShow',
    'fullScreen',
    'share',
    'zoom',
    'close'
  ],
  thumbs   : {
    autoStart   : true,
    parentEl    : '.fancybox-container',
    axis        : 'x'
  },
});
} else {
$().fancybox({
    selector : '[data-fancybox="images"]',
    toolbar  : true,
    loop     : true,
  buttons  : [
    'slideShow',
    'fullScreen',
    'thumbs',
    'share',
    'zoom',
    'close'
  ],
  thumbs   : {
    autoStart   : true,
    parentEl    : '.fancybox-container',
    axis        : 'x'
  },
});
}

Если нужно динамически изменять, то это в функцию и вызываешь в

window.onresize = function(event) {
    ...
};

Comments

[ⓒⓢⓢ]

window.onresize = function(event) {
...
};

Захочу я расширить окно браузера и получу 1к инициализации галереи - не мало будет? Думаю надо в интервал(0), чтобы наверняка страницу положить

[Александр]

JRK_DV, ваше предложение?

[ⓒⓢⓢ]

Александр, хотя бы, по вашему предложенному, завести переменную и изменять её при пороге document.documentElement.clientWidth < 768

Так при ресайзинге будет одна проверка переменной, а инициализация только когда будем перескакивать порог в 768пкс

[Александр]

Автор, вот тебе и второй ответ