Avere uno slider per le immagini (NivoSlider)


Avere uno slider per le immagini (NivoSlider)

Messaggio Da Ospite il Lun 6 Feb 2012 - 20:56

Avere uno slider per le immagini (NivoSlider)


Ciao,

con questo tutorial potremo avere una Nivo Slider nei nostri forum.
Prima di tutto dobbiamo inserire nel nostro forum il codice scaricabile qui

Attenzione! tutte le immagini del CSS devono essere sostituite prima di inserirle nel forum. Le immagini inserite non possono essere utilizzate. Grazie

E' consigliabile inserirlo nei templates o nella descrizione del forum con questo codice:
Codice:
<script src="URLLINK" type="text/javascript"></script>

2. Andiamo su PDA > Visualizzazione > templates > generale> index_body (solo fondatore) ed aggiungiamo dove vogliamo (che venga visualizzato) questo codice:

Codice:
<div id="slider">
    <img src="slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="slide3.jpg" alt="" title="Esempio descrizione" />
    <img src="slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
    <strong>Questo</strong> è un esempio di un <em>HTML</em> come <a href="#">link</a>.
</div>

e cambiate gli URL con i vostri... :good:
3. Ora inserire nel foglio CSS questo 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;
}

4. Andiamo nuovamente su PDA > Visualizzazione > templates > generale> >overall_header
ed inseriamo questo script prima del tag /head
Codice:
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

Tutoriale pubblicato da Niko
All rights reserved. This tutorial in not copyrighted by Forumattivo. Everyone (support forum includes) has to ask me before copying, editing or adapting it. Thanks for your support...
Copyrigth © FORUMATTIVO.COM | © FA-magazine



Ospite
Ospite


Ospite è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum