SO Help: Showing content below Supersized slideshow
by bizamajig
HTML
<script src="http://www.fabrikgrafik.be/slider/js/jquery.easing.min.js"></script>
<script src="http://www.fabrikgrafik.be/slider/js/supersized.3.2.7.min.js"></script>
<script src="http://www.fabrikgrafik.be/slider/theme/supersized.shutter.min.js"></script>
<link rel="stylesheet" href="http://www.fabrikgrafik.be/slider/css/supersized.css">
<link rel="stylesheet" href="http://www.fabrikgrafik.be/slider/theme/supersized.shutter.css">
<!--
LOOK AT BOTTOM OF CSS BLOCK, OVER THERE -> -> ->
-->
<header>
</header>
<div id="content-wrapper" style="margin: auto; width: 960px; opacity: 0.5; clear: both; background: red; color: #FFFFFF;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac velit sem. Nunc dapibus condimentum lorem quis eleifend. Vestibulum a nunc ut urna placerat accumsan. Nulla tristique lacinia odio, nec consequat tortor posuere vel. Phasellus quis urna ac arcu tempor elementum ut nec urna. Nulla facilisi. Nulla vel ante ac tortor viverra interdum id non felis. Integer viverra varius massa, eu facilisis quam auctor volutpat.</p>
<p>Praesent vitae mauris sit amet diam consequat vehicula. Maecenas quis ornare arcu. Donec sagittis lacinia dolor vitae cursus. Aliquam quis enim ut lorem cursus tempor ut sit amet magna. Cras ut felis sapien. Nunc vel nibh at urna hendrerit adipiscing in in nulla. Mauris mi tortor, iaculis quis ornare in, tincidunt eget mauris. Praesent eros justo, commodo sit amet tincidunt fringilla, rutrum non metus. Sed vitae tellus odio, non tincidunt purus. Mauris leo augue, tristique vitae egestas vitae, blandit at justo. Etiam pulvinar lorem a mauris viverra viverra. In congue purus a augue placerat gravida. Praesent enim magna, viverra a rutrum eu, egestas vel eros. Praesent cursus lorem id velit vehicula quis commodo nulla mollis. Fusce interdum nunc eget tortor malesuada malesuada.</p>
<p>In laoreet malesuada facilisis. Praesent condimentum dolor ut arcu sodales placerat....
CSS
ul#demo-block{ margin:0 15px 15px 15px; }
ul#demo-block li{ margin:0 0 10px 0; padding:10px; display:inline; float:left; clear:both; color:#aaa; background:url('img/bg-black.png'); font:11px Helvetica, Arial, sans-serif; }
ul#demo-block li a{ color:#eee; font-weight:bold; }
/* i changed this too **/
#controls-wrapper { position: absolute !important; display: none; }
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 : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : [ // Slideshow Images
{image : 'http://www.fabrikgrafik.be/slider/dmoa/001.jpg', title : 'DMOA', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg'},
{image : 'http://www.fabrikgrafik.be/slider/dmoa/002.jpg', title : 'DMOA', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg'},
{image : 'http://www.fabrikgrafik.be/slider/dmoa/003.jpg', title : 'DMOA', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg'},
{image : 'http://www.fabrikgrafik.be/slider/dmoa/004.jpg', title : 'DMOA', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg'},
{image : 'http://www.fabrikgrafik.be/slider/dmoa/005.jpg', title : 'DMOA', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg'}
]
});
});
$(document).ready(function() {
$('#textoverlaybtn').click(function(){
$("#textoverlaybtn, #nextslide, #prevslide, #indexbtn, ul#slide-list").css("display", "none");
$(".slideshow-overlay").fadeIn('5000', function() {
$(".slideshow-overlay").css("display", "block");
});
});
$('#closeoverlaybtn').click(function(){
$(".slideshow-overlay").fadeOut('5000', function() {
...