Nivo slider nel "messaggio sull indice"

[franzfenix]

Ciao a tutti!
Ho trovato questo tutorial per inserire lo slider di immagini nivo slider nel forum.
Però non comprendo alcuni passaggi del tutorial per quanto riguarda l inserimento dei codici.. Io in piu volevo inserirlo in quel messaggio sull indice..
Qualcuno potrebbe darmi una mano?
Grazie :)

[Ospite]

Ciao franzfenix, puoi dirmi cosa non hai capito ?

Saluti, MartinoPio

[franzfenix]

Ok :)
Per prima cosa scarico il plugin jquery dal sito del nivoslider, copio il codice che c é nel file .js, e dovrei incollarlo nel template, pero non so dove.
Poi una volta fatto questo bisogna inserire il codice del tutorial nel quale bisogna cambiare gli url, pero che url sostituisco? Dove vanno messe le immagini che poi si vedranno nello slider?
Il codice CSS del tutorial devo lasciarlo intatto e incollarlo paro paro?

Per inserire lo slider nel messaggio sull indice bisogna fare delle procedure diverse?

Scusate non sono molto pratico di codici :)

[Ospite]

Ciao franzfenix, facciamo passo passo se no mi confondo anche io e anche tu se facciamo tutto in una volta (e credo anche le persone che ci stanno seguendo). Come prima cosa, devi inserire quel codice javascript in PDA-> Moduli-> Gestione pagine Javascript-> Creare-> Impostare dove il codice javascript deve funzionare e sotto l'area di scrittura inserisci il codice e registri il tutto. Ora va in PDA->Generale-> Configurazione forum-> Descrizione del forum e inserisci questo codice:

Codice:

<script src="URL LINK" type="text/javascript"></script>

Dove c'è scritto "URL LINK" devi inserire l'URL della pagina Javascript che hai creato.

Dopo che hai fatto ciò dimmelo che continuiamo..


Saluti, MartinoPio

[franzfenix]

Ok fatto :)

[Ospite]

Ciao, sono contento che hai capito. Adesso devi andare in PDA > Visualizzazione > templates > generale> index_body e dovrai inserire questo codice (dove vuoi, basta che sia visibile):

Codice:

<div id="slider">
    <img src="LINK IMMAGINE SLIDE1" alt="TESTO IN CASO SI STOPPA IL CARICAMENTO SLIDE1" title="DESCRIZIONE SLIDE1/>
    <a href="URL DOVE VUOI CHE LA SLIDE2 DIRIGA L'UTENTE AL CLICK"><img src="LINK IMMAGINE SLIDE2" alt="TESTO ALLO STOP DEL CARICAMENTO DELLA PAGINA DELLO SLIDE4" title="DESCRIZIONE SLIDE2" /></a>
    <img src="LINK IMMAGINE SLIDE3" alt="TESTO ALLO STOP DEL CARICAMENTO DELLA PAGINA DELLO SLIDE3" title="DESCRIZIONE SLIDE3" />
    <img src="LINK IMMAGINE SLIDE4" alt="TESTO ALLO STOP DEL CARICAMENTO DELLA PAGINA DELLO SLIDE4" title="DESCRIZIONE SLIDE4" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
    <strong>Questo</strong> è un esempio di un <em>HTML</em> come <a href="#">link</a>.
</div>

Nel codice ho inserito cosa devi mettere. In seguito dovrai inserire nel PDA->Visualizzazioni->Colori-> Foglio CSS il seguente codice:

Codice:


#slider {
  position:relative;
    width:618px;
    height:246px;
    margin-left:190px;
  background:url(http://i22.servimg.com/u/f22/15/42/72/40/loadin10.gif) no-repeat 50% 50%;
}
#slider img {
  position:absolute;
  top:0px;
  left:0px;
  display:none;
}
#slider a {
  border:0;
  display:block;
}

.nivo-controlNav {
  position:absolute;
  left:260px;
  bottom:-42px;
}
.nivo-controlNav a {
  display:block;
  width:22px;
  height:22px;
  background:url(http://i22.servimg.com/u/f22/15/42/72/40/bullet10.png) no-repeat;
  text-indent:-9999px;
  border:0;
  margin-right:3px;
  float:left;
}
.nivo-controlNav a.active {
  background-position:0 -22px;
}

.nivo-directionNav a {
  display:block;
  width:30px;
  height:30px;
  background:url(http://i22.servimg.com/u/f22/15/42/72/40/arrows10.png) no-repeat;
  text-indent:-9999px;
  border:0;
}
a.nivo-nextNav {
  background-position:-30px 0;
  right:15px;
}
a.nivo-prevNav {
  left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}

/* The Nivo Slider styles */
.nivoSlider {
  position:relative;
}
.nivoSlider img {
  position:absolute;
  top:0px;
  left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  margin:0;
  z-index:6;
  display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
}
.nivo-box {
  display:block;
  position:absolute;
  z-index:5;
}
/* Caption styles */
.nivo-caption {
  position:absolute;
  left:0px;
  bottom:0px;
  background:#000;
  color:#fff;
  opacity:0.8; /* Overridden by captionOpacity setting */
  width:100%;
  z-index:8;
}
.nivo-caption p {
  padding:5px;
  margin:0;
}
.nivo-caption a {
  display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
  position:absolute;
  top:45%;
  z-index:9;
  cursor:pointer;
}
.nivo-prevNav {
  left:0px;
}
.nivo-nextNav {
  right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
  position:relative;
  z-index:9;
  cursor:pointer;
}
.nivo-controlNav a.active {
  font-weight:bold;
}

In seguito ti dirò cosa dovrai fare .


Saluti, MartinoPio

[franzfenix]

ok ci sono

[Ospite]

Ciao franzfrenix, adesso dovrai andare in PDA > Visualizzazione > templates > generale> >overall_header e inserisci questo codice:

Codice:

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

!IMPORTANTE!: inseriscilo prima del tag

Codice:

<head>

Adesso abbiamo finito e spero che ti funzioni

Saluti, MartinoPio

[franzfenix]

ok fatto, però ora alla fine vedo alla fine dell'indice una rotellina che gira..

[Ospite]

Ciao franzfenix, mi sa che è un altro tutorial fatto "a caso" senza neanche provarlo. L'unico che può darti indicazioni è lo sviluppatore.

Saluti, MartinoPio

[franzfenix]

ah, sì probabile.. proverò a contattare il sito dello slider..

cmq grazie mille!
metto topic risolto

[Dozy™]

C'è scritto che devi sostituire le immagini nel css forse per quello che non vedi niente

vedi solo