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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/* Supersized - Fullscreen Slideshow jQuery Plugin Version : 3.2.7 Site : www.buildinternet.com/project/supersized Author : Sam Dunn Company : One Mighty Roar (www.onemightyroar.com) License : MIT License / GPL License */ * { margin:0; padding:0; } body { background:#111; height:100%; } img { border:none; } #supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;} #supersized { display:block; position:absolute; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; } #supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; } #supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; } /*Speed*/ #supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; } /*Quality*/ #supersized li { display:block; list-style:none; z-index:-30; position:absolute; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; } #supersized a { width:100%; height:100%; display:block; } #supersized li.prevslide { z-index:-20; } #supersized li.activeslide { z-index:-10; } #supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; } #supersized li.image-loading img{ visibility:hidden; } #supersized li.prevslide img, #supersized li.activeslide img{ display:inline; } ul#supersized {margin: 0px;} |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<script type="text/javascript"> jQuery(function($){ $.supersized({ // Functionality slide_interval : 3000, // Length between transitions transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left transition_speed : 700, // Speed of transition // Components slide_links : false, // Individual links for each slide (Options: false, 'num', 'name', 'blank') slides : [ // Slideshow Images {image : 'assets/img/slide-1.jpg'}, {image : 'assets/img/slide-2.jpg'}, {image : 'assets/img/slide-3.jpg'}, {image : 'assets/img/slide-4.jpg'}, {image : 'assets/img/slide-5.jpg'}, {image : 'assets/img/slide-6.jpg'}, {image : 'assets/img/slide-7.jpg'}, {image : 'assets/img/slide-8.jpg'}, {image : 'assets/img/slide-9.jpg'}, {image : 'assets/img/slide-10.jpg'} ] }); }); </script> |
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
nice!!
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
Did you find a solution? I’m trying to implement this on virtue theme (.wrap.contentclass).
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?
Did you try specifying an explicit height for that div in your css?
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
you need to specify that by yourself
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.
I got this to work. Thanks
I have the same issue, please can you tell me how to make it work?
It could be because of several possible number of issues. Hard to tell without seeing your actual code. Are you sure the image urls are correct? Also are you trying to load Supersized inside multiple elements on the same page?
Can you please share with us how you got it to work?
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.
Thanks, works perfectly now.
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
Thank you very musch
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! 🙂
I am also having difficulty adding clickable links now that it’s in a div…Did you find any answers? thanks
men, thanx you are the best
Excellent solution thank you so much!
I am having the same issue with links no longer linking – any ideas?
Thanks again for sharing seriously saved the day 🙂
http://stackoverflow.com/questions/7476342/jquery-supersized-plugin-problem-with-anchor-tag
open supersized.css , find #supersized { display:block; position:absolute; left:0; top:0; overflow:hidden; z-index:-999; ….
change z-index:-999px; to z-index:1;
That’s it.
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?
Yes
Awesome. I am getting the slider to come up in the div but images will not will not load. Thumbnails will load. Ideas?
Make sure the slide image urls are correct
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 ?