如何获得fotorama来处理备用的html标记结构

时间:2014-11-13 12:26:50

标签: jquery html image

有没有办法让fotorama与pictureFill一起使用?或另一种说法:如何让fororama接受替代的html标记。

目标:具有响应/自适应图像输入的FullScreen滑块。 Just Images现在。没有文字。图片上没有链接。

正在使用pThumb和pictureFill传送图像。

pictureFill标记需要包含在div中,并且该div内是pThumb生成的可用大小选项。

这是一个图像/幻灯片的代码块的示例

<div data-picture>
    <div data-img="[[+image:pthumb=`w=400&h=225&zc=1&q=100`]]"></div>
    <div data-img="[[+image:pthumb=`w=800&h=450&zc=1&q=100`]]" data-media="(min-width: 400px)"></div>
    <div data-img="[[+image:pthumb=`w=1000&h=563&zc=1&q=100`]]" data-media="(min-width: 800px)"></div>
    <div data-img="[[+image:pthumb=`w=1200&h=675&zc=1&q=100`]]" data-media="(min-width: 1000px)"></div>
    <div data-img="[[+image:pthumb=`w=2000&h=1125&zc=1&q=100`]]" data-media="(min-width: 1200px)"></div>
</div>

使用pictureFill,我可以更改它引用的内容。最初,它使用了data-src。我将其修改为data-img,希望fororama能够使用它。但是,我认为fotorama不知道如何处理包装div数据图片。

此时,图像以适合显示的尺寸成功传送。但是图像没有被fotorama完全处理。幻灯片更改,淡入淡出等工作,但图像没有填满全屏。我尝试过CSS,但这只是基于其宽高比来缩放图像。

就像fotorama有几个基本的设置。如何修改它以接受我上面提供的html标记?

0 个答案:

没有答案