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

[note color=”#ffffd6″]

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.

[/note] 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.

LIVE DEMO

40 Comments

  • Have you ever managed to get this to work in WordPress? I tried the above but havent got it working yet. Maybe its a JS call thing? Im using a plugin wp-supersized….I wonder where it loads the JS file and if that would make a difference

  • I haven’t tried this in WordPress yet. But it should work the same way. The key thing here is editing the Supersized core file so that the images are loaded inside a particular div instead of the body tag. If you are using wp-supersized, then you will need to edit the plugin’s core files, but I wouldn’t recommend that. A better way would be to edit your functions.php file and enqueue the edited Supersized jQuery file directly. I could give you a little help if you tell me what you are trying to achieve here.

  • I’ve managed to get this to work with wordpress – in that the supersized and supersized-loader divs appear in the correct div of my pages, but they won’t display the images. They show a width that matches the parent div, but a height of 0. Any ideas?

  • The same here: works in a div in Joomla only on the first page. Not on other pages. Supersized-loader divs are empty.

    • As I’ve mentioned above, did you try giving an explicit height for the div? If I’m not mistaken Supersize loads the images absolutely positioned, so it want give any height to the parent div.
      I don’t know much about Joomla but you might be loading the js files in such a way that they are only loaded in the homepage. You can check the page source to see if the Supersized js file is there.

      • Tried that, but no success. It works well in a simple html structure, so the script is ok. Maybe some conflict in my css…
        Thanks anyway

        • You can try inspecting the element with something like Firebug. See if the css is getting applied. You can use !important in your css height declaration if you want to avoid any css conflicts.

  • “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”

    sir i didn’t get my div-id from where i found it..can you plz tell me with example

  • Great job, although changing all properties of position from “fixed” to “relative” didn’t work for me, but I made it work anyway, thank you for the tutorial.

  • Glad to find your post. I have 4 images and only the 1st image shows and the rest are blank but still does the image rotation. The only thing I did not add is the ul#supersized {margin: 0px;}. I added an id=wrapper and and an id=header where the images are located. Deleted all the divs related to the progress bar and the prev & next arrow. What do you think is my issue.? Thank you for this post since I’ve been messing around with this plugin for days since I am not familiar with jquery or javascript.

  • Thanks! As another poster mentioned position:relative sent this into wacky-ville for me too. position:absolute actually worked great with a couple of other tweaks.

  • Thank you so much. This is exactly what i was looking for. I worked with Supersized before and it was the first thing i thought of when i wanted to made a ‘header slider’. But i couldn’t get it to work. I looked at the example page on how to implement it. Once again, thanks!

  • I think I have followed the instructions but my images are still showing up as page background and not div background. ie – the rest of the page scrolls over them rather than them scrolling with it. The div i put to hold them is showing up but it is blank. test code is at http://www.road-soda.com/page2test2.html
    As far as I can tell, my code is the same as in your example maldives page. I’m sure it’s something very simple but I just can’t spot it.

    • I had actually missed a step in the original tutorial. I’ve now updated this post and it should work fine for you if you follow the new steps.
      But if you want to put the controls inside your div too, then you’d have to also edit the supersized,shutter.css file that you are using.

  • I managed to get this to work so thanks for that but i have an additional question.

    How would you go about adding more than one on one single page? I am utilizing this script through different section divs on a single page.

    Thanks

  • Thx a lot Arushad, this was exactly what I was looking for. In my case, on a responsive site, I let the position:fixed;in #supersized in order to work fine on smartphones. and put max-width: none !important; on #supersized.speed img because the theme I was working on uses bootstraps (and max-width:100% in all imgs, so it stretches the imgs). Best regards!

  • Is anyone having trouble getting the images to link to where they are supposed to? I can’t seem to produce a clickable link. If I find the problem, I’ll post the answer… but I hope before long someone posts it first! 🙂

  • men, thanx you are the best

  • works !! Thank you so much.. I did have to make some other changes as well but finally got it to work.. Thank you

  • Not a quite great modification since the customized div is not passed by ‘Option’. However, I love this solution to make proper one for me. Thank you for your share. Awesome!!

  • This was extremely helpful to me. Thank you so very much!

  • I love the slider… but my images get “pinched” when this slider is used in conjunction with Foundation as a CSS tool. Any ideas as to how to stop the “pinch” affect?

  • Arushad, are you still replying to this thread?

  • I followed all the steps but my background image still covers full width and height of the screen, the other div which i wanted to place below that is still placed on the background image . Any Solution ?

Leave a Reply