Aiuto uso Nivo Slider con javascript

Ilaria93

Utente Attivo
17 Feb 2014
62
0
0
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.
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:

Ilaria93

Utente Attivo
17 Feb 2014
62
0
0
Non mi appare niente!!! i richiami delle funzioni sono scritti bene e nei posti giusti?? Le immagini sono nel percorso indicato! L'unico dubbio che mi viene è che io non abbia scaricato per bene nivo: io ho scompattato la cartella di zip nella cartella dove tengo il mio progetto..stop.. va bene??
 
Discussioni simili
Autore Titolo Forum Risposte Data
E Aiuto per query PHP 8
R Aiuto ripristino sito web Presentati al Forum 0
L Aiuto con DataGridView Visual Basic 1
F Aiuto! cambio immagine di sfondo al cambio pagina HTML e CSS 2
I aiuto urgente per thunderbird Posta Elettronica 0
I aiuto per outlook Posta Elettronica 0
D aiuto funzioni javascript Javascript 1
T aiuto per trasformare un quiz fatto in JS in un quiz in JQUERY jQuery 0
D Aiuto CSS in ELEMENTOR - Cambiare un testo CMS (Content Management System) 0
M Fullcalendar in Codeigniter, un aiuto per la chiamata $ajax ? jQuery 0
K Aiuto con file audio in html HTML e CSS 1
G Script notifiche dekstop aiuto Javascript 0
P Aiuto per rendere un Bot Telegram Privato PHP 1
M Un aiuto da chi ha apple Mac e Software 0
P Richiesta di aiuto Presentati al Forum 1
A Aiuto per pagina php PHP 0
M Questa pagina non carica correttamente Google Maps: aiuto!! HTML e CSS 1
I Aiuto php Dependent Lookup PHP 0
R Aiuto con le query MS Access 2
M AIUTO ESERCIZIO JAVA Javascript 1
G Aiuto con htaccess e rewriterule PHP 0
T cercasi aiuto per file d1 (open-edge db) Database 0
M Aiuto con inserimento immagini WordPress 6
D aiuto schermata photoshop Photoshop 0
L Aiuto per programma web php/mySQL PHP 2
A Aiuto php colore diverso PHP 10
L Aiuto creazione menu mancante WordPress 0
C Aiuto compiuto scuola PHP/MySQL PHP 2
G Insert into select - Aiuto MySQL 0
I Aiuto bash linux Programmazione 1
F Aiuto java script Javascript 2
R Cerco aiuto Offerte e Richieste di Lavoro e/o Collaborazione 7
I Aiuto query MySQL 8
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
motleyrulez Aiuto con un ciclo PHP 0
R Aiuto sito html Offerte e Richieste di Lavoro e/o Collaborazione 3
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
G Mi dite come faccio? Aiuto photoshop ? Photoshop 1
C prestashop paragamento contrassegno aiuto modulo E-Commerce 0
Michelebozzo [PHP] Rimuovere pubblicazione nome pagina ... aiuto! PHP 7
Caldus richiesta aiuto Mac e Software 0
R [Javascript] Aiuto su questo script Javascript 2
Z Gestionale in Php/mysql: Quanto farsi pagare? Aiuto! Discussioni Varie 0
Giacomo92 [HTML] AIUTO!! Regular Expression :( Offerte e Richieste di Lavoro e/o Collaborazione 15
T Aiuto per php7 e mysqli PHP 3
T mysql tutorial per importare tabelle access in mysql aiuto MySQL 2
K [Java] aiuto switch case Java 1
E salve tutti spero si essere di aiuto e di trovare aiuto Presentati al Forum 2
D [MS Access] aiuto non riesco a capire MS Access 6
P [PHP] Browser game, aiuto a tempo libero. Offerte e Richieste di Lavoro e/o Collaborazione 0

Discussioni simili