Почему при отключении fancybox в какой-то секции, он отключается на всём сайте?

Question

[Роман Тузов]

Вот html

<div class="prices-details">
	<div class="container">
		<?php while ( have_rows('prices') ) : the_row(); ?>
		<div class="card" data-fancybox data-options='{"src": "#exampleModal", "touch": false, "smallBtn" : false}' href="javascript:;"> </div>
        </div>
   </div>

<---    Второй код, который я не хочу отключать

<a href="https://hutsonr.ru/wp-content/uploads/2019/12/g1unE6n4lYo.jpg" data-fancybox="images">
	<img src="https://hutsonr.ru/wp-content/uploads/2019/12/g1unE6n4lYo.jpg" alt="image" />
</a>

.prices-details .fancybox-container,.fancybox-show-toolbar,.fancybox-is-open {
		display: none;
	}

Так я отключаю видимость fancybox только у card, но почему-то он отключается и для второго кода с изображением. Как отключить fancybox только у первого случая.
P.S. Я хочу отключить для первого случая при необходимом разрешении (для телефона). (Может как-то поможет)

Comments

[ProjectSoft]

css неправильный
Далее
Это точно div?

<div class="card" data-fancybox data-options='{"src": "#exampleModal", "touch": false, "smallBtn" : false}' href="javascript:;"> </div>
        </div>

Скрыть данный блок. Если данный блок скрывать ненужно, то в нём расположить ссылку на fancybox в абсолютной позиции и растянуть на 100% по высоте и ширине. И именно её скрывать
Я вам даю только направление.

[Роман Тузов]

ProjectSoft, почему css не правильный? И это точно див, если прлистать вправо, то видео закрывающий его тег

[ProjectSoft]

Hutson, css неправильный потому что вы скрываете fancybox глобально. В вашей ситуации css вообще не нужно трогать. Нужно работать на уровне API fancybox или на уровне css элементов html кода вашей страницы, скрывая или показывая их в зависимости от определённых только вами условий.
Плохо, что этот div, в вашем понимании, имеет аттрибут принадлежности к ссылке. К сожалению я вообще не вижу тега video в вашем коде.

Я вижу вы решили проблему.
Теперь о чём говорю я.

<div class="card">
	<a href="javascript:;" data-fancybox data-options='{"src": "#exampleModal", "touch": false, "smallBtn" : false}'></a>
</div>

Css нужно подправить под ваши задачи

.card {
	position: relative;
}
.card a[data-fancybox] {
	position: absolute;
	width: 100%;
	height: 100%;
}

@media(max-width: 480px){
	.card a[data-fancybox] {
		display: none;
	}
}

Если говорить о API.
У fancybox есть событие начала открытия fancybox, в котором вы сможете закрыть данный fancybox, если какие-то условия не подходят для его показа.

Видя, как вы решили "а бы как", этот метод я не буду подробно описывать.

Answer 1

[Александр Суханов]

.fancybox-is-open {
    display: none;
 }

У вас выключает его везде.

P.S. Я хочу отключить для первого случая при необходимом разрешении (для телефона). (Может как-то поможет)

Может проще не подключать вообще его на мобилки?
Как с помощью javascript определить устройство, с которого зашли на сайт?

Comments

[Роман Тузов]

Но для изображения мне нужно его подключить на мобилке

[Александр Суханов]

Можно так попробовать

если не мобилка
$('.card').attr('data-fancybox', '' );
А из хтмл убрать этот атрибут.

[Роман Тузов]

Александр Суханов, выглядит не плохо, попробую и позже напишу

[Роман Тузов]

Александр Суханов, Большое спасибо! Сделал так:
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {

} else {
$('.card').attr('data-fancybox', '' );
}
Абы как, но сработало