Question

在这方面还是一个新手。我一直在尝试对SO，各种网站和YT进行一些修复，但似乎无法确定图像加载器存在的问题；希望有更多的大脑细胞嘲笑我-然后希望将我指向正确的方向。我会尽力阐明我的目标和问题。

目标：要让poptrox-popup加载器在台式机上的大图像和移动设备上的小图像之间滚动。

问题：：首次单击时，加载器似乎正确显示了桌面图像，对于移动图像，反之亦然；但是，使用左/右从一个图像到另一个图像单击加载器时导航时，它仍然分别显示移动图像和桌面图像-对于移动和台式机屏幕。我认为这可以归结为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;
    }

}

尝试过的解决方案：尝试在CSS中为display: none;标签使用不同的位置。我还在@media screen XXX内部和外部的不同位置进行了尝试，但是轮播加载器似乎仍然希望在台式机和移动设备上显示大大小小的图像。

我敢肯定某个地方有一个简单的解决方法，但似乎无法发现这一点或从其他帖子中获得清晰的想法。任何帮助，不胜感激！

我的JSfiddle带有所有HTML / CSS：JS Fiddle -很抱歉不包括JS文件。我不清楚如何在JSF上添加多个内容，而且我想可以链接到我的网站，以便您可以实时看到问题：

我的网站：Queensland Quintessentials -我的网站上还有其他问题，但我正在慢慢解决！

在弹出式加载器中过滤响应图像

0 个答案: