Hey folks,
I am trying to create a slideshow for the homepage of a website using Slideshow 3, but instead of displaying the images correctly, the background remains white. This happens whether or not I use hooks.
This code is included in the header:
<script type="text/javascript" language="javascript" src="<?php bloginfo('template_directory'); ?>/static/js/effects.core.js"></script>
<script type="text/javascript" language="javascript" src="<?php bloginfo('template_directory'); ?>/static/js/effects.slide.js"></script>
<script type="text/javascript" language="javascript" src="<?php bloginfo('template_directory'); ?>/static/js/supersized.3.0.js"></script>
<link rel="stylesheet" type="text/css" src="<?php bloginfo('template_directory'); ?>/static/css/supersized.css" />
<?php endif; ?>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$.fn.supersized.options = {
startwidth: 1024,
startheight: 768,
vertical_center: 1,
slideshow: 1,
navigation: 0,
thumbnail_navigation: 0,
transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 0,
slide_counter: 0,
slide_captions: 0,
slide_interval: 7000,
slides : [
{image : '<?php bloginfo('template_directory'); ?>/static/images/image-one.jpg', title : '', url : ''},
{image : '<?php bloginfo('template_directory'); ?>/static/images/image-two.jpg', title : '', url : ''},
{image : '<?php bloginfo('template_directory'); ?>/static/images/image-three.jpg', title : '', url : ''}
]
};
$('#supersized').supersized();
...
});
</script>And this is the corresponding css in style.css:
#supersized {
position: fixed;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
z-index: 0;
}
#supersized img {
position: absolute;
width: 100%;
height: 100%;
}The site itself can be found at http://new.vmmissions.org if context is helpful.
Any suggestions?
