How to use Supersized inside a div for a background image slideshow

Update 25-Dec-2013

After I got several comments saying that this does not work, I took a look at my code and realized that I had missed one crucial step in this tutorial. Even though I have mentioned that all  position: fixed;  declarations should be changed to position: relative; there is an exception for the  position  declaration in the #supersized li  rule set which should actually be changed to position: absolute .

Sorry for this confusion and thanks for all the support.

Recently while building a web page for a client, I came across the problem of implementing a cross fading background image slideshow inside a div.

Initially I tried to directly change the CSS background-image property of the div using jQuery. However the problem was that jQuery cannot directly cross fade CSS background-images. In fact the numerous solutions I found across the web suggested to use HTML image tags or separate divs for cross fading. Again these solutions posed another problem in that the images do not nicely fill up the div.

After a lot of frustrating attempts I decided to use the Supersized jQuery plugin. I had previously used this plugin on other projects and it beautifully displays full screen background image slideshows. However by default Supersized loads its slideshows inside the body tags and there is no apparent way to display the slideshow only inside a particular div.

After some searching I came across a solution to change Supersized’s default behavior and use it only inside a particular div.

First you need to edit the Supersized plugin file and change (function(e){e(document).ready(function(){e("body").append at the top of the file to (function(e){e(document).ready(function(){e("#your-div-id").append

Once the plugin file is edited, you need to edit the supersized.css file and change all position: fixed; declarations to position: relative;.  Next change the  position  declaration in  #supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }  to position: absolute;. I also had to add ul#supersized {margin: 0px;} to fix an issue with the slideshow having some extra left margin.

Here is how my edited supersized.css file looks like.

Now you can simply add the Supersized function to your page to display the image slideshow. Here is an example settings that you could use.

Remember that you need to also include jQuery as well as the Supersized plugin file and supersized.css file on your page for this to work.

You can see a working example of this here.


Fatal error: Call to undefined function web2feel_content_nav() in /home4/dash8x/public_html/blog/wp-content/themes/Lantern-Child/single.php on line 38