Salve ho trovato un slideshow online ed ho provato ad adattarlo ad un mio sito ma riscontro un problema:
voglio mettere questo slideshow come header 100% del sito.
Ho modificato il codice per fargli prendere le immaigni da una cartella e dare sempre il 100% di width e la height relativa al'immagine.
solo ora tutte le div che vengono dopo lo slideshow gli appaiono dietro (inivisibili) invece che sotto.
ecco il codice:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it
***/
function slideSwitch() {
var $active = $('#slideshow div.active');
if ( $active.length == 0 ) $active = $('#slideshow div:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow div:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
<style type="text/css">
/*** set the width and height to match your images **/
#slideshow {
position:relative;
width:100%;
}
#slideshow div {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
width:100%;
}
#slideshow div.active {
z-index:10;
opacity:1.0;
width:100%;
}
#slideshow div.last-active {
z-index:9;
width:100%;
}
</style>
</head>
<body style="font-family: Arial, Sans-serif, sans;">
<div id="slideshow">
<?php
if ($handle = opendir('pics')) {
$actv=false;
/* This is the correct way to loop over the directory. */
while (false !== ($file = readdir($handle))) {
if ($file!="." && $file!="..") {
if ($actv==false) {
echo '<div class="active"> [img]'.$file.'[/img] </div>';
$actv=true;
}
else {
echo '<div> [img]'.$file.'[/img] </div>';
}
}
}
closedir($handle);
}
?>
</div>
<div id="mainbody">
CONTENT.....
</div>
</body>
</html>
Come posso far apparire la div mainbody sotto lo slider? aiuto!
grazie