ciao ragazzi.. prendendo spunto da ---- link ---- vorrei fare in modo che al di sopra delle immagini che scorrono in background, ci sia un div all'interno del quale scorrono le stesse immagini che in quel momento fanno da background alla pagina (debitamente rinominate e ridotte ...)
Quindi se in quel momento viene mostrata l'immagine di sfondo abc.jpg, vorrei che all'interno di un div passino le stesse immagini, ma ridotte (che quindi cambino con l'effetto fade nello stesso momento in cui cambia, con lo stesso effetto, l'immagine di sfondo)
ecco in cosa si compone lo script:
index.html
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<style>
#prova {width:500px;height:200px;background-color:#990000;margin-left:-250px;left:50%;position:absolute}
</style>
</head>
<body>
<div id="header">
<div id="headerimgs">
<div id="headerimg1" class="headerimg"></div>
<div id="headerimg2" class="headerimg"></div>
<div id="prova"></div>
</div>
</div>
</body>
di fatto il div PROVA è quello in cui voglio far apparire il tutto
style.css
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,bl ockquote,fieldset,input{margin:0; padding:0;}
/* HEADER */
#header { height:300px; }
.headerimg { background-position: center top; background-repeat: no-repeat; width:100%; height:300px; position:absolute; }
script.js
var slideshowSpeed =4000;
// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [
{
"title" : "Stairs",
"image" : "vacation.jpg",
"url" : "http://www.sxc.hu/photo/1271909",
"firstline" : "Going on",
"secondline" : "vacation?"
},
{
"title" : "",
"image" : "food1.jpg",
"url" : "",
"firstline" : "<img src=images/food1_mini.jpg>",
"secondline" : ""
}
];
$(document).ready(function() {
var interval;
$("#control").toggle(function(){
stopAnimation();
}, function() {
// Change the background image to "pause"
$(this).css({ "background-image" : "url(images/btn_pause.png)" });
// Show the next image
navigate("next");
// Start playing the animation
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);
});
var activeContainer = 1;
var currentImg = 0;
var animating = false;
var navigate = function(direction) {
// Check if no animation is running. If it is, prevent the action
if(animating) {
return;
}
// Check which current image we need to show
if(direction == "next") {
currentImg++;
if(currentImg == photos.length + 1) {
currentImg = 1;
}
} else {
currentImg--;
if(currentImg == 0) {
currentImg = photos.length;
}
}
// Check which container we need to use
var currentContainer = activeContainer;
if(activeContainer == 1) {
activeContainer = 2;
} else {
activeContainer = 1;
}
showImage(photos[currentImg - 1], currentContainer, activeContainer);
};
var currentZindex = -1;
var showImage = function(photoObject, currentContainer, activeContainer) {
animating = true;
// Make sure the new container is always on the background
currentZindex--;
// Set the background image of the new active container
$("#headerimg" + activeContainer).css({
"background-image" : "url(images/" + photoObject.image + ")",
"display" : "block",
"z-index" : currentZindex
});
// Hide the header text
$("#headertxt").css({"display" : "none"});
// Set the new header text
$("#firstline").html(photoObject.firstline);
$("#secondline")
.attr("href", photoObject.url)
.html(photoObject.secondline);
$("#pictureduri")
.attr("href", photoObject.url)
.html(photoObject.title);
// Fade out the current container
// and display the header text when animation is complete
$("#headerimg" + currentContainer).fadeOut(function() {
setTimeout(function() {
$("#headertxt").css({"display" : "block"});
animating = false;
}, 0);
});
$("#firstline" + currentContainer).fadeOut(function() {
setTimeout(function() {
$("#firstline");
animating = false;
}, 0);
});
};
var stopAnimation = function() {
// Change the background image to "play"
$("#control").css({ "background-image" : "url(images/btn_play.png)" });
// Clear the interval
clearInterval(interval);
};
// We should statically set the first image
navigate("next");
// Start playing the animation
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);
});
come potrete immaginare sono una schiappa in js, ma per voi credo sia più semplice
Mi sapete aiutare????
Grazie in anticipo
Rispondi quotando
)
