Фильтрация адаптивных изображений в загрузчике всплывающих окон - PullRequest
Новая
       21

Фильтрация адаптивных изображений в загрузчике всплывающих окон

0 голосов
/ 07 декабря 2018

Все еще очень новичок в этом.Я пробовал некоторые исправления для SO, различных веб-сайтов и YT, но не могу определить, в чем проблема с моим загрузчиком изображений;надеясь, что некоторые дополнительные мозговые клетки будут смеяться надо мной, а затем, надеюсь, направят меня в правильном направлении.Я постараюсь разъяснить свои цели и проблему.

Цель: Для загрузки всплывающего окна poptrox можно перемещаться между большими изображениями на рабочем столе и небольшими изображениями на мобильном устройстве.

Проблема: Кажется, что загрузчик правильно отображает изображение рабочего стола при первом нажатии, и наоборот с мобильным изображением, но при переходе между изображениями с одного на другое с помощью левой/ Right Nav все еще показывает мобильное изображение, а затем изображение рабочего стола для каждого - для мобильных и настольных экранов.Я думаю, что это сводится к этим частям в HTML / CSS, но я не уверен, так как я попробовал все решения, которые я могу придумать.

HTML: 

<article class="thumb">
<a href="images/fulls/02-LD.jpg" class="image" id="desktop"><img src="images/thumbs/02.jpg" alt="" /></a>
<a href="images/thins/02-TD.jpg" class="image" id="mobile"></a>
</article>

CSS: 

.poptrox-popup .loader #mobile {
    display: none;
}

@media screen and (max-width: 980px) {

    .thumb #mobile {
        display: block;
    }

    .thumb #desktop {
        display: none;
    }

}

Решенные решения: Попыткаразличные места для тега display: none; в CSS.Я также пробовал это в разных местах в пределах @media screen XXX, и вне этого, но карусельный загрузчик все еще хочет показывать большие и маленькие изображения на настольных компьютерах и мобильных устройствах.

Я уверен, что где-то есть прямое исправление, но, похоже, не могу это заметить или получить четкое представление о других постах.Любая помощь высоко ценится!

Мой JSfiddle со всеми HTML / CSS: JS Fiddle - Извините, что не включил файлы JS.Я не понимаю, как добавить несколько в JSF, а также я решил связать свой сайт, чтобы вы могли увидеть проблему вживую:

Мой сайт: Queensland Quintessentials - Есть другие проблемына моем сайте, но я медленно работаю над ними!

...