Full Screen (Page) Background Image Slideshow Plugin
Couple of days ago, we posted about how you can set up Full Page Background Image Slideshow on any type of website. This plugin is specifically developed for the WordPress for the same cause. It has few more features to customize the animation and set up the images. With This WordPress plugin you can add single or multiple backgrounds that spans behind whole website contents. Additionally, you also can
1. Set single background
2. Configure multiple backgrounds to behave as slideshow
3. Randomize Backgrounds for each refresh
4. Set animation duration and delay
5. Add dotted Overlay
6. Set Opacity of Background Images
You can download this plugin from WordPress Plugin Repository.
An Example
An Example
An Example
Settings in Admin Panel
If you do not want added features or want to avoid plugin installation, Please check our related snippet.
Can you trigger the plugin to switch for a certain image using javascript?
My goal, is to have some kind of gallery thumbnails, and to switch the background images by clicking the thumbnails. Thank you in advance
Andrei, plugin uses minimal css and javascript to minimize the page size. Therefore, it uses setInterval function of javascript. It is not impossible to switch to a particular image but you have to write a few line of code. Just to give a start, here is some info
1. window.fsi_interval is the interval variable to stop and start the slideshow
2. fsi_slideshow function for the setInterval function
3. Images can be selected using jQuery select “#fsi-full-bg img” the active image should have ‘fsi_active’ class.
Hope it will help.
Please share your code if you could get it working. It will be much appreciated.
Thanks
Hello,
I apologize for the late response, but I’ve been assigned to other projects, and only now I’ve been reassigned to the said project only yesterday. I did managed to control the background, but it’s a lot of code, and i’m not sure how to post it here.
Basically, I’ve made 3 functions, for the next image, prev image, and for the n’th image.
You can see the code on in the page http://m-auto-vermietung.de/ at lines 190 to 240. You can post it anywhere if you want to, I tried to comment it so it will be easier to understand.
The function calls are in the custom.js page.
Thanks a lot for the awesome plugin, and easy readable javascript code . If I ever have the pleasure to meet you, i’ll buy you a drink!.
Regards!
I want to add up that that code was written in a hurry, and also, i’ve only been working in frontend only for several months, so i have to admit, I’m not sure how variable scope works in javascript. I am sure that i could write much cleaner code, if you think that is necessary (next and prev functions can be made in only a couple of lines of code).
I’d like to use this on the home page. Can I set it up so that it only applies to one page?
thank you
Not yet, Brian.
But, It will be added in next upgrade which is couple of days away.
Hey there,
Can I just check how to get this plug in started? I’ve installed it but not sure if I need to pop anything in functions php. I don’t need changing backgrounds or anything like that I’m just trying to get a single background image on my site.
Thanks very much!
Martin, after installing this plugin visit Settings->FullScreen Backgrounds. Set first image and the un-check “Enable Slideshow” tick.
Sure Mohsin, it’s http://www.itsourreligion.co.uk. As you’ll be able to see, I currently just have the single image at the top, and that’s the one I’m trying to stretch out to cover the complete background. Thanks for your help
I see, I assume it is a plugin’s glitch for now. You can fix it by adding following CSS to your theme’s style.css.
#fsi-full-bg img {opacity:1 !important;}
The small image your seeing at the top is because of “Appearance->Background” you enabled. Please disable to avoid duplication.
Hi Mohsin,
That has sorted it out. Thank you so much for your help. As simple a problem as this seemed, I’d spent some time trying to sort it and you were the first to really help me out. Thanks for all the great work you’re doing.
Martin
Thanks very much Mohsin. I’ve done all those bits, but when I go to appearance>background, it still just leaves me with a very small image at the top of the screen. I have options to tile it, but none to make that one image stretch to the whole background. Is it that my theme might not support it. I’m using the twenty twelve theme. Any ideas? Thanks again.
This plugins has nothing to do with “Appearance -> Background”. You might be looking at wrong place. Plus, Can you post link to your website?
Hello
tried setting background image through Full Screen Backgrounds to http://plumbermelbourne24hr.com.au/wp-content/uploads/2013/03/waterfalls.jpg
for the standard 2012 theme, but it doesn’t display:
http://plumbermelbourne24hr.com.au/
Please redownload and re-activate plugin. Or you can paste following CSS to your theme’s style.css to fix it.
#fsi-full-bg img {opacity:1 !important;}
p.s. Above CSS code should not be used when slideshow is enabled.
Thank you. Background image appears but is only around the content area, not behind it: http://plumbermelbourne24hr.com.au/
Perhaps future versions could have the option of full screen or like it appears above.
I installed and activated this plugin (WP 3.5.1) but when I click on ‘Upload/Select’ nothing happens. There seems to be no way to get it working. I tried deactivating/reactivating but nothing…
Please advise, this looks like the perfect plugin for my needs.
Leo, Thanks for pointing out the issue. I just fixed and updated the repository. Please re-download and activate the plugin. You should see WordPress default image management tool to select the images. Thanks!
I was reading that you where planning to have an option to have slideshow to be implemented in specific pages. Did you have time to do this already?
thanks
Not yet, Alex. I am busy in many projects these days. I will give it a shot as soon as I get few hours of free time.
Gгеetіngs! Vеrу useful advicе in thiѕ рarticular аrticlе!
ӏt’s the little changes which will make the most significant changes. Many thanks for sharing!
This is byfar my favorite plugin I have come by. There is one problem with it though… When viewing the site, the background image makes scrolling on the page really laggy. Is anyone else having this problem? Is there any code I should modify to help reduce the lag?
Thanks and awesome plugin!
You should optimize your images. Try Jpeg images they save alot of size than the other formats.
Hi Mohsin,
Thanks for this plugin. Is there any way to disable, or “hide” this on the inner pages? We want the background to rotate on the homepage which is working perfectly, but want just a plain black background on the inner pages. Thanks for your help!
Adam, Please download the upgrade. You should now see new settings to switch off the backgrounds for inner pages. Cheers!
Thank you very much for your timely response. Great plugin, will use again.
-Adam
Hi, i would like to display slides in other container than , for example under my header section. Is it possible to adress your slider in other divs ?
It is not possible. This plugin is primarily developed for full screen backgrounds.
The plug-in looks great. What I want to be able to do is sync the animated background slideshow with a picture caption that will reside in a foeground layer is this possible?
Yes, it is possible with some tricks of CSS and JS. But, this plugin does not support it yet.
Hiya!
Thanks for the awesome plugin. I have one question – the image right now isn’t centered – how do I change that?
Another question – can I make the slideshow exist in a holder below the header, footer and main content holder? As in it doesn’t end up taking over the whole screen, but the dimensions are restricted to a div.
Hey Denise,
For centering, following CSS may help (I did not test it though)
#fsi-full-bg img {text-align:center; vertical-align:middle;}Secondly, You can not move it in a holder. but, you can have it in background and place the header, footer and main content above it using absolute positioning.
Thanks