具有自定义图像位置的全屏背景幻灯片（每张幻灯片）

Question

I've got a client who has a library of images they want to use on a site as fullscreen backgrounds.

I'm using the slideshow functionality + api calls in Supersized js to act as the backgrounds for my slides/sub pages in a site navigation, this is playing nicely with my foreground elements to create a good multiple page effect.

The only issue is that some of their images don't work well centered, and should instead be top aligned (as the focal points of the images get cut off at larger window sizes if they're centered).

At the moment I'm doing a really nasty manual destroy and rebuild to make the adjustment when it's different (currently the images are managed in a CMS so the user just selects a box if the image is be vert aligned). This does the trick, but is clunky and has some nasty jumpiness.

Do you know of a way to do this without destroying/rebuilding OR is there a different plugin that could handle this (and still work with the pagination functionality I've described?)

Thanks guys!

Answer 1

You can try the jQuery.mb.bandGallery plugin. It has the advantage that, in fullscreen, it will resize and center the image to fit the screen.

Or you can try/get inspiration from some of the multiple articles and demos at tympanus.net/codrops , like:

• Animated Content Menu
• Fullscreen Image Blur
• Responsive 3D Panel Layout