graxie x la risposta...
siete mitici . . .
mi sono sbattuto un po' e con il tuo codice e con un po' di roba in giro ho risolto. posto il codice x che serve in futuro:
lo script prende una serie di immagini anche infinite e le fa ruotare come background su uno sfondo del mio div, è possibile quindi piazzargli sopra menu, scritte, tutto quanto, ci sono anche i tastini avanti indietro, quindi potete usarla anche come galleria di immagini.
dovete importare x prima cosa questa stringa
Codice PHP:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
codice js dove sono le nostre immagini che cambiano a tempo
Codice PHP:
<script type="text/javascript">
/*
* Author: Marco Kuiper ([url]http://www.marcofolio.net/[/url])
*/
// Speed of the automatic slideshow
var slideshowSpeed = 6000;
// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
"title" : "Stairs",
"image" : "bad.jpg",
"url" : "http://www.sxc.hu/photo/1271909",
"firstline" : "Going on",
"secondline" : "vacation?"
}, {
"title" : "Office Appartments",
"image" : "bigo.jpg",
"url" : "http://www.sxc.hu/photo/1265695",
"firstline" : "Or still busy at",
"secondline" : "work?"
}, {
"title" : "Mountainbiking",
"image" : "bloom.jpg",
"url" : "http://www.sxc.hu/photo/1221065",
"firstline" : "Get out and be",
"secondline" : "active"
}, {
"title" : "Mountains Landscape",
"image" : "box.jpg",
"url" : "http://www.sxc.hu/photo/1271915",
"firstline" : "Take a fresh breath of",
"secondline" : "nature"
}, {
"title" : "Italian pizza",
"image" : "bug.jpg",
"url" : "http://www.sxc.hu/photo/1042413",
"firstline" : "Enjoy some delicious",
"secondline" : "food"
}
];
$(document).ready(function() {
// Backwards navigation
$("#back").click(function() {
stopAnimation();
navigate("back");
});
// Forward navigation
$("#next").click(function() {
stopAnimation();
navigate("next");
});
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;
}, 500);
});
};
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);
});
</script>
e in fine il codice html
Codice PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>Beautiful advanced jQuery background image slideshow</title>
<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>
</head>
<body>
<div id="header">
<div id="headerimgs">
<div id="headerimg1" class="headerimg"></div>
<div id="headerimg2" class="headerimg"></div>
</div>
<div id="nav-outer">
<div id="navigation">
<div id="menu">
<ul>
[*][url="http://www.marcofolio.net/"]compani[/url]
[*][url="http://www.twitter.com/marcofolio"]product[/url]
[*][url="http://feeds2.feedburner.com/marcofolio"]designer[/url]
[*][url="http://jquery.com/"]shops[/url]
[*][url="http://en.wikipedia.org/wiki/Cascading_Style_Sheets"]event[/url]
[*][url="http://buysellads.com/buy/detail/956"]news[/url][*][url="http://buysellads.com/buy/detail/956"]contact[/url]
[/list]
</div>
</div>
</div>
<div id="headernav-outer">
<div id="headernav">
<div id="back" class="btn"></div>
<div id="control" class="btn"></div>
<div id="next" class="btn"></div>
</div>
</div>
</div>
</body>
</html>
grazie a tutti e buona giornata
Permessi di invio
Rispondi quotando