Buongiorno ragazzi!! sto cercando di creare una slideshow di immagini e con testi animati con nivo! Ho cambiato e cambiato il codice, ma non riesco ad ottenere il risultato sperato! Potete darmi un'occhiata al codice e dirmi dove sbaglio?? Grazie.
e questo è il css:
GRazie mille davvero!!!!
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/styleprova.css"/>
<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="nivo-slider/jquery.nivo.slider.js">
</script>
<script type="text/javascript" src="nivo-slider/jquery.nivo.slider.pack.js">
</script>
<script type="text/javascript" src="https://sites.google.com/site/scriptperilblog/slideshow/jquery-1.4.3.min.js"/>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:"sliceUpDownLef",
pauseTime:6000,
animSpeed:850
});
});
</script>
<script type="text/javascript">
function captionMoveIn() {
$('.nivo-caption')
.fadeIn("fast")
.animate({left: "0px"},1400)
;};
function captionMoveOut() {
$('.nivo-caption')
.animate({left: "-400px"},1400)
.fadeOut("fast")
;};
</script>
</head>
<body>
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="http://forum.mrwebmaster.it/images/nivoslider1.jpg" alt="" title="#htmlcaption1" />
<img src="http://forum.mrwebmaster.it/images/nivoslider2.jpg" alt="" title="#htmlcaption2" />
<img src="http://forum.mrwebmaster.it/images/nivoslider3.jpg" alt="" title="#htmlcaption3" />
</div>
</div>
<div id="htmlcaption1" class="nivo-html-caption">
<h1>London Bridge</h1>
<p>London Bridge è un ponte sul Tamigi a Londra, che collega la City of London al borgo londinese di Southwark. <a href="">Continua...</a></p>
</div>
<div id="htmlcaption2" class="nivo-html-caption">
<h1>Skiline from DLR</h1>
<p>La Docklands Light Railway (DLR) è una metropolitana leggera che serve l'area ricostruita della zona del Docklands nell'est di Londra. <a href="">Continua...</a></p>.
</div>
<div id="htmlcaption3" class="nivo-html-caption">
<h1>Canada Water</h1>
<p>Canada Water è una stazione della metropolitana di Londra, situata a Rotherhithe, nella parte meridionale di Londra e facente parte della Travelcard Zone 2. <a href="">Continua...</a></p>
</div>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:"sliceUpDownLeft",
pauseTime:6000,
animSpeed:850,
afterLoad: function (){captionMoveIn();},
beforeChange: function (){captionMoveOut();captionMoveIn();}
});
});
</script>
</body>
</html>e questo è il css:
Codice:
@charset "utf-8";
/* CSS Document */
/* Caption styles */
.nivo-caption {
position:absolute;
left:-400px;
bottom:70px;
width: 300px;
color:#fff;
z-index:8;
overflow: hidden;
display: none;
}
.nivo-caption h1 {
padding:10px 20px;
margin:0;
background:#fff;
color:#000;
opacity: 0.8;
font-weight: normal;
float: left;
}
.nivo-caption p {
padding:10px 20px;
margin:0;
background:#000;
opacity: 0.8;
font-weight: normal;
float: left;
}
@media (max-width: 767px) {
#wrapper{width:100%;position: relative; margin: 100px auto;}
.nivo-caption {bottom:0px;}
.nivo-caption h1 {font-size:110%;}
.nivo-caption p {font-size:90%;}
.nivo-controlNav {display:none;}
}
@media (min-width: 768px) and (max-width: 980px) {
#wrapper{width:100%;position: relative; margin: 100px auto;}
}GRazie mille davvero!!!!
Ultima modifica di un moderatore:
