自适应图像与画廊



我正在使用gallery .js在我正在工作的网站中创建背景幻灯片,我希望能够为不同的设备提供不同的分辨率。我使用的是adaptive-images.php,它正在生成所需的文件,但似乎无论如何,galleria仍在提取原始的全分辨率文件。是否有一种方法可以使此工作,或者像picturefill.js这样的替代解决方案?

谢谢!

我也很想看到这个。不幸的是,这只能在Javascript中完成-而不是在PHP中。也许可以使用pictufill .js作为Galleria插件,但不幸的是我不知道足够的Javascript来做到这一点。说明:Galleria动态查找所引用的图像并显示该图像。需要告诉Galleria使用不同的图像源(取决于屏幕大小)。要做到这一点,picturefill.js使用的方法(用srcset代替src)将是完美的,但它必须集成为Galleria中的一个功能。对于有Javascript知识的人来说,这可能不会太难——有人知道吗?这个问题最近也在Galleria的支持下被问到:http://support.galleria.io/discussions/questions/18040-compatible-with-picturefilljs

然而,Galleria提供了一个有点有用的功能:您可以通过提供以下标记来使用三种不同大小的图像:

<div class="galleria">
    <a href="/img/large1.jpg"><img src="/img/thumb1.jpg" data-big="/img/big1.jpg" data-title="My title" data-description="My description"></a>
    <a href="/img/large2.jpg"><img src="/img/thumb2.jpg" data-big="/img/big2.jpg" data-title="Another title" data-description="My description"></a>
</div>

'data-big'尺寸将在全屏模式下显示,而不取决于屏幕尺寸。也许这是一种变通办法,直到有更有用的东西出现。

最新更新