带有自定义图像位置的全屏背景幻灯片(每张幻灯片)

时间:2013-09-06 00:37:53

标签: javascript jquery slideshow fullscreen supersized

我的客户有一个他们想要在网站上用作全屏背景的图像库。

我正在使用Supersized js中的幻灯片功能+ api调用作为网站导航中幻灯片/子页面的背景,这与我的前景元素很好地配合,以创建良好的多页效果。

唯一的问题是他们的一些图像不能很好地居中,而应该是顶部对齐(如果图像的焦点在较大的窗口大小时会被切断,如果它们居中)。

目前我正在做一个非常讨厌的手动销毁和重建,以便在不同时进行调整(目前图像在CMS中管理,因此如果图像是垂直对齐的,用户只需选择一个框)。这样做的伎俩,但是很笨拙并且有一些讨厌的跳跃。

你知道如何在不破坏/重建的情况下做到这一点吗?或者是否有一个不同的插件可以处理这个(并且仍然使用我描述的分页功能?)

谢谢你们!

1 个答案:

答案 0 :(得分:0)

您可以尝试使用jQuery.mb.bandGallery插件。它的优点是,在全屏模式下,它会调整图像大小并使图像居中以适合屏幕。

或者您可以尝试从tympanus.net/codrops的多篇文章和演示中获取灵感,例如: