Why when you disable fancybox in some sections, it is disabled throughout the site?

Here is the 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>

<--- Second code that I don't want to disable

<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;
 }


So I turned off the visibility of the fancybox only card, but for some reason it is disabled for the second code image. How to disable fancybox only in the first case.
PS I want to disable for the first case at the required resolution (for a phone). (Maybe will help)
April 4th 20 at 00:42
1 answer
April 4th 20 at 00:44
.fancybox-is-open {
 display: none;
 }

You disable it everywhere.

PS I want to disable for the first case at the required resolution (for a phone). (Maybe will help)

Perhaps it's easier not to connect it at all on mobile telephones?
How to use javascript to identify the device from which you visited the site?
But for image I need it to connect to mobile - alec.Wilkins commented on April 4th 20 at 00:47
You can try

if not cellphones
$('.card').attr('data-fancybox', " );
And from khtml to remove this attribute. - Barrett_McGlynn commented on April 4th 20 at 00:50
@Barrett_McGlynn, it looks good, I'll try and write later - alec.Wilkins commented on April 4th 20 at 00:53
@Barrett_McGlynn, thank you very much! Have done so:
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {

} else {
$('.card').attr('data-fancybox', " );
}
Anyhow, it worked - alec.Wilkins commented on April 4th 20 at 00:56

Find more questions by tags CSSfancyBox